Компьютерлер, Бағдарламалық қамтамасыз ету
Ашылмалы CSS мәзірлерді жасау үшін қалай
Бүгін біз «қалай ашылмалы CSS мәзірлерді жасау?» Деген сұрақты қарастырады. Бұл элемент кез келген қосымша қаражат жалғамастан жасалуы деп бірден айтуға тиіс. Яғни, мәзір ғана CSS және HTML арқылы жасалған болады.
оқыту
толық бапта ондағы түсіну үшін, сіз теориялық материалдармен танысуға біраз қажет. Сіз жалған сынып таныс Бірақ, егер сіз осы тармақты өткізіп жіберуге болады. «: Hover» Сондықтан, тік ашылмалы CSS мәзірлерді жасау үшін, біз сияқты элемент қажет. жалған «: қалықтап» кез келген тағайындауға болады HTML тег. Ол сізге элемент тінтуірді апарыңыз сәт анықтауға мүмкіндік береді. Мысалы, біз меншік тағайындады: «а: Hover {түсі: қызыл;}». Бұл жазба сіз апарғанда дегенді білдіреді тінтуірді ол кез келген тег мазмұнына қызыл түске боялады. Бұл жалған элементі, сондай-ақ инактивтендірілген екенін айта кету керек. Айтпақшы, «: орнатылуға» ұқсас элементтер байланысты болды. Бірақ бұл біз жалған CSS ашылмалы мәзірін жасайды.
нұсқау
Біріншіден, бір ашылмалы мәзірі не екенін түсінуге мүмкіндік береді. Осы анықтамаға сәйкес, әр түрлі макеттерді салу түрлі әдістерін көп алады. Бұл жағдайда, біз бірнеше үнемі көрінетін объектiлерi және (жасырын) бірнеше қосымша тұратын құрылымын талдау болады. ның теориясы аяқтау және тәжірибеге бастайық.
- Біз біздің мәзір макетін жасау. Бұл, HTML-кодын таңбалау істеу үшін.
- <Ли>
- <: кірістірілген тізімін жасау / UL>. Осы сияқты нәрсе сіздің ашылмалы мәзірден сияқты көрінуі тиіс. Кейінірек араласуға CSS. Бұл жағдайда негізгі тізімі негізгі үш бағыт тұрады және екі Қоса беріліп отырған.
- ішкі мәзірді жасыру. Бұл үшін біз стильдер кестесі қолданылсын, келесі сипаттарын анықтау: UL UL {дисплей: жоқ;} Бұл экранда екінші тізім элементтерін жояды.
- мәзір CSS жасау, негізгі тізімінен ашылмалы. Каскадтықстилькестелері мынадай ережені жазу: UL Ли: Hover UL {дисплей: блок;}. Бұл жазба тінтуірдің уль тізімінде орналасқан элемент Ли, үстінен кезде экран қ (қоса беріледі) пайда дегенді білдіреді. Бір қарағанда, мұндай схема күрделі және абзал көрінуі мүмкін. Бірақ, шын мәнінде, бәрі өте қарапайым.
- Бұл тегтер <Ли> мазмұныңызды тығып өзіңіз тіркесімін пайдаланыңыз. Сіз тізім элементтерін санын өзгерте аласыз.
сәндік өзгерістер
Бойда Негізгі мәзір макетін дайын сияқты, сіз тіркеу кірісуге болады. Мүмкін, тізім элементін көрсететін маркер құтылу дайын бірінші кезекте көптеген. Бұл бір меншік CSS, атап айтқанда тізімі-стилі-түрін пайдаланып жүзеге асырылады. Ли: Сіз келесі жазбаны қосу қажет {тізімі-стилі-түрі: жоқ;}. Содан кейін сіз жақтауын кірістіру және жасай аласыз фонды. шекара және фондық осы сізге көмектеседі. Мүмкін, кейбір ашылмалы мәзірі бірдей негізгі элементтерін итеру, қосымша тізімге ретінде пайда болады ұнайды болмайды. Бұл түзету үшін, оны орналастыру аласыз. Бұл әрекетті орындау үшін, Cascading Style Sheets келесі жазбаны жазу: UL UL {лауазымы: абсолютті; сол жақ: 15px; оң: 15px; TOP: 15px; төменгі: 15px;}. Әрине, құндылықтар сіз өз пайдалануға болады. Егер сіз ашылмалы мәзірлерді көргіңіз жеріне байланысты, CSS түрлі әсерлерін қосу және біздің тізімдерін безендіруге болады көп мүмкіндіктерді ұсынады.
қорытынды
Тағы да, бұл мәзір макетін құрылысын атап өтуге болады. Мысалы, осы жағдайда енгізілген құны, UL UL пайдаланылатын CSS ережелерін тағайындау үшін. Егер сіз басқа да осыған ұқсас құрылымын қанағаттандыру үшін құжатта болса, үлкен проблемалар болуы мүмкін. Осы жағдайларда, сіз нақты мақсаты, мысалы, селекторы немесе ID-идентификаторларын пайдалану қажет. Жоғарыда мақала жаймасы ашылмалы мәзірі жалпы дизайн таныстыру үшін әзірленген. Жұмыстың қалған Сіздің иығына жүктеледі.
- <Ли>
Similar articles
Trending Now