Прості 2 колонки CSS верстка, CSS, дизайн, CSS макет |

Прості 2 колонки CSS макета

Цей навчальний посібник по використанню CSS для створення простих дві колонки макета.

Схема складається із заголовка, а головне зміст колонки, а на бічній панелі, а колонтитулів. Достатньо базового макету, а не на все важче створювати з CSS раз ви знаєте, як боротися з неминучим Internet Explorer помилок.

1. Базова структура

Перш за все, ми створюємо основні структури HTML:


  > <div ID = "page"> 
  > </div> <div ID = "header"> </ DIV> 
  > </div> <div ID = "sidebar"> </ DIV> 
  > </div> <div ID = "main"> </ DIV> 
  > </div> <div ID = "footer"> </ DIV> 
  </ DIV> 


  Після цього, ми ставимо кілька змісту в різних розділах: 

  > <div ID = "page"> 
  > <div ID = "header"> 
  <h1> Назва компанії </ h1> 
  <h4> Введіть свій лозунг </ h4> 
  </ DIV> 

  > <div ID = "sidebar"> 
  <h2> Навігація </ h2> 
  <ul> 
  > Home </a> </li> <li> <a HREF = "#"> Головна сторінка </ A> </ LI> 
  > About us </a> </li> <li> <a HREF = "#"> Про нас </ A> </ LI> 
  > Srevices </a> </li> <li> <a HREF = "#"> Srevices </ A> </ LI> 
  > Contact </a> </li> <li> <a HREF = "#"> Зворотній зв'язок </ A> </ LI> 
  > Sitemap </a> </li> <li> <a HREF = "#"> Карта сайту </ A> </ LI> 
  </ UL> 
  </ DIV> 

  > <div ID = "main"> 
  <h2> Зміст </ h2> 
  <p> Lorem Ipsum Dolor сидіти Amet, consectetuer dipiscing 
  Elit.  Cum Дісе народжувала Монтес, nascetur ridiculus муз.  1 січня  
  2002 Lorem Ipsum Dolor сидіти Amet, consectetuer adipiscing Еліт.  Cum Дісе  
  народжувала Монтес, nascetur ridiculus муз.  1 січня 2002 р. </ P> 
  </ DIV> 
  > <div ID = "footer"> 
  <h2> Footer </ h2> 
  </ DIV> 
  </ DIV>

2. CSS кодекс

Зараз ми створюємо CSS код:


  / * Стиль дві колонки макет * 
  ; padding : 0 ; } * (Різниці: 0; оббивка: 0;) 
  тіло 
  ( 
  розмір шрифту: 100%; 
  накреслення шрифту: нормальний; 
  ; сімейство шрифтів: Arial, Helvetica, без-Serif; 
  ) 
  * HTML, тіло 
  ( 
  Висота: 100%; 
  ; хв Висота: 100% / * Firefox * /; 
  ) 


  HTML, # сторінку 
  (  
  маржі: 0; 
  оббивка: 0; 
  Висота: 100%; 
  ) 
  # Сторінку 
  ( 
  ; Маржі: 0 авто; 
  Оббивка: 0; 
  Ширина: 1009px; 
  Висота: 100%; 
  ) 


  ; } A (текст-оздоблення: немає;) 

   text-decoration :underline } A: наведіть (текстопроцессорних обробки: Underline) 

  ; padding : 0 ; } вулиця, OL, LI (різниці: 0; оббивка: 0;) 


  h1, h2, h3, h4, h5, h6 
  ( 
  маржі: 0; 
  20px ; оббивка: 10px 0 0 20px; 
  ) 

  ; } h1 (розмір шрифту: 28px;) 
  ; } h2 (розмір шрифту: 24px;) 
  ; } H3 (розмір шрифту: 18px;) 
  ; } h4 (розмір шрифту: 12px;) 
  ; } h5 (розмір шрифту: 10px;) 

  ; P (різниці: 0; 
  лінійний ріст: 18px; 
  10px 20px ; оббивка: 0 0 10px 20px; 
  розмір шрифту: 12px;  
  ) 

  # Сторінку 
  ( 
  ; Маржі: 0 авто; 
  Оббивка: 0; 
  Ширина: 1009px; 
  Висота: 100%; 
  ) 

  # Заголовок 
  ( 
  маржі: 0; 
  оббивка: 0; 
  Ширина: 100%; 
  Висота: 151px; 
  Дисплей: Блок; 
  ; колір фону: # eeeeee; 
  ) 

  # Панелі 
  ( 
  поплавковий: ліворуч; 
  маржі: 0; 
  оббивка: 0; 
  ; Дисплей: Inline / * Internet Explorer * /; 
  ширина: 200px; 
  Висота: 100%; 
  ; колір фону: # cccccc; 
  ) 

  # Бічній вулиці 
  ; } (Список-стиль типу: відсутні;) 

  display : inline /*internet explore*/ ; } # Бічній вулиці LI (відображення: Inline / * Інтернет вивчити * /;) 

  # Бічній вулиці чи один 
  (  
  ; оббивка: 3px 4px; 
  Дисплей: Блок; 
  16px ; маржі: 0px 0 0 16px; 
  Текст-оздоблювальні: немає; 
  COLOR: # 0000E8 
  ) 

  # Бічній вулиці LI A: наведіть 
  : #CC0000 } (COLOR: # CC0000)  

  # Основні 
  ( 
  маржі: 0; 
  оббивка: 0; 
  поплавковий: ліворуч; 
  Дисплей: Блок; 
  ширина: 809px; 
  Висота: 100%; 
  Довідкова інформація: # dddddd 
  ) 
  # Колонтитул 
  ( 
  маржі: 0; 
  оббивка: 0; 
  Дисплей: Блок; 
  Ширина: 100%; 
  Висота: 50px; 
  ; Довідкова інформація: # eeeeee; 
  переповнювання: схований; 
  )