Đây là một hướng dẫn về cách sử dụng CSS để tạo một đơn giản, bố trí hai cột.

Việc bố trí bao gồm một tiêu đề, một nội dung chính của cột, một bên, và một chân. Đáp đẹp, bố trí cơ bản, và không phải ở tất cả các khó khăn để tạo ra với CSS một khi bạn biết làm thế nào để đối phó với những lỗi không thể tránh khỏi trình duyệt Internet Explorer.

1. Cấu trúc cơ bản

Trước hết, chúng tôi tạo ra những cấu trúc cơ bản 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> 


  Sau đó, chúng tôi đưa một số nội dung trong các phần khác nhau: 

  > <div id = "page"> 
  > <div id = "header"> 
  <h1> Tên Công ty </ h1> 
  <h4> Loại khẩu hiệu của bạn </ H4> 
  </ div> 

  > <div id = "sidebar"> 
  <h2> Danh mục chính </ h2> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Trang chủ </ a> </ li> 
  > About us </a> </li> <li> <a href = "#"> Giới thiệu </ a> </ li> 
  > Srevices </a> </li> <li> <a href = "#"> Srevices </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Liên hệ </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sơ đồ </ a> </ li> 
  </ ul> 
  </ div> 

  > <div id = "main"> 
  <h2> Nội dung </ h2> 
  <p> Lorem ipsum dolor sit amet, consectetuer dipiscing 
  Elit.  Cum dis parturient montes, nascetur ridiculus mus.  January 1,  
  2002 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Kiêm dis  
  parturient montes, nascetur ridiculus mus.  January 1, 2002 </ p> 
  </ div> 
  > <div id = "footer"> 
  <h2> Chân </ h2> 
  </ div> 
  </ div> 

2. Mã số css

Bây giờ chúng tôi tạo ra css mã:

  / * hai cột bố trí theo phong cách * / 
  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  cơ thể 
  ( 
  font-size: 100%; 
  font-weight: bình thường; 
  ; font-family: Arial, Helvetica, sans-serif; 
  ) 
  * Html, cơ quan, 
  ( 
  chiều cao: 100%; 
  ; min-height: 100% / * firefox * /; 
  ) 


  html, # trang 
  (  
  margin: 0; 
  padding: 0; 
  chiều cao: 100%; 
  ) 
  # trang 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Chiều cao: 100%; 
  ) 


  ; } a (text-decoration: none;) 

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

  ; padding : 0 ; } ul, ol, li (margin: 0; padding: 0;) 


  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;  
  ) 

  # trang 
  ( 
  ; Margin: 0 auto; 
  Padding: 0; 
  Width: 1009px; 
  Chiều cao: 100%; 
  ) 

  # header 
  ( 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 151px; 
  hiển thị: chặn; 
  ; background-color: # EEEEEE; 
  ) 

  # sidebar 
  ( 
  float: left; 
  margin: 0; 
  padding: 0; 
  ; hiển thị: inline / * internet explorer * /; 
  width: 200px; 
  chiều cao: 100%; 
  ; background-color: # cccccc; 
  ) 

  # sidebar ul 
  ; } (Danh sách kiểu-loại: none;) 

  display : inline /*internet explore*/ ; } # sidebar ul li (display: inline / * Internet khám phá * /;) 

  # sidebar ul li một 
  (  
  ; padding: 3px 4px; 
  hiển thị: chặn; 
  16px ; margin: 0px 0 0 16px; 
  text-decoration: none; 
  color: # 0000E8 
  ) 

  # sidebar ul li a: hover 
  : #CC0000 } (Color: # CC0000)  

  # chính 
  ( 
  margin: 0; 
  padding: 0; 
  float: left; 
  hiển thị: chặn; 
  width: 809px; 
  chiều cao: 100%; 
  background: # dddddd 
  ) 
  # footer 
  ( 
  margin: 0; 
  padding: 0; 
  hiển thị: chặn; 
  width: 100%; 
  height: 50px; 
  ; background: # EEEEEE; 
  overflow: hidden; 
  ) 

cuối cùng, chúng tôi đã làm xong. Chúng tôi đã tạo một đơn giản, 2 cột css layout.Click đây để xem ví dụ

Filed under: Css, Hướng dẫn bởi admin