Faru horizontala menuo por la retejo mem

Horizontala menuo havas preskaŭ neniun lokon - ĝi estas grava parto, ĉar ĝi povas kun lia aspekto kaj uzebleco por altiri aŭ, inverse, timigi for vizitantoj. Ni lernos kiel krei elementa horizontala menuo: fari ĝin "skeleton" al HTML, por majstri la bazaj kapabloj krei. Vi povas certe trovos preta menuo, sed multe pli bela por lerni kiel por evoluigi ĝin mem. Ĝi estas sufiĉe amuza.

Lernu fari menuo

Ni provos ne devias de la semantiko, kiu aliĝas al la gvidaj figuroj de la aranĝo. Unue vi devas fari "skeleton" por niaj menuoj al HTML, lerni bazajn kapablojn por fari siajn proprajn horizontala menuoj. Kaj tiam ĝi ornamas, uzante stilo littukojn. Tial nia horizontala menuo enhavas 5 erojn. La unua elemento estos redirigido al la hejmpaĝo. La dua punkto - "Pri ni". La tria - "Nia premioj". Kvara - "Estas amuze." Kvina - "Kontaktu nin".

HTML-kodo aspektas jene:

Kiu ne konas: ul etikedo estas uzata por la kuglo, ĝiaj eroj komenci la span. Li etikedoj heredas la stiloj kiuj aplikas al la ul.

Ul - bloko elemento de la listo, ĝi estos etenditaj al la larĝo. Li ankaŭ estas bloko.

Do, krei index.html. Ni kolektas niajn kodo. Je ĉi tiu punkto, la retumilo montras vertikala anstataŭ horizontala menuo. Sed kun vi celo - fari horizontala menuo por la retejo. Pro tio ni bezonas CSS.

Kio estas CSS?

Se vi havas ankoraŭ majstri la disvolviĝo de lokoj, necesas konatiĝi kun la koncepto de Laŭtemaj Style Sheets. Fakte, ĉi tiuj estas la reguloj por formatado, prilaborado, kiuj estas aplikita al malsamaj elementoj sur la paĝoj de ttt-ejo. Se ni priskribi la ecojn de la elementoj en normo HTML, vi devas ripeti tiun plurfoje, vi ricevas duobligo de la sama pecojn de kodo. paĝo ŝarĝo tempo sur la uzanto komputilo kreskos. Por eviti ĉi tion, estas CSS. Sufiĉas por priskribi nur unufoje certa elemento, kaj tiam simple indiki kie uzi la propraĵoj de aparta stilo. Eblas fari la priskribo de ne nur la teksto de la paĝo mem, sed ankaŭ en alian dosieron. Ĉi tio permesos apliki la priskribo de la malsamaj stiloj en ĉiuj paĝoj de la retejo. Ĝi estas ankaŭ oportuna modifi iuj paĝoj, modifi la CSS-dosiero. Stilo littukojn permesas labori kun tiparojn sur bona nivelo ol la HTML, helpante eviti plimalboniĝo grafikaĵojn paĝoj de la retejo.

Uzante Style Sheets por menuo disvolviĝo

CSS-kodo por la menuo:

1. # My_1menu {listo-stilo: nenio; Plenigado: 6; larĝo: 800px; rando: auto;}
2. # My_1menu li {float: lasis; tiparo: kursiva 18px Arial;}
3. # My_1menu a {koloro: # 756; display: block; alteco: 55px; linio-alteco: 55px; Plenigado: 0px 15px 0px 15px; fono: #dfc; teksto-dekoracio: neniu;}
4. # My_1menu al: ŝvebado {koloro: #foa; fono: # 788;}

Nun ni rigardu la rezultanta horizontala CSS menuo.

# My_1menu - tiel ekzistas stilo asigno por UL- elemento kun id = my_1menu, listo-stilo: neniu - tiun komandon por forigi la markojn lasita de la planita erojn.

larĝo: 800px - la larĝo de nia menuo estas 800 pikseloj.

Plenigado: 0 - tio forigas la kompletigo ene.

rando: auto - vyravnivnie horizontala menuo ĉe la centro de nia paĝo.

# My_1menu span - asignanta stiloj li-elementoj.

alteco: 55px - menuo alteco.

# My_1menu al: Hover - atribui stilojn al elemento kaj kiam estas induktita muso.

Ni ne priskribas detale ĉiu linio, kiel ĉiu ellaboranto povas specifi lian parametroj tie. Tiu bazo por la uzo de stiloj en la menuo sur la retejo. Vi povas doni al ĝi pli finita kaj bela aspekto, uzante bildoj. Asigni elemento sed, ekzemple, fono: url (img1.png) ripeti-x. Estu fono: url (img2.png) ripeti-x por: ŝvebado.

Uzu vian imagon, krea preferojn. Poste surbaze de tiu scio pri kiel krei simplan menuon en la retejo, vi povas evoluigi paĝo kun lia propra unika dezajno.