Sederhana 2 kolom css layout, css, desain, tata letak css |

Sederhana 2 kolom css layout

Ini adalah tutorial tentang cara menggunakan CSS untuk membuat layout sederhana dua kolom.

Tata letak yang terdiri dari judul, isi kolom yang utama, yang sidebar, dan footer. J pretty dasar tata letak, dan sama sekali tidak sulit untuk membuat dengan CSS setelah Anda tahu bagaimana untuk menangani dengan pasti terjadi Internet Explorer bug.

1. Dasar struktur

Pertama, kami akan membuat struktur dasar HTML:


 > <div id = "header" > </div> <div id = "sidebar" > </div> <div id = "main" > </div> <div id = "footer" > </div> </div> <div id = "page"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main"> </ div> <div id = "footer "> </ div> </ div> 
  Setelah itu, kami menaruh beberapa konten yang berbeda di bagian:  > <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing  elit. <div id = "page"> <div id = "header"> <h1> Nama Perusahaan </ h1> <h4> Type your slogan </ h4> </ div> <div id = "sidebar"> <h2> navigasi </ h2> <ul> <li> <a href = "#"> Rumah </ a> </ li> <li> <a href = "#"> Tentang kami </ a> </ li> < li> <a href = "#"> Srevices </ a> </ li> <li> <a href = "#"> Hubungi </ a> </ li> <li> <a href = "#"> sitemap </ a> </ li> </ ul> </ div> <div id = "main"> <h2> Konten </ h2> <p> Lorem ipsum duka duduk amet, consectetuer dipiscing elit.  Cum dis kelahiran montes, nascetur ridiculus Mus.  1 Januari, 2002 Lorem ipsum duka duduk amet, consectetuer adipiscing elit.  Cum dis kelahiran montes, nascetur ridiculus Mus.  > <h2> Footer </h2> </div> </div> 1 Januari, 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>

2. Kode css

Sekarang kita membuat kode css:


  / * gaya dua kolom Layout * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  badan 
  ( 
  font-size: 100%; 
  font-weight: normal; 
  ; font-family: Arial, Helvetica, sans-berkait; 
  ) 
  * Html, tubuh 
  ( 
  height: 100%; 
  ; min-height: 100% / * firefox * /; 
  ) 


 margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } html, # halaman (margin: 0; padding: 0; height: 100%;) # halaman (margin: 0 auto; padding: 0; width: 1009px; height: 100%;) 
 ; } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; 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 ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ;  padding : 0 ;  width : 1009px ;  height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } a (text-decoration: none;) a: hover (text-decoration: underline) ul, ol, li (margin: 0; padding: 0;) h1, h2, h3, h4, H5, Bd6 (margin: 0; 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; padding: 0 0 10px 20px; font-size: 12px;) # halaman (margin: 0 auto; padding: 0; width: 1009px; height: 100%; ) # header (margin: 0; padding: 0; width: 100%; height: 151px; display: block; background-color: # eeeeee;) # sidebar (float: left; margin: 0; padding: 0; display: inline / * internet explorer * /; width: 200px; height: 100%; background-color: # CCCCCC;) # sidebar ul (list-style-type: none;) # sidebar ul li (display: inline / * internet mencari * /;) # sidebar ul li a (padding: 3px 4px; display: block; margin: 0px 0 0 16px; text-decoration: none; color: # 0000E8) # sidebar ul li a: hover (color: # CC0000) # utama (margin: 0; padding: 0; float: left; display: block; width: 809px; height: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; width: 100%; height: 50px; background: # eeeeee; overflow: hidden;)