Gerðu lárétta matseðill fyrir vefsvæðinu sjálfur

Lárétt Valmynd hafa nánast allir staður - það er mikilvægur þáttur, eins og það getur með útliti þess og notagildi að laða eða öfugt, fæla burt gesti. Við skulum læra hvernig á að búa til grunn lárétta valmynd: að gera það "beinagrind" HTML til að ná góðum tökum á helstu færni búa. Þú getur örugglega fundið tilbúin matseðill, en miklu betur að læra hvernig á að þróa það sjálfur. Það er nokkuð gaman.

Lærðu að gera matseðill

Við reynum ekki að víkja frá merkingarfræði, sem taka mið af leiðandi tölur í skipulag. Fyrst þú þarft að gera "beinagrind" fyrir valmyndir okkar til HTML, læra undirstöðu kunnáttu til að gera eigin láréttar þeirra valmyndir. Og þá mun það skreyta með stílblöðum. Láta lárétt matseðilinn inniheldur 5 atriði. Fyrsta mál verður vísað á heimasíðuna. Annað lið - "Um okkur". Þriðja - "verðlaun okkar". Fjórða - "Það er gaman." Fimmtu - "Hafðu samband".

HTML-kóði lítur svona út:

Sem veit ekki: ul tag er notað til bullet, þættir hennar byrja með li. Li merki erfa stíll sem eru notaðar til ul.

Ul - blokk þáttur í listanum, það verður strekkt á breidd. Li er einnig blokk.

Svo búa til index.html. Við söfnum kóða okkar. Á þessum tímapunkti, vafrinn birtir lóðrétt frekar en lárétt valmyndinni. En við hjá þér markmið - að gera lárétta matseðill fyrir vefsvæðinu. Fyrir þetta þurfum við CSS.

Hvað er CSS?

Ef þú ert enn að læra þróun staður, það er nauðsynlegt að kynnast hugtakinu Cascading Style Sheets. Í raun eru þetta reglur sniði, vinnslu, sem eru notaðar við mismunandi þætti á síðum á vefsíðu. Ef við lýsa eiginleikum þætti í venjulegu HTML, verður þú að endurtaka þetta nokkrum sinnum, þú færð tvíverknað af sömu stykki af kóða. Hleðslutími á tölvu notandans mun vaxa. Til að koma í veg fyrir þetta, það er CSS. Það nægir að lýsa aðeins einu sinni ákveðna þáttur, og þá einfaldlega til kynna hvar á að nota eiginleika tilteknu stíl. Það er hægt að gera lýsingu á ekki aðeins texta á síðunni sjálfri, en einnig í aðra skrá. Þetta mun leyfa að beita lýsingu á mismunandi stíl á öllum síðum á vefnum. Það er líka þægilegt að breyta sumum síðum, breyta CSS-skrá. Stílblöð leyfa þér að vinna með letur á betri vettvangi en HTML, hjálpa til við að koma í veg fyrir versnun á grafík síður á vefnum.

Notkun Style Sheets fyrir þróun matseðill

CSS-kóða fyrir valmynd:

1. # My_1menu {lista-stíl: none; padding: 6; breidd: 800px; margin: sjálfvirk;}
2. # My_1menu lí {fljóta: vinstri; letur: Skáletrað 18 px Arial;}
3. # My_1menu a {color: # 756; sýna: blokk; hæð: 55px; línu-hæð: 55px; padding: 0px 15px 0px 15px; bakgrunnur: #dfc; text-decoration: none;}
4. # My_1menu a: sveima {color: #foa; background: # 788;}

Nú skulum líta á leiðir lárétt CSS valmynd.

# My_1menu - þannig að það er stíll verkefni fyrir UL- frumefni með id = my_1menu, lista-stíl: Ekkert - Þessi skipun til að fjarlægja merki vinstri af áætluðum atriði.

breidd: 800px - breidd matseðilinn er 800 punktar.

padding: 0 - þetta fjarlægir padding inni.

margin: Auto - vyravnivnie lárétt matseðill á miðju síðunni okkar.

# My_1menu li - framselja stíll Li-þætti.

Hæð: 55px - valmyndinni hæð.

# My_1menu a: sveima - framselja stíl til frumefni og þegar það er framkölluð mús.

Við munum ekki lýsa í smáatriðum hverja línu, sem hver verktaki getur tilgreint breytur hennar hér. Þessi grundvöllur fyrir notkun stíl í valmyndinni á vefnum. Hægt er að gefa það meiri lokið og falleg framkoma, með myndum. Úthluta þáttur en, til dæmis, bakgrunn: url (img1.png) endurtaka-X. Látum það vera bakgrunnur: url (img2.png) endurtaka-x fyrir: sveima.

Notaðu ímyndunaraflið skapandi óskir. Þá byggt á þeirri þekkingu á hvernig á að búa til einfalda valmynd á vefsíðu, getur þú þróa síðuna með eigin einstaka hönnun.