01-ден 06-ге дейін
CSS арқылы қойындылармен навигацияны құру және суреттер жоқ
Веб беттердегі шарлау тізімнің нысаны және қойынды шарлау көлденең тізімге ұқсайды. CSS-мен көлденең секундтық навигацияны құру өте оңай, бірақ CSS 3- де оларға әлдеқайда жақсы көріну үшін бірнеше қосымша құралдар бар.
Бұл оқулық сізге CSS қойындысы мәзірін жасау үшін қажет HTML және CSS арқылы өтеді. Ол қалай көрінетінін көру үшін осы сілтемені басыңыз.
Бұл қойынды мәзірінде суреттер , тек HTML және CSS 2 және CSS 3 пайдаланылады. Қосымша қойындыларды қосу немесе олардағы мәтінді өзгерту үшін оңай өңделуі мүмкін.
Браузерлерді қолдау
Бұл қойынды мәзірі барлық негізгі браузерлерде жұмыс істейді. Интернет-шолғыш дөңгелек бұрыштарды көрсетпейді, әйтпесе ол Firefox, Safari, Opera және Chrome сияқты қосымша қойылымдарды көрсетеді.
02-ден 06-ге дейін
Мәзір тізімін жазыңыз
Барлық шарлау мәзірлері мен қойындылары шын мәнінде реттелмеген тізім болып табылады. Сондықтан, біріншіден, сіз өзіңіздің қойындысымен навигацияның баруын қалайтын сілтемелер тізімін жазасыз.
Бұл оқулық сіздің HTML-ті мәтін өңдеушісіне жазғаныңызды және сіздің веб-беттегі мәзіріңізге HTML-ті қайда орналастыру керектігін білетіндігіңізді білдіреді.
Өзіңіздің реттелмеген тізіміңізді келесідей жазыңыз:
- class = «tablist»>
- CSS 3
- id = «Ағымдағы»> қойындылар
- Үшін
- Мәзірлер
Код екі нәрсені шақырады: class = «tablist» және id = «current». Бірінші қажет . Егер тізімдер тізімін сыныпты тізіміңізге қоймасаңыз, қойындылар жұмыс істемейді. Екінші - міндетті емес. Id = «current» дегенді сол бетте көрсетілген ерекшеліктердің қайсысына салыңыз. Мен әдетте осы параметрді бөлектеу үшін пайдаланамын, бірақ мен оны ең маңызды қойындыны бөлектеу үшін пайдалана аласыз. Немесе оны толығымен алып тастай аласыз.
03 06
Стиль кестесін өңдеуді бастаңыз
Сіз сыртқы стиль кестесін немесе ішкі стиль кестесін қолдана аласыз. Үлгі мәзір беті құжаттың
ішінде ішкі стиль кестесін қолданады.Алдымен UL Өзін Стиль жасаймыз
Бұл жерде біз сыныптың қосымша тізімін қолданамыз. UL тегіңізді стильдеудің орнына, барлық реттелмеген тізімдеріңізді сіздің бетіңізде стиль жасайды, тек UL класын ғана стильдеу керек. Тізім тізімі Осылайша сіздің CSS-дегі бірінші жазба болуы керек:
.tablist {}Маған аяқ-киімнің аяқ-киімін (}) алдын-ала қоюды ұнатамын, сондықтан оны кейінірек ұмытпаймын.
Біз қойынды мәзірінің тізімі үшін реттелмеген тізім тегін пайдаланып жатырмыз, бірақ біз кез келген таңбалауыштарды немесе сандарды серуендеуді қаламаймыз. list-style: none; Бұл браузерге бұл тізім болса да, ол алдын ала анықталған стильдер жоқ (мысалы, оқтар немесе сандар) тізім.
Содан кейін, тізіміңіздегі биіктікті толтырғыңыз келген бос орынға сәйкестендіруге болады. Мен биіктігі үшін 2EM таңдадым, себебі бұл екі есе стандартты қаріп өлшемі және қойынды мәтінінің үстінен және астынан жартысына дейін эм береді. биіктігі: 2эм; Бірақ ені сіз қалаған мөлшерге дейін орнатуға болады. UL тегтері автоматты түрде енінің 100% -ын қабылдайды, сондықтан егер сіз ағымдағы контейнерден кіші болмаса, енін шығарып тастай аласыз.
Ақырында, егер сізде мастер стилінде UL және OL тегтері үшін алдын-ала ескертпелер болмаса, оларды орналастырғыңыз келеді. Бұл UL-де шекараларды, шеттерін және толтыруларды өшіру керек дегенді білдіреді. толтыру: 0; маржа: 0; шекара: жоқ; UL тегіңізді қалпына келтірген болсаңыз, шегінің, толтырғыштың немесе шекараның дизайнымен үйлесетін нәрсеге өзгерте аласыз.
Сіздің соңғы .tablist сыныбыңыз келесідей болуы керек:
.tablist {list-style: none; биіктігі: 2эм; толтыру: 0; маржа: 0; шекара: жоқ; }04 04
LI Тізім элементтерін өңдеу
Сіздің реттелмеген тізіміңізді көрсеткеннен кейін, оның ішіндегі LI тегтерін көрсету керек. Әйтпесе, олар стандартты тізім сияқты әрекет етеді және әрқайсысы табуляторларыңызды дұрыс орналастырмастан келесі жолға көшеді.
Алдымен, стиль сипатын орнатыңыз:
.tablist li {}Содан кейін сіз қойындыларыңызды көлденең жазықтықта орналасқыңыз келсе, қалқымай қалғыңыз келеді. float: сол;
Қойыншалар арасында кейбір маржаны қосуды ұмытпаңыз, сондықтан олар біріктірілмейді. margin-right: 0.13em;
Сіздің li стильдеріңіз келесідей болуы керек:
.tablist li {float: сол; margin-right: 0.13em; }05 06
Қойындыларды CSS арқылы қойындылар сияқты көру 3
Осы стиль кестесіндегі ауыр көтеруді көп жасау үшін мен реттелмеген тізімдегі сілтемелерді бағыттаймын. Браузерлер сілтемелердің веб-бетте басқа тегтерге қарағанда көбірек жасайтындығын түсінеді, сондықтан сіз оларды якорь тегіне (сілтемелер) тіркеп жатсаңыз, жақтаушылары сияқты нәрселерге сәйкес келу үшін ескі браузерлерді оңайырақ алуға болады. Мәселен алдымен сіздің стиліңіздің қасиеттерін жазыңыз:
.tablist li a {} .tablist li a: hover {}Бұл қойындылар бағдарламадағы қойындылар сияқты әрекет етуі керек болғандықтан, қойындының бүкіл аймағы тек байланыстырылған мәтінге емес, басылатын болады. Ол үшін A тегін қалыпты « кірістірілген » күйінен блоктық элементіне түрлендіру керек. дисплей: блок; (Егер сіз айырмашылық туралы көбірек білгіңіз келсе, Блок-деңгеймен Inline Elements бөлімін оқыңыз.)
Одан кейін, қойындыларыңызды бір-бірімен симметриялылыққа мәжбүрлеудің жеңіл тәсілі, бірақ мәтіннің енін сыйғызу үшін икемділік оң және сол жақтауларды біркелкі ету болып табылады. Мен үстіңгі және астыңғы жағын 0, оң және сол жағын 1м етіп белгілеу үшін толтырғыш стенділік қасиетін қолдандым. толтыру: 0;
Мен сондай-ақ сілтемелердің сілтемесін алып тастауды таңдадым, осылайша қойындылар сілтемелер сияқты аз көрінеді. Бірақ егер сіздің тыңдаушыларыңыз мұны шатастырса, осы жолды қалдырыңыз. байланыс-безендіру: жоқ;
Қойындылар айналасында жұқа шекара қою арқылы, оларды ойықтарға ұқсас етеді. Мен шекара шекарасының шекарасын барлық төрт жақтың шекарасына орналастыру үшін мүліктік шекараны қолдандым: 0.06м қатты # 000; Содан соң төменгі жағынан оны жою үшін шекара сипатын пайдаланды. төменгі шекара: 0;
Содан кейін қойындылардың қаріпіне, түсіне және өң түсіне кейбір түзетулер енгіздім. Оларды сайтымызға сәйкес келетін мәнерлерге орнатыңыз. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; түсі: # 000; background-color: #ccc;
Жоғарыда келтірілген барлық стильдер селекторға өту керек .таблицисті, әдетте олар жалған якорларға әсер етеді. Содан кейін қойындыларды көбірек нұқу үшін жасау үшін бірнеше мемлекеттік ережені қосу керек .tablist li a: hover.
Маған тінтуір жасағанда, мәтіннің өңін өзгертуді ұнатамын. фон: # 3cf; Түсі: #fff;
Мен браузерлерге сілтеме сызылғанын қаламайтын басқа ескертуді енгіздім. мәтінді безендіру: жоқ; Тағы бір кең таралған әдіс - қойынды үстінен тышқанның астына астын сызуды қайта қосу. Егер сіз мұны істегіңіз келсе, оны мәтіндік безендіруге өзгертіңіз: астын сызыңыз;
Бірақ CSS 3 қайда?
Егер назарыңызды аударсаңыз, стиль кестесінде ешқандай CSS 3 стилі қолданылмағанын байқаған шығарсыз. Бұл кез-келген заманауи браузерде, соның ішінде Internet Explorer-де жұмыс істеу артықшылығына ие. Бірақ бұл қойындылар төртбұрыш қораптардан артық емес. CSS 3 стилі қоңырауларының шекаралық радиусын қосу арқылы (және браузерге тән қоңыраулармен байланысты) сіз шеттерін дөңгелектеп, manila папкасында қосымша қойындыларға қарағанда көре аласыз.
.tablist li ережеге қосылатын стильдер: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50м; -moz-шекарасы-радиус-қоршау: 0.50м; -moz-border-radius-topleft: 0.50м; шекара жоғарғы-оң жақ радиусы: 0.50м; border-top-left-radius: 0.50н;
Бұл жазған соңғы стиль ережелері:
.tablist li a {көрсету: блок; толтыру: 0; мәтінді безендіру: жоқ; шекара: 0.06м қатты # 000; төменгі шекара: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; түсі: # 000; background-color: #ccc; / * CSS 3 элементтері * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50м; -moz-шекарасы-радиус-қоршау: 0.50м; -moz-border-radius-topleft: 0.50м; шекара жоғарғы-оң жақ радиусы: 0.50м; border-top-left-radius: 0.50н; } .tablist li a: hover {background: # 3cf; Түсі: #fff; мәтінді безендіру: жоқ; }Осы стильдермен сізде барлық негізгі браузерлерде жұмыс істейтін және CSS 3 үйлесімді браузерлердегі жақсы басып шығарылған қойындылар сияқты көрінетін қойынды мәзірі бар. Келесі бет сізге тағы бір нәрсе жасау үшін пайдалануға болатын тағы бір нұсқаны береді.
06 06
Ағымдағы қойындысын бөлектеңіз
Мен жасаған HTML элементінде UL идентификаторы бар бір тізім элементі болған. Бұл бір LI-ді басқасынан басқа стиль беруге мүмкіндік береді. Ең жиі қолданылатын жағдай - ағымдағы қойынды белгілі бір жолмен белгілеу. Бұл туралы ойланудың тағы бір жолы - тірі емес қойындыларды көгілдіргіңіз келеді. Содан кейін идентификатордың әртүрлі беттерде орналасқан жерін өзгерте аласыз.
Мен #current A тегіне, сондай-ақ #current A: hover sta, екеуі де сәл басқаша болып табылады. Түсті, өң түсін, тіпті осы элементтің биіктігін, енін және толтырылуын өзгерте аласыз. Кез-келген өзгерістер сіздің дизайныңызда мағынаға ие болсын.
.tablist li # ағымдық {background-color: # 777; Түсі: #fff; } .tablist li # ағымдық а: hover {background: # 39C; }Және сіз аяқталды! Сіз тек веб-сайтыңыз үшін қойынды мәзір құрдыңыз.