CSS完美DIV+CSS布局_html/css_WEB-ITnose

1.先弄最外框的

View Code

1 
2 3 

2.马上加上CSS

View Code

1 

3.分析布局左右结构

View Code

1 
2 3 
4 5 
6 7 

4.加上CSS

View Code

1 .InnerDiv { width:49%; float:left; overflow:hidden; margin-left:5px; display:inline; }

5.分析为 左-右-下 结构

View Code

 1 
 2  3 
 4  5 
 6  7 
 8  9 
10 11 

6.加上CSS

View Code

1 .LeftDiv { width:200px; float:left; margin-left:17px;margin-top:10px; display:inline; }2 .RightDiv { width:40px; float:left; display:inline; margin-left:5px; margin-top:100px; }3 .DownDiv { width:200px; text-align:center;margin-bottom:8px; }

7.左部 又分为上下2个DIV

View Code

8.加上CSS

View Code

1 .NameDiv { width:100%; }2 .SortDiv { width:100%; }

9.填充每个DIV内容

10.全部代码

View Code

 1  2  3       4      13 14 15      74 75