01 аз 06
Чӣ тавр эҷод кардани Навигири садо бо CSS ва Не тасвирҳо
Навигатсия дар саҳифаҳои варақи як рӯйхати рӯйхат аст, ва равзанаи намоиш ҳамчун як рӯйхати уфуқӣ аст. Ин хеле осон аст, ки таҳаввулоти уфуқӣ бо CSS-ро осон созад, аммо CSS 3 ба мо якчанд асбобҳои иловагиро медиҳад, то ки онҳо ҳатто назаррастар назар андозанд.
Ин омӯзиш шуморо ба воситаи HTML ва CSS лозим аст, ки эҷод кардани менюи CSS-ро дарбар гирад. Ба он пайванде, ки ба назар мерасад, ба назар мерасад.
Менюи намоишшуда ҳеҷ тасвирро истифода намебарад , танҳо HTML ва CSS 2 ва CSS 3. Ин метавонад ба таблиғи иловагӣ такя карда шавад ё матнро дар онҳо тағйир диҳед.
Дастгирии браузер
Ин менюи меню дар ҳамаи браузери асосӣ кор хоҳад кард . Internet Explorer намехоҳад гӯшаҳои гирдаро нишон надиҳад, вале наменамояд, ба монанди Firefox, Safari, Opera ва Chrome.
02 аз 06
Рӯйхати менюи худро нависед
Ҳамаи менюҳо ва ҷадвалҳо дар ҳақиқат танҳо як рӯйхати номаҳдуд нестанд. Ҳамин тариқ, аввалин чизе, ки шумо мехоҳед кор кардан мехоҳед, рӯйхати номатлуби пайвандҳоеро,
Ин ҳуруфотест, ки шумо HTML-ро дар муҳаррири матн менависед ва шумо медонед, ки дар он ҷо шумо HTML-ро барои вебсайти вебии худ гузоштаед.
Рӯйхати номатлуби худро мисли ин нависед:
- class = "listings">
- CSS 3
- id = "ҷорӣ"> Тугмаҳо
- Барои
- Меню
Шумо мефаҳмед, ки рамз ду чизро занг мекунад: class = "tablist" ва id = "ҳозир". Аввал аввал талаб карда мешавад . Агар шумо ба синфҳои номнависшудаи синфҳои номатлуб гузориш надиҳед, ҷадвалҳо кор намекунанд. Дуюм, ихтиёрӣ аст. Id = "акнун" -ро дар бораи варақаи вебсайте, ки мехоҳед мехоҳед дар ин саҳифа қайд кунед. Ман одатан инро истифода мебарам, то саҳифаи манеро, ки ман дар он ҳастам, нишон диҳед, аммо шумо метавонед онро барои варақ кардани сутуни муҳимтар истифода баред. Ё шумо метавонед онро пурра тоза кунед.
03 06
Оғоз кардани варақаи таркиби шумо
Шумо метавонед варақи сабки беруна ё варақи дохилиро истифода баред . Саҳифаи менюи намунавӣ дар сатри
ин ҳуҷҷати дохилӣ истифода мебарад.Пеш аз он, мо худро UL меномем
Ин аст, ки дар куҷо мо силсилаи гурӯҳро истифода мебарем. HTML. Баръакс, таркибҳои UL, ки ҳамаи рӯйхатҳои номатлубро дар саҳифаҳои худ сабт мекунад, шумо бояд танҳо дараҷаи UL сабт кунед. пас ин рӯйхати аввалин дар CSS-и шумо бояд бошад:
.txtlist {}Ман мехоҳам, ки дар охири қадами curly (}) пешакӣ ҷойгир кунам, пас ман дертар фаромӯш намекунам.
Дар ҳоле ки мо як рӯйхати номнависшудаи номуайянро барои рӯйхати менюи меню истифода мебарем, вале мо намехоҳем, ки ягон адад ё рақамҳоро дар дохили бино намонанд. Ҳамин тавр тарзи яктарафа бояд илова карда шавад. Рӯйхати номуайян: none; Ин браузери ба он ишора мекунад, ки дар ҳоле ки он рӯйхат аст, ин рӯйхат бо намудҳои пешакӣ муайяншуда (мисли маҷмаҳо ё рақамҳо).
Пас, шумо метавонед баландии рӯйхати худро ба мувофиқат кардани фазои шумо, ки хоҳед, пур кунед. Ман барои баландии худ 2емро интихоб намудам, зеро ин ду баробар андозаи стандартии стандартӣ буда, тақрибан ним соат дар боло ва поён аз матни ҷадвал медиҳад. баландӣ: 2м; Аммо шумо метавонед васеъро ба ҳар андозае, ки мехоҳед мехоҳед, бифаҳмед. UL қимматҳо ба таври автоматӣ 100% масоҳати худро хоҳанд гирифт, то он даме ки шумо мехоҳед, ки онро аз контейнер ҷорӣтар бошад, шумо метавонед васеъкуниро берун кунед.
Дар охир, агар варақаи стандартии шумо барои UL ва OL-ҳо пешакӣ пешакӣ дошта бошед, шумо мехоҳед онро дар бар гиред. Ин маънои онро дорад, ки шумо бояд сарҳадҳо, маржинҳо ва фишорро дар UL-и худ қатъ кунед. padding: 0; маржа: 0; сарҳад Агар шумо аллакай лавҳаи UL-ро барқарор кардед, шумо метавонед маржинҳо, пуджуҳо ё марзро ба чизҳое, ки бо тарҳрезии шумо мувофиқанд, тағйир диҳед.
Синфи ниҳоии шумо бояд синфҳои зеринро бинад:
.type list {st style list: none; баландӣ: 2м; padding: 0; маржа: 0; сарҳад }}04 06
Таҳлили рӯйхатҳои LI-рӯйхат
Пас аз он ки шумо рӯйхати номатлуби худро сабт кардед, шумо бояд сабтҳои LI-ро дар дохили он тарроҳӣ кунед. Дар акси ҳол онҳо ба монанди рӯйхати стандартӣ амал мекунанд ва ҳар кас ба хатти навбатӣ бе гузоштани ҷадвалҳои худ рост намеояд.
Аввалан, моликияти сабки шумо насб кунед:
.tablist li {}Пас шумо мехоҳед, ки ҷадвалҳои худро шино кунед, то ки онҳо дар ҳавопаймо уфуқӣ кунанд. float: left;
Ва фаромӯш накунед, ки дар байни ҷадвалҳо якчанд маржа илова кунед, то онҳо якҷоя намешаванд. margin-right: 0.13ем;
Нишонҳои LI бояд чунин бошад:
.tablist li {float: left; margin-right: 0.13ем; }}05 06
Пеш аз он, ки Tabs ба мисли Tabи нигоҳ кунед, 3
Барои бисёре аз ғафсии вазнин дар ин саҳифа сабт карда, ман пайвандҳоро дар дохили рӯйхати номатлуб баҳо медиҳам. Браузерҳо эътироф мекунанд, ки пайвастҳо дар саҳифаи веб аз дигар аломатҳо бештар истифода мекунанд, бинобар ин, браузерҳои калонтарини ба даст овардани чизҳои монанди hover ишора мекунанд, агар шумо онҳоро ба пайвасткунӣ пайваст кунед (пайвандҳо). Пас, аввал, хосиятҳои сабки худро нависед:
.taglist a {} .tablist a a: hover {}Азбаски ин ҷадвалҳо бояд монанди ҷадвалбандиҳоро иҷро кунанд, шумо мехоҳед, ки тамоми майдони ҷадвалро пахш кунед, на танҳо матн. Барои ин кор кардан лозим аст, ки "A" параграфро аз ҳолати муқаррарии " inline " ба элементҳои блок табдил диҳед . намоиш: блок; (Агар шумо дар бораи фарқият дар бораи муфассал манфиат доред, хонед Block-Level ва Inline Elements .)
Сипас, роҳи осон кардани қуттиҳои шуморо бо симметрия кардан мумкин аст, аммо бо вуҷуди он, ки ба паҳншавии матн мувофиқ аст, ҳамон тавре, Ман моликияти портфеленти амудиро истифода бурд, то ки болотар ва поёнро ба 0 ва рост ва чап ба 1 сония диҳанд. padding: 0 1ем;
Ман инчунин мехоҳам, ки сутунҳои пайвандро тоза кунед, то ки ҷадвалҳо назар ба пайвандҳо назар андозанд. Аммо агар тамошобинони шумо аз он шубҳа дошта бошанд, ин хатиро тарк кунед. link-decoration: none;
Бо гузоштани сарҳади лоғар дар атрофи ҷадвалҳо, онҳо онро ба монанди ҷадвалҳо мебинанд. Ман молу мулкҳои сарҳадиро истифода бурда, сарҳадро дар ҳудуди чор ҷониб сарҳад гузоштам: 0,06 қудрати # 000; Ва он гоҳ аз амволи Сарҳади сарҳадӣ истифода бурда, онро аз поёни он дур кунед. сарҳади поёнӣ: 0;
Сипас, ман ранги сурх, ранги ва рангии тақвимро якчанд танзим кардаам. Инҳоро ба сабки, ки ба сомонаи худ мувофиқ аст, насб кунед. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; ранг: # 000; Ранги аслии: #ccc;
Ҳамаи намудҳои дар боло номбаршуда бояд дар интихоби интихобшуда гузаранд .Ба рӯйхат, қоида, то ки онҳо ба тамғаҳои ҷудогона умуман таъсир мерасонанд. Баъд аз он ки ҷадвалҳо бозгаштаро бештар пайдо кунанд, шумо бояд чанд қоидаҳои давлатиро илова кунед .Ба рӯйхат: hover.
Ман мехоҳам, ки рангҳои матн ва заминаро тағйир диҳам, вақте ки шумо онро дар болои он пахш мекунед. background: # 3cf; ранг: #fff;
Ва ман ба ёдраскуниҳои дигар ба браузерҳо дохил шудаам, ки ман мехоҳам, ки пайвастшавиро боқӣ мемонад. матн-фароғат: none; Усули дигари умумӣ ин аст, ки рамзи рӯйхатро ҳангоми баргаштан ба ҷадвал такрор кунед. Агар шумо хоҳед, ки ин корро анҷом диҳед, онро ба матн-матн иваз кунед: сатр;
Аммо CSS дар куҷо куҷост?
Агар шумо диққат дихед, шумо эҳтимол дидед, ки ягон тарзи CSS 3-ро, ки дар варақаи сабз истифода бурда нашудааст, вуҷуд надоштанд. Ин имкон медиҳад, ки дар ҳама браузерҳои замонавӣ, аз ҷумла Internet Explorer кор кунад. Аммо он намехоҳад, ки ҷадвалҳо ба монанди чизи зиёда аз қуттиҳои ҷуфт назар андозанд. Бо илова кардани CSS 3 style сабти радиатсионӣ (ва он алоқаи браузерҳои мушаххаси алоқаро) шумо метавонед кунҷҳои тақсим карда, ба монанди ҷадвалҳои дар ҷузвдони manila назар андозед.
Нишондиҳандаҳое, ки шумо бояд ба қуттиҳои .teb дохил карда бошед, инҳоянд: -вебкит-сарҳади боло-паҳнои рост: 0.50м; -вебкит-сарҳади боло-чап-радиус: 0.50м; -моз-сарҳади радиус-заминӣ: 0.50м; -моз-сарҳад-радиус-толлинг: 0.50м; сатҳи фарогирии канори рост: 0.50м; сарҳад-боло-радиуси радиатсионӣ: 0.50м;
Инҳо қоидаҳои статикии ниҳоиро навиштаанд:
{list a {display: block; padding: 0 1ем; матн-фароғат: none; сарҳад: 0,06 риштаро # 000; сарҳади поёнӣ: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; ранг: # 000; Ранги аслии: #ccc; / * CSS 3 унсурҳо * / вебсит-рамз-канори радиошунавонӣ: 0.50м; -вебкит-сарҳади боло-чап-радиус: 0.50м; -моз-сарҳади радиус-заминӣ: 0.50м; -моз-сарҳад-радиус-толлинг: 0.50м; сатҳи фарогирии канори рост: 0.50м; сарҳад-боло-радиуси радиатсионӣ: 0.50м; } .Ба рӯйхат як: hover {background: # 3cf; ранг: #fff; матн-фароғат: none; }}Бо ин услубҳо, шумо менюи ҷолибе, ки дар ҳамаи браузерҳои асосӣ кор мекунад ва ба таблитҳои хуби чопшуда дар CSS 3 браузерҳои мувофиқ нигаронида шудааст. Саҳифаи оянда ба шумо як варианти иловагӣ медиҳад, ки шумо метавонед онро ҳатто бештар аз либос истифода баред.
06 аз 06
Тугмаи ҷорӣ кунед
Дар HTML сохта шудааст, UL дорои унсури рӯйхат бо ID буд. Ин ба шумо имкон медиҳад, ки аз дигар услуби LI як тарзи дигаре дихед. Вазъияти бештар маъмул аст, ки ҷадвали ҷориро аз як тараф дур созед. Тарзи дигари ин фикр кардан ин аст, ки шумо мехоҳед, ки ҷадвалҳоро, ки дар он зиндагӣ намекунанд, ранг накунед. Пас шумо тағиротеро, ки дар он саҳифаҳои гуногун мавҷуданд, тағйир диҳед.
Ман таррохиро ҳам як ояҳои A-ҳо ва ҳам бо суроғаи A-ҳои: сенсорро ба ҷо меорем, то ки ҳар дуи каме фарқ кунанд. Шумо метавонед ранг, ранги аслиро, ҳатто баландии, паҳн ва пур кардани он элементро тағйир диҳед. Ҳар гуна тағйирот дар тарҳрезии шумо ба назар мерасад.
.taglist li # a current background color: # 777; ранг: #fff; } .tablist li # ҷорӣ a: hover {background: # 39C; }}Ва шумо анҷом додаед! Шумо танҳо як воҳиди ҷолибро барои вебсайти шумо эҷод кардед.