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