01 з 06
Як стварыць ўкладкі навігацыю з дапамогай CSS і без малюнкаў
Рух на вэб-старонках з'яўляецца формай спісу і ўкладак навігацыі, як гарызантальны спіс. Гэта даволі лёгка стварыць гарызантальныя ўкладкі навігацыю з дапамогай CSS, але CSS 3 дае нам яшчэ некалькі інструментаў , каб прымусіць іх выглядаць яшчэ лепш.
Гэта кіраўніцтва правядзе вас праз HTML і CSS, неабходны для стварэння CSS укладкі меню. Націсніце на гэтую спасылку, каб паглядзець, як гэта будзе выглядаць.
Гэта ўкладкі меню выкарыстоўвае ніякіх малюнкаў, толькі HTML і CSS 2 і CSS 3. Ён можа быць лёгка адрэдагавана , каб дадаць дадатковыя ўкладкі або змяніць тэкст у іх.
падтрымка браўзэраў
Гэта меню ўкладкі будзе працаваць ва ўсіх асноўных браўзэрах. Даследчык інтэрнэту не будзе паказваць скругленыя куты, але ў адваротным выпадку, ён будзе паказваць ўкладкі толькі як Firefox, Safari, Opera і Chrome.
02 з 06
Напісаць свой спіс меню
Усе меню навігацыі і ўкладкі сапраўды проста неўпарадкаваных спіс. Такім чынам, першая рэч, якую вы хочаце зрабіць, гэта напісаць неўпарадкаваных спіс спасылак, дзе вы хочаце, каб ваша ўкладкі навігацыі ісці.
У гэтым кіраўніцтве мяркуецца, што вы пішаце свой HTML у тэкставым рэдактары і што вы ведаеце, куды змясціць HTML для меню на вашай вэб-старонцы.
Напісаць свой неўпарадкаваных спіс, як гэта:
- клас = "tablist">
- CSS 3
- ID = "бягучыя"> Укладкі
- для
- меню
Вы заўважыце, што код выклікае дзве рэчы: клас = «tablist» і ID = «ток». Першы патрабуецца. Калі вы не паставіце клас tablist на ваш неўпарадкаваных спіс, ўкладкі не будуць працаваць. Другі не з'яўляецца абавязковым. Змесціце ід = "бягучая» на якой ўкладцы вы хацелі б быць вылучаны на гэтай старонцы. Я звычайна выкарыстоўваю гэта, каб вылучыць старонку, на якой я знаходжуся, але вы можаце выкарыстоўваць яго, каб вылучыць ўкладку найбольш важнай. Ці вы можаце выдаліць яго цалкам.
03 з 06
Пачатак Рэдагаванне стыляў
Вы можаце выкарыстоўваць або знешнюю табліцу стыляў або ўнутраны ліст стыляў . На старонцы меню ўзору выкарыстоўвае ўнутраную табліцу стыляў у
дакумента.Спачатку мы Стыль у UL САБЕ
Тут мы выкарыстоўваем клас tablist .у ў HTML. Замест таго, стылізацыя тэга UL, які будзе стыль ўсіх неўпарадкаваных спісаў на вашай старонцы, вы павінны стылізаваць толькі клас UL. tablist Такім чынам, першая запіс у вашым CSS павінна быць:
.tablist {}Я хацеў паставіць у фінале фігурнай дужкай (}) загадзя, так што я не забыўся пра гэта пазней.
Нягледзячы на тое, што мы выкарыстоўваем неўпарадкаваных спіс тэгаў для спісу меню ўкладкі, але мы не хочам ніякіх куль або лікаў паўзучыя ст. Такім чынам, першы стыль, які вы павінны дадаць гэта. спіс-стыль: не; Гэта кажа браўзэру, што ў той час як гэта спіс, гэта спіс, без загадзя вызначаных стыляў (напрыклад, кулі або лічбаў).
Затым, вы можаце ўсталяваць вышыню вашага спісу, каб адпавядаць прастору вы хочаце, каб запоўніць. Я абраў 2EM для майго росту, так як гэта падвойнае стандартнага памер шрыфта, і дае прыкладна палову ЕСТ вышэй і ніжэй тэксту ўкладкі. вышыня: 2em; Але вы можаце ўсталяваць шырыню да любога памеру вы хочаце. UL-тэгі будуць аўтаматычна займаць 100% шырыні, так што калі вы не хочаце быць менш бягучага кантэйнера, вы можаце пакінуць шырыню па-за.
Нарэшце, калі ваш майстар стылі не маюць пресетов для UL і OL тэгаў, вы хочаце , каб пакласці іх. Гэта азначае , што вы павінны адключыць межы, палёў і водступы на вашым UL. абіўка: 0; Маржа: 0; мяжы: няма; Калі вы ўжо скінуць тэг UL, вы можаце змяніць поля, водступы або мяжы да нечага, што адпавядае з вашым дызайнам.
Ваш апошні клас .tablist павінен выглядаць наступным чынам:
.tablist {спіс-стыль: не; вышыня: 2em; абіўка: 0; Маржа: 0; мяжы: няма; }04 з 06
Рэдагаванне элементаў спісу LI
Пасля таго, як вы стыль вашага неўпарадкаваных спіс, вам трэба ўкладваць тэгі LI ўнутры яго. У адваротным выпадку, яны будуць дзейнічаць як стандартны спіс, і кожны перайсці на наступны радок без размяшчэння ўкладак правільна.
Па-першае, наладзіць ўласцівасць стылю:
.tablist Li {}Затым вы хочаце, каб плаваць ўкладкі, так што яны выстройваюцца ў чаргу на гарызантальнай плоскасці. плаваць: злева;
І не забудзьцеся дадаць некаторы запас паміж укладкамі, так што яны не зліваюцца адзін з адным. Маржа направа: 0.13em;
Вашы стылі Лі павінен выглядаць наступным чынам:
.tablist Li {паплавок: левы; Маржа направа: 0.13em; }05 з 06
Стварэнне ўкладак Паглядзіце, як ўкладкі з дапамогай CSS 3
Для таго, каб зрабіць вялікую частку цяжкага ўздыму ў гэтай табліцы стыляў, я таргетынг спасылак ўнутры неўпарадкаванай спісу. Браўзэры прызнаюць, што спасылкі зрабіць больш на вэб-старонцы, чым іншыя тэгі, так што лягчэй атрымаць больш старыя браўзэры выконваць такія рэчы, як пры навядзенні станаў, калі прымацаваць іх да якарнага тэгу (спасылкі). Таму спачатку напісаць свае ўласцівасці стылю:
.tablist Лі а {} .tablist Li: з лунання {}Паколькі гэтыя язычкі павінны дзейнічаць, як укладкі ў дадатку, вы хочаце, каб уся вобласць ўкладкі, каб быць інтэрактыўнымі, а не толькі звязаны тэкст. Каб зрабіць гэта, вы павінны пераўтварыць тэг з гэта нармальна « инлайн » стан у блокавы элемент . Дысплей: блок; (Калі вы зацікаўлены ў атрыманні дадатковай інфармацыі аб розніцы, чытання на ўзроўні блокаў супраць УБУДОЎВАЕМЫ элементаў .)
Затым, просты спосаб прымусіць ўкладкі, каб быць сіметрычным сябрам з адным, але ўсё-ткі прагінаецца пад шырыню тэксту, каб зрабіць правыя і левыя водступы той жа самымі. Я выкарыстаў абіўка скарочанае ўласцівасць, каб усталяваць верхнюю і ніжнюю 0, а справа і злева 1em. абіўка: 0 1em;
Я таксама вырашыў выдаліць спасылку падкрэсліванне, так што ўкладкі выглядаюць менш як спасылкі. Але калі ваша аўдыторыя можа быць збітыя з толку, што, пакіньце гэты радок. спасылка-ўпрыгожванне: не;
Паставіўшы тонкую рамку вакол ўкладак, гэта робіць іх падобнымі на ўкладкі. Я выкарыстаў мяжы скарочанае ўласцівасць пакласці мяжу вакол усіх чатырох бакоў мяжы: 0.06em цвёрды # 000; А затым выкарыстоўвалі мяжы дна ўласцівасці , каб выдаліць яго з ніжняй часткі . мяжы знізу: 0;
Тады я зрабіў некаторыя карэктывы ў шрыфт, колер і колер фону ўкладак. Усталюйце такія стылі, якія адпавядаюць вашаму сайту. шрыфта: тоўсты 0.88em / 2em Arial, Жэнэва, Helvetica, без засечак; колер: # 000; колер фону: #ccc;
Усе вышэйпералічаныя стылі павінны ісці ў селектар .tablist Li а, правілы так, што яны ўплываюць на тэгі прывязкі ў цэлым. Затым, каб зрабіць ўкладкі з'яўляюцца больш інтэрактыўнымі, вы павінны дадаць некалькі стан правілы .tablist Лі з: парыць.
Я хацеў бы змяніць колер тэксту і фону, каб зрабіць закладку поп пры навядзенні курсора мышы на яго. фон: # 3CF; колер: #fff;
І я ўключыў яшчэ адзін напамін браўзэраў, якія я хачу спасылку, каб заставацца ня падкрэсленыя. тэкст-аздабленне: няма; Іншы распаўсюджаны спосаб, каб уключыць падкрэсліванне зноў пры навядзенні на ўкладку. Калі вы хочаце, каб зрабіць гэта, змяніць яго ў тэкст-аздабленне: падкрэсліць;
Але Дзе CSS 3?
Калі вы звярнулі ўвагу, вы, верагодна, заўважылі, што там не было якіх-небудзь CSS 3 стыляў, якія выкарыстоўваюцца ў табліцы стыляў. Гэта мае перавагу працы ў любым сучасным браўзэры, уключаючы Internet Explorer. Але гэта не робіць ўкладкі выглядаюць як нешта большае, чым квадратныя скрынкі. Дадаючы CSS 3 стыль выкліку мяжы радыусу (і гэта звязана званкі для розных браўзераў), вы можаце зрабіць краю закруглены, каб выглядаць як укладкі ў тэчку манильской.
Стылі вы павінны дадаць да .tablist Li правіла, з'яўляюцца: -webkit-мяжа-верхні правы-радыус: 0.50em; -webkit-мяжы верхняга левага радыусу: 0.50em; -moz-мяжы радыусу-topright: 0.50em; -moz-мяжы радыусу-TopLeft: 0.50em; мяжы верхняга правага радыусу: 0.50em; мяжы верхняга левага радыусу: 0.50em;
Такія канчатковыя правілы стылю, якія я напісаў:
.tablist Li а {дысплей: блок; абіўка: 0 1em; тэкст-аздабленне: няма; мяжа: 0.06em цвёрды # 000; мяжы знізу: 0; шрыфта: тоўсты 0.88em / 2em Arial, Жэнэва, Helvetica, без засечак; колер: # 000; колер фону: #ccc; / * CSS 3 элемента * / WebKit-мяжы верхняга правага радыусу: 0.50em; -webkit-мяжы верхняга левага радыусу: 0.50em; -moz-мяжы радыусу-topright: 0.50em; -moz-мяжы радыусу-TopLeft: 0.50em; мяжы верхняга правага радыусу: 0.50em; мяжы верхняга левага радыусу: 0.50em; } .tablist Li: з лунання {фон: # 3CF; колер: #fff; тэкст-аздабленне: няма; }З дапамогай гэтых стыляў, у вас ёсць ўкладкі меню, якое працуе ва ўсіх асноўных браўзэрах і выглядае прыгожа надрукаваныя укладкі ў CSS 3 сумяшчальных браўзэрах. На наступным старонцы дае вам яшчэ адзін варыянт, вы можаце выкарыстоўваць, каб апрануць яго яшчэ больш.
06 з 06
Вылучыце Бягучую ўкладку
У HTML я стварыў, то UL быў адзін элемент спісу з ідэнтыфікатарам. Гэта дазваляе даць аднаму LI іншы стыль ад астатніх. Найбольш распаўсюджанай з'яўляецца сітуацыя, каб зрабіць бягучую ўкладку вылучыцца ў некаторым родзе. Іншы спосаб думаць пра тое, што вы хочаце шэрым ўкладкі, якія не жывуць. Затым змяніць, дзе ідэнтыфікатар на розных старонках.
Я стыль як #current тэг, а таксама #current A: лунання STA так, што абодва яны трохі адрозніваюцца. Вы можаце змяніць колер колеру, фон, нават вышыню, шырыню і водступы гэтага элемента. Зрабіць усё змены маюць сэнс у вашым дызайне.
.tablist Лі # ток а {колер фону: # 777; колер: #fff; } .tablist Li # току: з завісаць {фон: # 39C; }А ты малайчына! Вы толькі што стварылі ўкладкі меню для вашага сайта.