Ово је туториал како користити ЦСС за израду једноставних три колоне формат.
Формат се састоји од заглавља, главни садржај колоне, Сидебар, а Фусноте. Згодан основни формат, и није уопште тешко створити са ЦСС једном кад знате како се носити са неизбјежним Интернет Експлорер бугова.


Стрепи први ми направити основну структуру хтмл

 > <div id = "header" > <div id = "sub-header" > </div> </div> <div id = "nevigation" > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> </div> <div id = "content" > <div id = "sub-content" > <div id = "column1" > <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. <див ид = "паге"> <див ид = "хеадер"> <див ид = "суб-хеадер"> </ див> </ див> <див ид = "невигатион"> <ул> <ли> <а хреф = "#"> Почетна страница </ а> </ ли> <ли> <а хреф = "#"> О нама </ а> </ ли> <ли> <а хреф = "#"> Услуге </ а> </ ли> <ли> <а хреф = "#"> Производи </ а> </ ли> <ли> <а хреф = "#"> Мапа страница </ а> </ ли> <ли> < један хреф = "#"> Контакт </ а> </ ли> </ ул> </ див> <див ид = "цонтент"> <див ид = "суб-цонтент"> <див ид = "цолумн1" > <х2> О нама </ Х2> <п> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите.  Дуи ут виверра НЕЦ рисус. У једном некуе еу тортор лациниа рхонцус.  У интердум плацерат пурус.  Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите. Суспендиссе потенти.Лорем ипсум бол сједити амет, </ п> <п> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите.  Дуи ут виверра НЕЦ рисус. У једном некуе еу тортор лациниа рхонцус.  У интердум плацерат пурус.  > Readmore </a> </p> </div> <div id = "column2" > <h2> Services </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите. Суспендиссе потенти.Лорем ипсум бол сједити амет, <а хреф = "#"> реадме </ а> </ п> </ див> <див ид = "цолумн2"> <Х2 > Услуге </ Х2> <п> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите.  Дуи ут виверра НЕЦ рисус. У једном некуе еу тортор лациниа рхонцус.  У интердум плацерат пурус.  Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите. Суспендиссе потенти.Лорем ипсум бол сједити амет, </ п> <п> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите.  Дуи ут виверра НЕЦ рисус. У једном некуе еу тортор лациниа рхонцус.  У интердум плацерат пурус.  > Readmore </a> </p> </div> <div id = "column3" > <h2> Contact Detail </h2> <p> Lorem ipsum dolor sit amet, consectetur                    adipiscing elit. Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите. Суспендиссе потенти.Лорем ипсум бол сједити амет, <а хреф = "#"> реадме </ а> </ п> </ див> <див ид = "цолумн3"> <Х2 > Контакт детаљи </ Х2> <п> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите.  Дуи ут виверра НЕЦ рисус. У једном некуе еу тортор лациниа рхонцус.  У интердум плацерат пурус.  Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите. Суспендиссе потенти.Лорем ипсум бол сједити амет, </ п> <п> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите.  Дуи ут виверра НЕЦ рисус. У једном некуе еу тортор лациниа рхонцус.  У интердум плацерат пурус.  > Readmore </a> </p> </div> </div> </div> <div id = "bottom" > <div id = "sub-bottom" > <span> Copyright &copy; Developer's Paradise                    Designed By Developer's Paradise </span> </div> </div> </div> Лорем ипсум бол сједити амет, цонсецтетур адиписцинг елите. Суспендиссе потенти.Лорем ипсум бол сједити амет, <а хреф = "#"> реадме </ а> </ п> </ див> </ див> </ див> <див ид = "дно"> <див ид = "суб-боттом"> <спан> Цопыригхт © Девелопер'с Парадисе Десигнед Бы Девелопер'с Парадисе </ спан> </ див> </ див> </ див> 

