01 o 06
Sut i Greu Tabbed Navigation gyda CSS a Dim Delweddau
Mae llywio ar dudalennau gwe yn fath o restr, ac mae llywio tabbed fel rhestr llorweddol. Mae'n hawdd iawn creu llywio tabl llorweddol â CSS, ond mae CSS 3 yn rhoi ychydig o offer mwy i ni er mwyn eu gwneud yn edrych yn wellach.
Bydd y tiwtorial hwn yn mynd â chi drwy'r HTML a CSS sydd ei angen i greu dewislen tabg CSS. Cliciwch ar y ddolen honno i weld sut y bydd yn edrych.
Nid yw'r ddewislen tabbed hon yn defnyddio delweddau , dim ond HTML a CSS 2 a CSS 3. Gellir ei olygu'n hawdd i ychwanegu mwy o dabiau neu newid y testun ynddynt.
Cymorth Porwr
Bydd y ddewislen tab hwn yn gweithio ym mhob prif borwr . Ni fydd archwiliwr Rhyngrwyd yn dangos y corneli crwn, ond fel arall, bydd yn dangos tabiau yn union fel Firefox, Safari, Opera, a Chrome.
02 o 06
Ysgrifennwch eich Rhestr Dewislen
Mae'r holl fwydlenni a thapiau llywio mewn gwirionedd yn wir yn rhestr anghyffredin. Felly, y peth cyntaf yr hoffech ei wneud yw ysgrifennu rhestr ddiangen o dolenni i ble rydych am i'ch gwe-lywio tabbed fynd.
Mae'r tiwtorial hwn yn tybio eich bod chi'n ysgrifennu eich HTML mewn golygydd testun ac eich bod chi'n gwybod ble i osod yr HTML ar gyfer eich dewislen ar eich tudalen we.
Ysgrifennwch eich rhestr anghywir fel hyn:
- dosbarth = "tablist">
- CSS 3
- id = "cyfredol"> Tabiau
- Am
- Bwydlenni
Fe welwch fod y cod yn galw dau beth: class = "tablist" ac id = "current". Mae angen y cyntaf. Os na fyddwch yn gosod y dosbarth tablist ar eich rhestr anghywir, ni fydd y tabiau yn gweithio. Mae'r ail yn ddewisol. Rhowch yr id = "cyfredol" ar ba un bynnag dab yr hoffech ei dynnu sylw ar y dudalen honno. Fel arfer, byddaf yn defnyddio hyn i dynnu sylw at y dudalen yr wyf ar y blaen, ond gallwch ei ddefnyddio i amlygu'r tab pwysicaf. Neu gallwch ei dynnu'n llwyr.
03 o 06
Dechrau Golygu Eich Taflen Arddull
Gallwch ddefnyddio naill ai ddalen arddull allanol neu ddalen arddull fewnol . Mae'r dudalen ddewislen sampl yn defnyddio dalen arddull fewnol yn
y ddogfen.Yn Gyntaf Byddwn yn Arddull yr Hun Hun
Dyma lle rydym ni'n defnyddio tablist y dosbarth. Yn yr HTML. Yn hytrach nag arddull y tag UL, a fyddai'n arddull pob rhestr anghywir ar eich tudalen, dylech arddull y dosbarth UL yn unig. tablist Felly dylai'r cofnod cyntaf yn eich CSS fod:
.tablist {}Rwy'n hoffi gosod y brace gliniog terfynol (}) cyn hynny, felly dwi ddim yn ei anghofio yn ddiweddarach.
Er ein bod yn defnyddio tag rhestr anghyffredin ar gyfer rhestr y rhestr tabiau, ond nid ydym am i unrhyw fwledi na rhifau ymledu. Felly, yr arddull gyntaf y dylech ei ychwanegu yw. rhestr-arddull: dim; Mae hyn yn dweud wrth y porwr, er ei fod yn rhestr, mae'n rhestr heb unrhyw arddulliau a bennwyd ymlaen llaw (fel bwledi neu rifau).
Yna, gallwch osod uchder eich rhestr i gyd-fynd â'r lle rydych chi am ei lenwi. Dewisais 2em ar gyfer fy uchder, gan fod hynny'n dyblu maint y ffont safonol, ac mae'n rhoi tua hanner em uwchben ac islaw testun y tab. uchder: 2em; Ond gallwch osod eich lled i ba faint bynnag yr hoffech ei gael. Bydd tagiau UL yn cymryd 100% o'r lled yn awtomatig, felly oni bai eich bod am ei fod yn llai na'r cynhwysydd presennol, gallwch adael y lled allan.
Yn olaf, os nad oes gan eich dalen feistr arddull raglenni ar gyfer tagiau UL ac OL, byddwch chi am eu rhoi i mewn. Mae hyn yn golygu y dylech droi'r ffiniau, yr ymylon, a'ch padlo ar eich UL. padio: 0; ymyl: 0; ffin: dim; Os ydych chi eisoes wedi ailosod y tag UL, gallwch newid yr ymylon, y padiau, neu'r ffin i rywbeth sy'n cyd-fynd â'ch dyluniad.
Dylai eich dosbarth .tablist olaf edrych fel hyn:
.tablist {rhestr-arddull: dim; uchder: 2em; padio: 0; ymyl: 0; ffin: dim; }04 o 06
Golygu Eitemau Rhestr LI
Unwaith y byddwch wedi styled eich rhestr anhysbys, mae angen i chi arddull y tagiau LI y tu mewn iddo. Fel arall, byddant yn gweithredu fel rhestr safonol a bydd pob un yn symud i'r llinell nesaf heb osod eich tabiau yn gywir.
Yn gyntaf, sefydlwch eich eiddo arddull:
.tablist li {}Yna rydych chi eisiau arnofio eich tabiau fel eu bod yn cyd-fynd ar yr awyren llorweddol. arnofio: chwith;
A pheidiwch ag anghofio ychwanegu rhywfaint o ffin rhwng y tabiau, felly nid ydynt yn uno gyda'i gilydd. ymyl-dde: 0.13em;
Dylai eich arddulliau ef edrych fel hyn:
.tablist li {arnofio: chwith; ymyl-dde: 0.13em; }05 o 06
Gwneud y Tabiau yn edrych fel Tabs gyda CSS 3
I wneud y rhan fwyaf o godi trwm yn y daflen arddull hon, rwy'n targedu'r dolenni o fewn y rhestr anghywir. Mae porwyr yn cydnabod bod dolenni'n gwneud mwy ar dudalen we na tagiau eraill, felly mae'n haws i borwyr hŷn gydymffurfio â phethau fel hofran yn datgan os ydych chi'n eu hatodi i'r tag angor (dolenni). Felly, ysgrifennwch eich eiddo arddull yn gyntaf:
.tablist li a {} .tablist li a: hover {}Oherwydd y dylai'r tabiau hyn weithredu fel tabiau mewn cais, rydych am i holl ardal y tab gael ei glicio, nid yn unig y testun cysylltiedig. I wneud hyn, rhaid ichi newid y tag A o " inline " arferol i mewn i elfen bloc . arddangos: bloc; (Os oes gennych ddiddordeb mewn gwybod mwy am y gwahaniaeth, darllenwch Lefel Bloc yn erbyn Elements Inline .)
Yna, ffordd hawdd o orfodi eich tabiau fod yn gymesur â'i gilydd, ond yn dal i fod yn hyblyg i gyd-fynd â lled y testun yw gwneud y padio cywir a'r chwith yr un fath. Defnyddiais yr eiddo llawlen padio i osod y top a'r gwaelod i 0 a'r dde a chwith i 1em. padio: 0 1em;
Rwyf hefyd wedi dewis tynnu'r ddolen yn tanlinellu, fel bod y tabiau'n edrych yn llai fel dolenni. Ond os gallai eich cynulleidfa gael ei drysu gan hynny, gadewch allan y llinell hon. addurno cyswllt: dim;
Trwy osod ffin denau o gwmpas y tabiau, mae'n eu gwneud yn edrych fel tabiau. Defnyddiais yr eiddo man cychwyn ar y ffin i roi'r ffin o gwmpas y pedair ochr i'r ffin: 0.06em solid # 000; Ac yna defnyddiodd yr eiddo gwaelod y ffin i'w dynnu o'r gwaelod. gwaelod y ffin: 0;
Yna fe wnes i wneud rhai addasiadau i ffont, lliw a lliw cefndir y tabiau. Gosodwch y rhain i'r arddulliau sy'n cyfateb i'ch gwefan. ffont: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; lliw: # 000; cefndir-liw: #ccc;
Dylai'r holl arddulliau uchod fynd yn y detholydd .tablist li a, y rheol fel eu bod yn effeithio ar y tagiau angor yn gyffredinol. Yna i wneud y tabiau'n ymddangos yn fwy cliciadwy, dylech ychwanegu ychydig o reol y wladwriaeth .tablist li a: hover.
Hoffwn newid lliw y testun a'r cefndir i wneud y tab yn pop pan fyddwch chi'n llygoden droso. cefndir: # 3cf; lliw: #fff;
Ac yr wyf yn cynnwys atgoffa arall i'r porwyr yr wyf am i'r ddolen aros heb ei danlinellu. text-decoration: dim; Dull cyffredin arall yw troi'r tanlinelliad yn ôl pan fyddwch chi'n llygoden dros y tab. Os ydych chi eisiau gwneud hynny, ei newid i addurno testun: tanlinellwch;
Ond Ble mae'r CSS 3?
Os ydych chi wedi bod yn talu sylw, mae'n debyg eich bod wedi sylwi nad oes unrhyw arddulliau CSS 3 wedi'u defnyddio yn y daflen arddull. Mae gan hyn y fantais o weithio mewn unrhyw borwr modern, gan gynnwys Internet Explorer. Ond nid yw'n gwneud y tabiau yn edrych fel dim mwy na blychau sgwâr. Trwy ychwanegu radiws ffin ffoniwch CSS 3 (ac mae'n alwadau penodol ar gyfer porwr) gallwch chi wneud yr ymylon wedi'u crwnhoi, i edrych yn fwy fel tabiau ar ffolder manila.
Yr arddulliau y dylech eu hychwanegu at y rheol .tablist yw: -webkit-border-top-right-radius: 0.50em; -bebkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; radiws-top-right-radius: 0.50em; radiws-top-left-radius: 0.50em;
Dyma'r rheolau arddull terfynol a ysgrifennais:
.tablist li a {arddangos: bloc; padio: 0 1em; text-decoration: dim; ffin: 0.06em solid # 000; gwaelod y ffin: 0; ffont: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; lliw: # 000; cefndir-liw: #ccc; / * CSS 3 elfen * / webkit-border-top-right-radius: 0.50em; -bebkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; radiws-top-right-radius: 0.50em; radiws-top-left-radius: 0.50em; } .tablist li a: hover {cefndir: # 3cf; lliw: #fff; text-decoration: dim; }Gyda'r arddulliau hyn, mae gennych ddewislen tabbed sy'n gweithio ym mhob prif borwr ac mae'n edrych fel tabiau print braf yn porwyr CSS 3 sy'n cydymffurfio. Mae'r dudalen nesaf yn rhoi un opsiwn mwy i chi y gallwch ei ddefnyddio i'w wisgo i fyny hyd yn oed yn fwy.
06 o 06
Tynnwch sylw at y Tab Cyfredol
Yn y HTML a grëais, roedd gan yr UL un elfen restr gydag ID. Mae hyn yn eich galluogi i roi arddull wahanol i un LI o'r gweddill. Y sefyllfa fwyaf cyffredin yw gwneud y tab cyfredol yn amlwg mewn rhyw ffordd. Ffordd arall i feddwl am hyn yw eich bod am lwydro'r tabiau nad ydynt yn fyw. Yna byddwch chi'n newid lle mae'r id ar y tudalennau gwahanol.
Rwy'n arddull y tag #current A yn ogystal â'r #current A: hover sta fel bod y ddau ychydig yn wahanol. Gallwch chi newid lliw, lliw cefndir, hyd yn oed uchder, lled a padin yr elfen honno. Gwnewch pa newidiadau bynnag sy'n gwneud synnwyr yn eich dyluniad.
.tablist li # current a {background-color: # 777; lliw: #fff; } .tablist li # current a: hover {background: # 39C; }Ac rydych chi wedi gwneud! Rydych newydd greu dewislen tabbed ar gyfer eich gwefan.