Lóðrétt CSS valmynd: gerðu það sjálfur

Sumir vefstjóra vilja ekki eyða tíma til að þróa frá grunni einföldum þætti sem þegar eru til. Þeir trúa því að það er ekkert vit í að eyða tíma þínum á því sem hefur lengi verið þarna. Reyndar, fyrir þá sem eru að læra HTML og CSS, er mikilvægt að gera margt við sjálfan þig til að skilja starf sitt vel. Þetta á við um valmyndina. Búðu til lóðrétta CSS valmynd. Það mun byggjast eingöngu á HTML og CSS, án þess að nota Javascript og JQuery. Hver valmynd er listi yfir tengla sem leiða til síðna vefsins.

Grunnupplýsingar

Til að búa til óbrotinn lóðrétt CSS valmynd þarftu að fylgja eftirfarandi skrefum:

1. Finnið fyrst lista yfir tengla (með HTML kóða) sem valmyndin mun samanstanda af. Gefðu þeim nöfn, til dæmis, svo:

1. Heim.
2. Saga okkar.
3. Forysta.
4. Þjónusta.
5. Tengiliðir.

2. Síðan munum við stilla tengslin sem við viljum með CSS.

Við munum skrifa HTML kóða, vista það í my_Vmenu.html og sjáðu hvernig það mun líta út í vafranum:

Þetta er grundvöllur (beinagrind) af valmyndinni okkar. # 1, # 2, o.fl. Verður að skipta um tengla. Horfðu á hvernig hlutirnir líta út í vafranum. Þú verður ekki eins og myndin. Nú þurfum við að byrja að lýsa stílum þáttanna til að búa til fullan lóðrétta CSS valmynd.

Lýsing á stílum

Búðu til skrá sem heitir my_Vmenu.css, þar sem þú getur stillt það sem þú vilt bæta útlitið svo mikilvægt atriði á síðunni. Hér að neðan er kóðinn, framkvæmd þeirra mun endurlífga lóðrétta CSS valmyndina. Skrifaðu það í skrána, og þá munum við líta nánar á hvaða helstu línur sem eru taldar hér.

Nákvæm lýsing á notuðum stílum

Íhugaðu nú í smáatriðum okkar CSS lóðrétta valmynd:

Listi-stíl-gerð leyfir að fjarlægja listamerki. Notaðu stillinguna "0" fyrir framlegð og pólun, fjarlægðu aukalega innskotið af listanum. Eins og sjá má af HTML kóða er valmynd okkar listi og CSS setur stíllinn.

Ul # my_Vmenu - almennur stíll af öllu listanum.

Ul # my_Vmenu li a - stíllinn á tengilinn milli li tags.

Ul # my_Vmenu li a: sveima er lýsing á tegund af hlutum í valmyndinni á þeim tíma þegar einn maðurinn bendir á bendilinn.

Ul # my_Vmenu li span - lýsing á textanum (valmyndarheiti).

Mundu að skrárnar mínir_Vmenu.css og my_Vmenu.html verða vistaðar í einum möppu. Hins vegar geta þau verið staðsett í mismunandi möppum, en þá er mikilvægt að tengja slóðina við my_Vmenu.css í skránni my_Vmenu.html. Verið varkár, þar sem nýliðar eiga oft í vandræðum með þetta.

Stíllinn ætti að vera tengdur milli höfuðmerkjanna í html-skránni. Menu_1.png og menu_2.png eru myndir til að birta valmyndaratriðið í venjulegu ástandi og þegar sveima yfir bendilinn.

Það er betra að vista myndirnar í sérstakri möppu fyrir teikningar, nefndu það my_images, en þá lagaðu CSS númerið. Skrifaðu þar sem þessar myndir eru tilgreindar, að þær séu í þessum möppu: url (my_images / menu_1.png) og url (my_images / menu_2.png).

The hvíla af the eignir sem lýst er í CSS kóða er auðvelt að skilja. Þeir settu fram valmyndina okkar. Það er auðvelt að sjá að breidd og hæð stiga er stillt á sama fyrir stig í venjulegu ástandi og þegar þú sveima músinni yfir þau. Leturstærðin er 18 punkta, púði tilgreinir inntak frá mismunandi hliðum nöfn hlutanna. Skjárinn gerir þér kleift að stilla skjáinn með blokkum til að tilgreina breidd og innskot.

Lóðrétt valmynd okkar

Eins og þú sérð er lóðrétt CSS valmyndin auðvelt að búa til. Á grundvelli þekkingar getur þú gert það fallegt og aðlaðandi fyrir gesti á netinu auðlind þín! Notaðu ímyndunaraflið, og þá mun stílhrein valmynd skreyta síðuna þína.