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