Сайттын өзүң үчүн горизонталдуу меню жасоо

Horizontal меню дээрлик эч кандай сайт бар - бул, тескерисинче, тартуу же келген жок коркутуп, анын пайда болушу жана мүкүнчүлүгү менен мүмкүн болушунча, маанилүү бөлүгү болуп саналат. Кудайдын баштапкы горизонталдуу менюсун түзүү эмнеге үйрөнсөк болорун карап чыгалы: ал түзүүнүн негизги көндүмдөрүн өздөштүрүү үчүн, HTML үчүн "Скелет" болот. Силер, албетте, даяр менюсун таап, ал эми акылдуу аны өнүк кантип билүүгө болот. Бул абдан кызык.

менюсун үйрөнгүлө

Биз макетин көрүнүктүү инсандары карманып семантика, четтөөгө аракет кылам. Биринчиден, сен, HTML биздин менюда үчүн "скелет" кылып, өз горизонталдык Менюларды башкаруу үчүн негизги ыкмаларын үйрөнүү керек. Ошондо ал стилдерди колдонуп, кооздойт. Биздин горизонталдуу меню 5-ден бар болсун. Биринчи пункт башкы өтөсүз. Экинчи тезис: - "Биз жөнүндө". үчүнчү - "Сыйлыктар". Төртүнчүдөн - "Бул круто." Бешинчиден - "Байланыш".

HTML-коду мындай болот:

Ким билген жок: ул теги үчүн колдонулган октон, анын элементтери Өмүр менен башталат. Li Tags сарп үчүн колдонулат стилдерди мурасташат.

Ул - тизме блогу элементи, ал туурасы созулат. Ли ошондой эле бир бөлүгү болуп саналат.

Демек, index.html түзөт. Биз кодун чогултуу. Бул жерде, серепчи эмес, горизонталдуу меню караганда тик көрсөтөт. Бирок биз сен менен максат - сайттын горизонталдуу менюсун үчүн. Бул үчүн биз CSS керек.

CSS деген эмне?

Сиз сайттардын өнүктүрүүгө өздөштүрө элек болсо, ал стилдерди түшүнүгү менен таанышуу зарыл. Негизи, бул интернет-сайттын бетинде ар түрдүү элементтер колдонулат туюнтма, кайра иштетүү боюнча эрежелер бар. Биз стандарттуу HTMLде элементтердин касиеттери сүрөттөп болсо, бул бир нече жолу кайталап болот, сиз кодду бир тыйын кайталанышын аласыз. колдонуучунун компютерин бет груз убакыт өсө берет. Мунун алдын алуу үчүн, бир CSS бар. Бул бир элемент бир гана жолу сүрөттөө үчүн жетиштүү, андан кийин гана кайсы бир стилинин өзгөчөлүктөрүн пайдалануу көрсөтүлөт. Бул барактын бир гана текст эмес, өзү, ошондой эле башка иштин сыпаттамасы алууга болот. Бул сайттын бардык беттери боюнча ар түрдүү стилдеги баяндамасы колдонууга мүмкүндүк берет. Бул CSS-сааты өзгөртүүдөн, кээ бир барактары өзгөртүү үчүн да ыңгайлуу болуп саналат. Style барактар сиз сайттын сүрөттөр беттерин начарлашына качууга жардам берип, HTML караганда жакшыраак боюнча тамгалар менен ага иштөөгө уруксат берүүгө.

меню өнүктүрүү үчүн Style Sheets колдонуу

меню үчүн CSS-коду:

1. # My_1menu {тизме стилиндеги: эч ким; толтургучтар: 6; туурасы: 800px; маржа: унаам;}
2. # My_1menu ли {жадымда: сол; арип: жантык 18px Arial;}
3. # My_1menu бир {түс: # 756; дисплей: бөгөттөөлөр; бийиктиги: 55px; сызык бийиктиги: 55px; толтургучтар: 0px 15px 0px 15px; маалымат: #dfc; текст кооздугу: эч бири;}
4. # My_1menu а: Үстүнө {түс: #foa; маалымат: # 788;}

Эми натыйжасында горизонталдуу CSS менюну карап көрөлү.

# My_1menu - ID менен кыймылдуу элементи үчүн стилдердин тапшырма бар = my_1menu, тизме мүнөзүбүзгө: бири - пландаштырылган заттар калтырган белгилерди жок кылуу үчүн бул буйрук.

туурасы: 800px - биздин меню туурасы 800 пикселдик.

толтургучтар: 0 - бул ички толтургуч жок.

маржа: унаам - биздин беттеги борборунда горизонталдуу менюсуна vyravnivnie.

# My_1menu ли - ыйгаруу стилдери ли-элементтер.

бийиктиги: 55px - меню бийиктиги.

# My_1menu а: келип туруу - элементине образын берүү жана чычкан башчыны да ынандырууга болот.

Биз ар бир иштеп, бул жерде анын параметрлерин көрсөтүүгө болот, ар бир сапты майда-чүйдөсүнө чейин айтып берет. сайтында менюсунда стилдеги пайдалануу үчүн мындай негиз. Сиз сүрөттөрдү колдонуп, ага дагы даяр жана кооз көрүнүшүн бере алат. элементти дайындоо, бирок, мисалы, маалымат: нускага (img1.png) X-кайталап. маалымат жок болсун: нускага (img2.png) бир X-кайталап: тамдын.

сезилсе, чыгармачыл артыкчылыктарын колдонуу. Анан сайтында жөнөкөй менюну түзүү боюнча ошол билимдин негизинде, анын өзүнүн уникалдуу дизайны менен баракты иштеп чыгуу мүмкүн.