Basit 2 sütun CSS düzeni, css, tasarım, CSS düzeni |

Basit 2 sütun CSS düzeni

Bu nasıl bir iki sütun düzeni oluşturmak için CSS kullanmak için eğitsel bir yazıdır.

Düzenini bir başlık, bir ana içerik sütunu, bir kenar çubuğu ve altbilgi oluşmaktadır. Bir kere nasıl kaçınılmaz Internet Explorer hata ile başa tüm zor Bir çok temel düzenini ve CSS ile oluşturmak için kullanılır.

1. Temel yapı

Her şeyden önce, bir temel yapısı oluşturun:


  > <div = "page" kimliği> 
  > </div> <div = "header"> </ p> id 
  > </div> <div = "sidebar"> </ p> id 
  > </div> <div = "main"> </ p> id 
  > </div> <div = "footer"> </ p> id 
  </ p> 


  Bundan sonra, biz farklı bölümlerinde bazı içerik koyun: 

  > <div = "page" kimliği> 
  > <div = "header" kimliği> 
  <h1> Firma Adı </ h1> 
  <H4> yazın sloganı </ h4> 
  </ p> 

  > <div = "sidebar" kimliği> 
  <h2> Gezinme </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Ana Sayfa </ a> </ p> 
  > About us </a> </li> <li> <a href = "#"> Hakkımızda </ a> </ p> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ p> 
  > Contact </a> </li> <li> <a href = "#"> İletişim </ a> </ p> 
  > Sitemap </a> </li> <li> <a href = "#"> Site Haritası </ a> </ p> 
  </ ul> 
  </ p> 

  > <div = "main" kimliği> 
  <h2> İçerik </ h2> 
  <p> Lorem ipsum dolor, consectetuer dipiscing amet oturmak 
  Elit.  Cum doğuran Montes, nascetur ridiculus MUS Dis.  1 Ocak  
  2002 Lorem ipsum dolor amet, consectetuer adipiscing elit otur.  Cum DIS  
  doğuran Montes, nascetur ridiculus MUS.  1 Ocak 2002 </ p> 
  </ p> 
  > <div = "footer" kimliği> 
  <h2> Altbilgi </ h2> 
  </ p> 
  </ p>

2. Css Kodu

Şimdi CSS kodu oluşturun:


  / * tarzı iki sütun düzeni * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  vücut 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, vücut 
  ( 
  height: 100%; 
  ; min-height: 100% / * Firefox * /; 
  ) 


  html, # sayfa 
  (  
  margin: 0; 
  padding: 0; 
  height: 100%; 
  ) 
  # sayfa 
  ( 
  ; Margin: 0 otomatik; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 


  ; } a (text-decoration: none;) 

   text-decoration :underline } a: (text-decoration: underline) duraksamak 

  ; padding : 0 ; } ül, p (margin: 0; padding: 0;) Ol 


  H1, H2, H3, H4, H5, H6 
  ( 
  margin: 0; 
  20px ; padding: 10px 0 0 20px; 
  ) 

  ; } h1 (font-size: 28px;) 
  ; } h2 (font-size: 24px;) 
  ; } h3 (font-size: 18px;) 
  ; } h4 (font-size: 12px;) 
  ; } H5 (font-size: 10px;) 

  ; P (margin: 0; 
  line-height: 18px; 
  10px 20px ; padding: 0 0 10px 20px; 
  font-size: 12px;  
  ) 

  # sayfa 
  ( 
  ; Margin: 0 otomatik; 
  Padding: 0; 
  Width: 1009px; 
  Height: 100%; 
  ) 

  # başlık 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 151px; 
  display: engellemek; 
  ; background-color: # eeeeee; 
  ) 

  # sidebar 
  ( 
  float: left; 
  margin: 0; 
  padding: 0; 
  ; display: inline / * Internet Explorer * /; 
  width: 200px; 
  height: 100%; 
  ; background-color: # cccccc; 
  ) 

  # sidebar ül 
  ; } (Liste-style-type: none;) 

  display : inline /*internet explore*/ ; } # sidebar ül p (display: inline / * İnternet * keşfetmek /;) 

  # sidebar ül Li bir 
  (  
  ; padding: 3px 4px; 
  display: engellemek; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

  # sidebar ül Li a: sallanmak 
  : #CC0000 } (Color: # CC0000)  

  # ana 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  display: engellemek; 
  width: 809px; 
  height: 100%; 
  background: # dddddd 
  ) 
  # altbilgiyi 
  ( 
  margin: 0; 
  padding: 0; 
  display: engellemek; 
  width: 100%; 
  height: 50px; 
  ; background: # eeeeee; 
  overflow: hidden; 
  )