您好,欢迎访问一九零五行业门户网

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

--技巧 先对每个较大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 16 17 18 19 20 部门管理21 22 23 24 部门维护:
25 26
27 28 部门排序:
29 31
32
33 34 35
36 37
38 39 40 41
42 43
44 45 46 47 职位管理48 49 50 51 职位维护:
52 53
54 55 职位排序:
56 58
59
60 61 62
63 64
65 66 67 68
69 70
71
72 73 74 75
其它类似信息

推荐信息