游财网

全部频道

您的当前位置：首页CSS完美DIV+CSS布局_html/css

CSS完美DIV+CSS布局_html/css

来源：游财网


--技巧 先对每个较大DIV的CSS样式设置 border:solid 1px blue 整体布局调整完再去掉

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 
 




        
                
            
            
            
    
显示全文