Div негизделген веб-сайттын негиздери: 7 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:44

Бул көрсөтмө сизге divs менен вебсайтты кантип куруунун негиздерин көрсөтөт. Анткени макет үчүн колдонулган таблицалар жаман!: pTo инструктивдүү түшүнүү үчүн, сиз негизги html жана cssти билишиңиз керек. Эгерде сиз бир нерсени түшүнбөсөңүз, сураныч тартынбаңыз. Менин жеке баракчамда да див структурасы колдонулат.

1 -кадам: Негизги файлдарды түзүңүз

Алгач html файлыңызды түзүңүз. Биз ага эң негиздерин кошобуз. CSS файлы азыр бош болот.html файлы азыр камтыйт: тест HTML файлыңызды бир нерсе.html катары сактаңыз. Сиз атын өзүңүз тандай аласыз. Сиздин CSS файлыңыз.css катары сакталууга тийиш. Сиз html файлында айтылгандай эле ат койгонуңузду текшериңиз. Бул учурда "style.css". Биздин браузерде алдын ала каралса, азыр бизде бош бош HTML барагы бар.

2 -кадам: Негизги Түстөр, Шрифттер үчүн Дене Тегин Түзөтүү…

Биз html файлын ошол бойдон калтырабыз жана CSS файлын гана түзөтөбүз. CSS файлыңызга төмөнкү кодду кошуңуз: body {background: #444444; font-family: verdana, arial, sans-serif; түс: #444444; шрифт өлчөмү: 12px; margin: 0px;} Бул коддун жардамы менен биз дене тегинин бардык касиеттерин аныктайбыз. Мазмундун баары дене тегинде болгондуктан, бул орнотуулар бүтүндөй бетке таасир этет. Фон жана шрифт түсү (түсү) кара бозго, шрифт үй-бүлөсү (шрифт-үй-бүлө) верданага коюлган. Эгерде биздин веб -сайтты көрүү үчүн колдонулган компьютерде "verdana" шрифти жок болсо, анда ал биздин сайтты "arial" шрифтинде көрсөтөт. Сиз тизмеге дагы ариптерди кошо аласыз. "Sans-serif"-сиз берген арип жок болгондо колдонула турган жалпы тип. Шрифт өлчөмү (шрифт өлчөмү) 12 пикселге коюлган. Бул абсолюттук баалуулук. Эгерде сиз башка шрифт өлчөмдөрүн (аталыштар, абзацтар, меню пункттары сыяктуу …) түзөткүңүз келсе, "px" ордуна "em" салыштырмалуу бирдигин колдоно аласыз. Ошентип, эгер сиз веб -сайтыңыздын өлчөмүн өзгөрткүңүз келсе, анда дене шрифтинин өлчөмүн гана өзгөртүүгө туура келет. Бул сайт терезенин чокусуна жабышып калышы үчүн жасалат.

3 -кадам: Башы жана мазмуну бар контейнер кошуу

Эми контейнерди кошобуз. Бул биздин веб -сайтыбызды камтыган борборлоштурулган ди. Бул контейнерге биз дагы эки див кошобуз; мазмунун div жана head div. Биздин html файлы эми минтип көрүнөт: мазмунун текшерүү Биз CSS файлына төмөнкү кодду кошобуз: div#container {туурасы: 800px; маржа: 0px авто; фон: #FFFFFF; толтуруу: 0px;} div#мазмун {туурасы: 800px; padding-top: 100px; фон: сары;} div#header {туурасы: 800px; бийиктиги: 100px; фон: көк; позиция: абсолюттук; top: 0px;}. clearfix: кийин {мазмун: "."; дисплей: блок; бийиктик: 0; ачык: экөө тең; көрүнөө: жашыруун;}. clearfix {дисплей: inline-block;}/* IE Macтан жашыруу \*/. clearfix {display: block;} div#контейнери бизде id контейнери бар div теги бар экенин билдирет. Биз кээ бир түстөрдү кошобуз жана "маржа: 0px авто;" Биздин контейнер бетте борборлоштурулганын текшерүү үчүн, биз контентти үстүнкү жана үстүбүзгө "top: 0px" менен абсолюттук маани беришибиз керек, аталыш башка мазмундун үстүндө жайгашканына ынануу үчүн. жагымсыз түстөр. Бул жөн гана түстөрдү окууну жана башка дивизияларды көрүүнү жеңилдетүү үчүн. Биздин навигация жана мазмунун divs (кийинки кадамга кошулган) тегерегиндеги дивиден түшүп калбашы үчүн, бул кызыктай тазаланган код керек болот.

4 -кадам: Навигация жана чыныгы мазмун үчүн Мазмун Бөлүмүндө эки Div түзүңүз

Эми биз контентке дагы эки див кошобуз. Бири навигация үчүн, бири чыныгы мазмун үчүн. Мазмун-тегдин ортосунда; сиз жаңы кодду кошосуз:

Чабыттоо Негизги мазмун Биз навигацияны жана негизги мазмунун көрсөтүү үчүн кээ бир CSS кодун кошобуз; div#nav {туурасы: 200px; сүзүү: солго; фон: кызгылт сары;} div#maincontent {туурасы: 600px; сүзүү: оң; background: pink;} Бул эки див экөө тең сүзүп жүргөнүнө көңүл буруңуз. Эгерде биз мурунку кадамга кошумча clearfix кодун койбогондо, divs тегерегиндеги divдын сыртында калкып жүрмөк. Clearfix методу менен, биз андай болбошун камсыздайбыз.

5 -кадам: Навигациядагы структура үчүн кээ бир кошумча дивдерди кошуңуз

Биз азыр веб -баракчабызда кандайдыр бир структураны түзүү үчүн "nav" дивине дагы кошумча divs кошобуз. Төмөнкү кодду өзгөртүңүз:

• Foo
• Бар

Эми биз "navblock" дивинин кантип көрсөтүлүшүн аныктоо үчүн коддун бир бөлүгүн жарнамалайбыз. Мунун себеби жөнөкөй; id менен divs бир гана жолу көрсөтүлөт (чабыттоо блогу, колонтитул, колонтитул, …). Класстар бар дивдер бир нече жолу көрсөтүлүшү мүмкүн. Бул жерде биз классты колдонобуз. Кийинчерээк башка навигациялык блокту кошкубуз келсе, on.div.navblock {туурасы: 180px; маржа: 5px авто; border: 1px катуу кызыл;} Эгерде биз навигациянын башка блогун кошууну кааласак, анда жаңы… структураны кошушуңуз керек болот. Сиздин кодуңуз эми ушундай болот;

• Foo
• Бар
• Boo
• Far

6 -кадам: Негизги мазмундагы структура үчүн кээ бир кошумча дивдерди кошуңуз

Биз азыр maincontent div үчүн да ушундай кылабыз. Код азыр мындай көрүнөт:

Lorem ipsum dolor sit amet,…

Дагы, биз CSS файлына divдын кантип көрсөтүлүшүн аныктоо үчүн коддун бир бөлүгүн кошобуз: div.contentblock {туурасы: 580px; маржа: 5px авто; border: 1px solid white;} Биз азыр негизги контентке дагы бир "…" кошуу менен башка мазмун блогун кошо алабыз;

Lorem ipsum dolor sit amet,…

Жөнөкөй маалымат, жөн эле жазуу,…

7 -кадам: Сайтты бир аз чиркин кыл

Эми кызыктуу бөлүгү; Түстөр. Эми бизде негизги div структурасы бар болгондуктан, биз түстөрдү бир аз баш аламан/чиркин/өзгөртө алабыз … Жөн гана CSS файлындагы түстөр менен ойноңуз. Бул жерде веб -баракчанын толук html файлы сүрөттө көрсөтүлгөн: тест

• Foo
• Бар
• Boo
• Far

Lorem ipsum dolor sit amet,…

Жөнөкөй маалымат, жөн эле жазуу,…

Header Жана бул толук CSS файлы: body {background: #444444; font-family: verdana, arial, sans-serif; түс: #444444; шрифт өлчөмү: 12px; маржа: 0px;} div#контейнер {туурасы: 800px; маржа: 0px авто; фон: #FFFFFF; толтуруу: 0px;} div#мазмун {туурасы: 800px; padding-top: 100px; фон: #FFFFFF;} div #header {туурасы: 800px; бийиктиги: 100px; фон: #888888; позиция: абсолюттук; top: 0px;} div#nav {туурасы: 200px; сүзүү: солго; фон: #FFFFFF;} div #maincontent {туурасы: 600px; сүзүү: оң; фон: #DDDDDD;} div.navblock {туурасы: 180px; маржа: 5px авто; чек: 1px катуу #DDDDDD;} div.contentblock {туурасы: 580px; маржа: 5px авто; чек: 1px катуу #FFFFFF;}. clearfix: кийин {мазмунун: "."; дисплей: блок; бийиктик: 0; ачык: экөө тең; көрүнөө: жашыруун;}. clearfix {дисплей: inline-block;}/* IE Macтан жашыруу \*/. clearfix {display: block;} Ошентип, азыр сизде негиздер бар. Албетте, түстөр, шрифт өлчөмдөрү, жакшыраак көрүнүүчү навигациялык блок сыяктуу түзөтө турган дагы көп нерселер бар … Бирок бул көрсөтмөлөр div структурасы жөнүндө гана. Эгерде сиз башка тиешелүү көрсөтмөлөрдү көргүңүз келсе, ар дайым сурасаңыз болот. Убакытты таба аламбы, көрөм.