ЦСС лаиоут захтева да размишљате о распореду вашег веб сајта у целини, а затим узмите комаде и ставите их заједно. Сазнајте како да направите једноставан распоред 3 колоне са ЦСС.
01 од 09
Обришите свој распоред
Можете да нацртате свој изглед на папиру или графичком програму . Ако већ имате жичан оквир или још опсежнији дизајн, поједноставите га у основним кутијама које чине локацију. Овај дизајн који прати овај чланак има три стуба у главној области садржаја, као и заглавље и подножје. Ако пажљиво погледате, можете видети да три колоне нису једнаке по ширини.
Након што сте уклонили свој изглед, можете почети размишљати о димензијама. Овај дизајн модела ће имати следеће основне димензије:
- Не више од 900 пиксела
- 20цм олука са леве стране
- 10 пиксела између ступаца и редова
- Столови који су 250пк, 300пк и 300пк широки
- Горњи ред је висок 150пк
- Доњи ред је 100пк висок
02 од 09
Напишите основни ХТМЛ / ЦСС и креирајте елемент контејнера
С обзиром да ће ова страница бити валидан ХТМЛ документ, почните са празним ХТМЛ контејнером
<хтмл кмлнс = "хттп : //ввв.в3.орг/1999/кхтмл "> <хеад> <мета хттп-екуив =" Цонтент-Типе "цонтент =" тект / хтмл; цхарсет = утф-8 "/> <титле> Унтитлед Доцумент < титле> хеад> <боди> боди> хтмл>Додајте у основне стилове ЦСС-а на нулту страну маргина, граница и паддинг-а . Иако постоје други стандардни ЦСС стилови за нове документе, ови стилови су минимум који вам је потребан да бисте добили чисту поставку. Додајте их у главу вашег документа:
<стиле типе = "тект / цсс"> хтмл, боди {маргин: 0пк; паддинг: 0пк; бордер: 0пк; } стиле>Да бисте започели изградњу изгледа, ставите елемент за контејнер. Понекад се дешава да касније можете да се ослободите контејнера, али за већину поставки фиксне ширине, имајући елемент елемента за контејнере олакшава се управљање различитим Веб прегледницима. Дакле, у телу стави ово:
<див ид = "контејнер"> див>И у ЦСС стилу ставите:
#контејнер { }03 од 09
Стил контејнера
Контејнер дефинише колико ће бити широк садржај садржаја веб странице, као и све маргине око споља и унутрашњост. За овај документ, контејнер је ширине 870пк са 20 пиксела олука са леве стране. Жлеб је постављен са стилом маргине, али заливање на контејнеру се нула како би се спријечило да било који елементи буду широки као контејнер.
#цонтаинер {ширина: 870пк; маргин: 0 0 0 20пк; / * горњи десни доњи леви * / паддинг: 0; }Ако сада сачувате свој документ, биће тешко видети контејнер јер нема ништа у њему. Ако додате текст места, можете више видјети елемент контејнера.
04 од 09
Користите ознаку Хеадлине за заглавље
Како одлучите да обликујете ред наслова пуно зависи од онога што је у њему. Ако ће заглављени ред имати графичку ознаку и наслов, онда употреба насловне ознаке (<х1>) има смисла од употребе <див>. Наслов можете насловити на исти начин на који обликујете див и избјегавате вањске ознаке.
ХТМЛ за заглавље се налази на врху контејнера и изгледа овако:
<х1> Ми Хеадер Ров х1>Затим, да бисте подесили стилове на њему, на дну је додата црвена граница, како бисте могли да видите где се завршава, маргине и паддинг су нула, ширина је подешена на 100% и висина до 150пк:
#цонтаинер х1 {маргин: 0; паддинг: 0; ширина: 100%; висина: 150пк; флоат: лефт; бордер-боттом: # ц00 солид 3пк; }Не заборавите да пливате овај елемент са флоат: лево; имовина. Кључ за писање ЦСС-а је плутање свега - чак и ствари које су исте ширине као и контејнер. На тај начин увек знате где ће се елементи налазити на страници.
ЦСС потомци селектора примењују стилове само на Х1 елементе који су унутар елемента #цонтаинер.
05 од 09
Да бисте добили три колоне, почните градити две колоне
Кад изградите табелу са ЦСС-ом, требате поделити свој распоред у групе од два. Дакле, за овај распоред са три колоне, средња и десна колона и груписани и постављени поред левог ступца у распореду са две колоне где је лијева колона широка 250пк, а десна колона је 610пк широка (300 свака за двије колоне , плус 10пк за олуку између њих).
ХТМЛ изгледа овако:
<див ид = "цол1"> <п> Ово је екстравагантни резултат. Велики избор је на располагању за најмању могућу цену, а за сваки од њих долазите на располагању. У увјерењу у волуптате куис ноструд екерцитате еу фугиат нулла париатур. П> див> <див ид = "цол2оутер"> <п> Ако не будете спремни, молимо вас да се пријавите на е-маил адресу. Увек долази и магна алкуа. Велико је важно да се то не уклапа. П> див>Текст који се налази у колонама чини их видљивијим током тестирања. ЦСС изгледа овако:
#цонтаинер # цол1 {ширина: 250пк; флоат: лефт; } #цонтаинер # цол2оутер {ширина: 610пк; флоат: десно; маржа: 0; паддинг: 0; }Колона са леве стране је лебдела лево, док је друга лебдела удесно. Због укупне ширине оба ступца је 860пк, између њих је 10пк жлеб.
06 од 09
Додајте две колоне изнад шире друге колоне
Да бисте креирали три колоне, додајте два дивља унутар шире друге колоне, баш као што сте додали 2 дивс унутар колоне контејнера у последњем кораку. ХТМЛ изгледа овако:
<див ид = "цол2оутер"> <див ид = "цол2мид"> <п> Ако желите да будете ограничени, седите до еиусмодне временске прилике. Увек долази и магна алкуа. П> див> <див ид = "цол2сиде"> <п> Намеравамо вам да отворите тематски програм који вам не одговара. Уллам цорпорис сусципит лабориосам, магнам аликуам куаерат волуптатем. П> див> див> п> <п алигн = "јустифи"> <ЦСС изгледа овако:
# цол2оутер # цол2мид {ширина: 300пк; флоат: лефт; } # цол2оутер # цол2сиде {ширина: 300пк; флоат: десно; }С обзиром да су ова два 300пк широка поља унутар ширине 610пк, поново ће бити између њих 10пк.
07 од 09
Додај у подножје
Сада када је остатак странице стиснут, можете га додати у подножје. Користите последњи див са ИД-ом "фоотер" и додајте садржај тако да га можете видети. Такође можете додати границу на врху, тако да ћете знати гдје почиње.
ХТМЛ:
<див ид = "фоотер"> <п> Цопиригхт © 2017 п> див>ЦСС:
#цонтаинер #фоотер {флоат: лефт; ширина: 870пк; бордер-топ: # ц00 солид 3пк; }08 од 09
Додајте у своје личне стилове и садржај
Сада када сте завршили изглед, можете почети да додате своје личне стилове и садржај. Запамтите да су границе на заглављу и подножју додате како би се приказали дијелови поставки, а не посебно за дизајн.
09 од 09
Завршни ХТМЛ / ЦСС
Овде је цео документ, ХТМЛ и ЦСС:
<хтмл кмлнс = "хттп : //ввв.в3.орг/1999/кхтмл "> <хеад> <мета хттп-екуив =" Цонтент-Типе "цонтент =" тект / хтмл; цхарсет = утф-8 "/> <титле> Унтитлед Доцумент < титле> <стиле типе = "тект / цсс"> хтмл, боди {маргин: 0пк; паддинг: 0пк; бордер: 0пк; } #цонтаинер {ширина: 870пк; маргин: 0 0 0 20пк; / * горњи десни доњи леви * / паддинг: 0; бацкгроунд-цолор: #ффф; } #цонтаинер х1 {маргин: 0; паддинг: 0; ширина: 100%; висина: 150пк; флоат: лефт; бордер-боттом: # ц00 солид 3пк; } #цонтаинер # цол1 {ширина: 250пк; флоат: лефт; } #цонтаинер # цол2оутер {ширина: 610пк; флоат: десно; маржа: 0; паддинг: 0; } # цол2оутер # цол2мид {ширина: 300пк; флоат: лефт; } # цол2оутер # цол2сиде {ширина: 300пк; флоат: десно; } #цонтаинер #фоотер {флоат: лефт; ширина: 870пк; бордер-топ: # ц00 солид 3пк; } див> хеад> <боди> <див ид = "цонтаинер"> <х1> Ми Хеадер Ров х1> <див ид = "цол1"> <п> Ут аликуип ек еа цоммодо цонсекуат. п> див> <див ид = "цол2сиде"> <див ид = "цол2мид"> <п> П> див> див> <див ид = "фоотер"> <п> Цопиригхт © 2008 п> див> див> боди> хтмл>