Пас, як меню уфуқӣ барои сомонаи худ

Менюи уфуқӣ доранд, қариб ягон сайти - он қисми муҳим аст, зеро он метавонад бо намуди зоҳирӣ ва қобилияти он барои ҷалби ё, баръакс, ваҳширо дур меҳмонон. Биёед мефаҳмем, ки чӣ тавр барои сохтани меню уфуқӣ ибтидоӣ: онро «кузова" ба HTML, ба азхуд намудани малакаҳои асосии ташкили. Шумо албатта метавонед менюи тайёр, вале бисёр ҷалбкунанда ба ёд чӣ тавр ба он аз худ инкишоф. Ин шавковар зебо аст.

Омӯзед ба меню

Мо кӯшиш ба ботил моил масоз аз semantics, ки риоя ба нишондиҳандаҳои пешбари тарҳбандии нест. Аввалан шумо бояд ба як «кузова" барои менюҳо мо HTML, омӯхтани малакаҳои асосии ба менюҳо уфуқӣ худ. Ва он гоҳ он оро бо истифода аз сабку услубҳо. Бигзор меню уфуқӣ мо дорои 5 адад. Дар аввал адад мешавад ба саҳифаи хонагии равона. Дар банди дуюм - «Дар бораи мо». Сеюм - «мукофотҳои мо». Чаҳорум - «Ин шавқовар аст." Панҷум - "Иртибот бо мо».

HTML-коди монанди ин:

Кӣ намедонад,: теги ул аст, ки барои истифода тир, унсурҳои он бо Ли оғоз меёбад. барчаспҳои Li аз сабкҳои, ки ба ул бурда мерос гузошт.

Ул - унсури пакети рӯйхат, он гоҳ ба паҳнои дароз карда буд. Li низ як блок.

Пас, таъсиси як index.html. Мо Рамзи мо ҷамъ. Дар ин бора, браузери намоиши амудӣ аз менюи уфуқӣ. Лекин мо бо шумо мақсад - ба менюи уфуқӣ барои сомона. Барои ин ба мо лозим аст CSS.

CSS чист?

Агар шумо ҳанӯз ба азхуд рушди сайтҳо, зарур барои шиносоӣ бо мафҳуми сабку услубҳо шинос аст. Дар асл, ин ќоидањои форматонӣ, коркард, ки ба унсурҳои гуногун дар саҳифаҳои як веб-сайти истифода бурда мешавад. Барои тасвир намудани хосиятҳои элементҳои дар HTML стандарти, шумо бояд ба ин чанд маротиба такрор, шумо такрор дона ҳамин рамзи даст. Саҳифаи вақти пурборкуниро дар компютери истифодабаранда зиёд мегардад. Барои роҳ надодан ба ин аст, CSS нест. Ин кофист, тасвир танҳо як маротиба дар як унсури муайян, ва он гоҳ танҳо нишон, ки барои истифодаи хосиятҳои як сабки махсус. Ин мумкин аст, ки ба тавсифи на танҳо матни саҳифаи худ, балки ҳамчунин дар файли дигар. Ин имкон медиҳад, ки барои ба кор бурдани тавсифи сабкҳои гуногуни оид ба ҳамаи саҳифаҳои сомона. Ин аст, низ қулай тағйир баъзе аз саҳифаҳо қаблан, тағйир CSS-файл. варақаҳои Style ба шумо имконияти ба кор бо ҳуруфҳои дар сатҳи беҳтар аз HTML, кӯмак ба канорагирӣ бад гардонидани саҳифаҳои графика сомона.

Бо истифода аз ҷадвалҳои сабку услубҳо барои рушди меню

CSS-код меню:

1. # My_1menu {рӯйхати-сабки: ҳеҷ; padding: 6; Бари: 800px; маржа: худкор;}
2. # My_1menu Li {шино: чап; ҳуруф Arial 18px italic;}
3. # My_1menu а {ранги: # 756; Намоиши ҳифз шудаанд; баландии: 55px; хати-баландии: 55px; padding: 0px 15px 0px 15px; замина: #dfc; Матни-ороиши: ҳеҷ;}
4. # My_1menu ба: Hover {ранги: #foa; замина: # 788;}

Акнун биёед дар натиҷаи менюи CSS уфуқӣ назар.

# My_1menu - то аз супориши сабки барои унсури UL- бо Шиносаи = my_1menu, рӯйхати-сабки нест: надорад - ин фармон ба хориҷ баҳои гузошта аз тарафи адад нақша гирифта шудааст.

Бари: 800px - паҳнои меню мо 800 пиксел аст.

padding: 0 - ин дур padding дохили.

маржа: худкор - vyravnivnie меню уфуқӣ дар маркази саҳифаи мо.

# My_1menu Li - таъин кардани сабкҳои Li-элементҳои.

баландии: 55px - баландии меню.

# My_1menu а: Hover - сабкҳои ба унсури таъин кардан ва пахши мушро ҳангоми ду ба он барангехта аст.

Мо на ба таври муфассал тасвир ҳар сатр, ва ҳар як таҳиякунанда метавонед параметрҳои он ҷо муайян мекунад. Ин дар асоси барои истифодаи сабкҳои дар меню дар сомонаи. Шумо метавонед он намуди тайёр бештар ва зебо истифода тасвирҳо дод. Таъин унсури, вале, барои мисол, заминаи: URL (img1.png) такрор х. Бигзор шавад замина: URL (img2.png) такрор х барои: Hover.

Истифода баред, хаёлот, афзалиятҳои эҷодӣ кунед. Он гоҳ дар асоси, ки ба дониш дар бораи чӣ гуна эҷод кардани менюи оддӣ дар сомона, Шумо метавонед саҳифаро бо тарҳи нодири худ инкишоф.