Други корак: ми направити основну структуру цсс

 ; padding : 0 ; } h1,h2,h3,h4 { font : 100 % "Georgia" , Times New Roman, Times, serif ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px } h1 { font-size : 400 %; text-align :center ; padding : 35px 0 0 0 ; } h2 { font-size : 150 %; } h3 { font-size : 137 %; } h4 { font-size : 120 %;text-align :center ; color : # 848484 ; } ul,ol,li { list-style-type :none ; } a { text-decoration :none ; color : #00CCFF } a :hover { text-decoration :underline ; } p { color : #fff ; font-size : 12px ; font-family : "Georgia" , Times New Roman, Times, serif ; color : #fff ; padding : 0 0 10px 0 ; line-height : 22px ; } * (Маргин: 0; паддинг: 0;) Х1, Х2, Х3, Х4 (фонт: 100% "Георгиа", Тимес Неу Роман, Тимес, сериф; цолор: # ффф; текст-трансформација: велико; слово-размак: 2пкс) Х1 (фонт-сизе: 400%; текст-алигн: центер; паддинг: 35пкс 0 0 0;) Х2 (фонт-сизе: 150%;) Х3 (фонт-сизе: 137%;) Х4 (фонт-сизе : 120 %;text-align :center ; color : # 848484 ; } ul,ol,li { list-style-type :none ; } a { text-decoration :none ; color : #00CCFF } a :hover { text- децоратион: Ундерлине;) п (цолор: # ффф; фонт-сизе: 12пкс; фонт-фамилы: "Георгиа", Тимес Неу Роман, Тимес, сериф; цолор: # ффф; паддинг: 0 0 10пкс 0; лине-хеигхт: 22пкс;) 
  % normal "Georgia" , Times New Roman, Times, serif ; background : # 191919 ; } боды (фонт: 100% нормалног "Георгиа", Тимес Неу Роман, Тимес, сериф; бацкгроунд: # 191919;) 
 background : # 323232 ; width : 971px ; margin : 0 auto ; height : 100 %; border-left : 1px solid # 353535 ; border-right : 1px solid # 353535 ; padding : 12px 0 12px 0 ; } # Паге (бацкгроунд: # 323232; уидтх: 971пкс; маргин: 0 ауто; хеигхт: 100%; бордер-лефт: 1пкс солид # 353535; бордер-ригхт: 1пкс солид # 353535; паддинг: 12пкс 0 12пкс 0;) 
  margin : 0px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #sub-header { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; height : 150px ; } # Хеадер (маргин: 0пкс ауто 0 ауто; уидтх: 943пкс; бацкгроунд: # 222; бордер: 1пкс солид # 424242;) # суб-хеадер (маргин: 1пкс; паддинг: 1пкс; бацкгроунд: # 333; оверфлоу: скривени; висина : 150пкс;) 
 margin : 5px auto 0 auto ; width : 943px ; background : # 222 ; border : 1px solid # 424242 ; } #nevigation ul { margin : 1px ; padding : 0px ; background : # 333 ; overflow :hidden ; } #nevigation li { display : inline ; /*ie*/ } #nevigation li a { float :left ; margin : 0 ; padding : 7px 10px ; display : block ; color : #fff ; text-transform :uppercase ; letter-spacing : 2px ; } #nevigation li a :hover { background : # 424242 ; text-decoration :none ; color : #00CCFF ; } # Невигатион (маргин: 5пкс ауто 0 ауто; уидтх: 943пкс; бацкгроунд: # 222; бордер: 1пкс солид # 424242;) невигатион # ул (маргин: 1пкс; паддинг: 0пкс; бацкгроунд: # 333; оверфлоу: скривени;) # невигатион ли (дисплаы: инлине; / * ие * /) # невигатион ли (један пловак: лево; маргин: 0; паддинг: 7пкс 10пкс; дисплаы: блоцк; цолор: # ффф; текст-трансформација: велико; слово-размак: 2пкс;) # невигатион ли а: ховер (бацкгроунд: # 424242; текст-децоратион: ноне; цолор: # 00ЦЦФФ;) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-content { margin : 1px ; padding : 1px ; background : # 333 ; overflow :hidden ; } # Цонтент (уидтх: 943пкс; маргин: 0 ауто ауто 5пкс; бацкгроунд: # 222; бордер: 1пкс солид # 424242;) # суб-цонтент (маргин: 1пкс; паддинг: 1пкс; бацкгроунд: # 333; оверфлоу: скривени;) 
 width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column2 { width : 302px ; background : # 424242 ; margin : 0 1px 0 0 ; padding : 5px ; float :left ; } #column3 { width : 303px ; background : # 424242 ; margin : 0 ; padding : 5px ; float :left ; } # Цолумн1 (уидтх: 302пкс; бацкгроунд: # 424242; маргин: 0 1пкс 0 0; паддинг: 5пкс; пловак: лево;) # цолумн2 (уидтх: 302пкс; бацкгроунд: # 424242; маргин: 0 1пкс 0 0; паддинг: 5пкс ; пловак: лево;) # цолумн3 (уидтх: 303пкс; бацкгроунд: # 424242; маргин: 0; паддинг: 5пкс; пловак: лево;) 
 width : 943px ; margin : 5px auto 0 auto ; background : # 222 ; border : 1px solid # 424242 ; } #sub-bottom { margin : 1px ; padding : 20px 0 0 0px ; background : # 333 ; overflow :hidden ; height : 50px ; color : #fff ; text-align :center ; text-transform :uppercase ; letter-spacing : 2px ; } # Дно (уидтх: 943пкс; маргин: 0 ауто ауто 5пкс; бацкгроунд: # 222; бордер: 1пкс солид # 424242;) # суб (маргин-боттом: 1пкс; паддинг: 20пкс 0 0 0пкс; бацкгроунд: # 333; оверфлоу: скривени; хеигхт: 50пкс; цолор: # ффф; текст-алигн: центер; текст-трансформација: велико; слово-размак: 2пкс;) 

Коначно смо створили три колоне ЦСС лаыоут. Прикажи Примери и Доунлоад тхис филе.

Ја бих био захвалан, ако би могли узети други да помогне промовисати мој блог и поделите ову везу са било којом од Ваших фаворизирани умрежавање интерфејса користећи линк испод ...

Подастрт испод: цсс, Туториали бы админ