CSS 完美DIV+CSS布局
--技巧 先对每个较大DIV的CSS样式设置 border:solid 1px blue 整体布局调整完再去掉
1.先弄最外框的
View Code
1 <div id="outterDiv">
2
3 </div>
2.马上加上CSS
View Code
1 <style type="text/css">
2
3 #outterDiv{ width:600px; }
4
5 </style>
3.分析布局左右结构
View Code
1 <div class="InnerDiv">
2
3 </div>
4
5 <div class="InnerDiv">
6
7 </div>
4.加上CSS
View Code
1 .InnerDiv { width:49%; float:left; overflow:hidden; margin-left:5px; display:inline; }
5.分析为 左-右-下 结构
View Code
1 <div class="LeftDiv">
2
3 </div>
4
5 <div class="RightDiv">
6
7 </div>
8
9 <div class="DownDiv">
10
11 </div>
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
<div class="NameDiv">
</div>
<div class="SortDiv">
</div>
8.加上CSS
View Code
1 .NameDiv { width:100%; }
2 .SortDiv { width:100%; }
9.填充每个DIV内容
10.全部代码
View Code
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title>排序管理</title>
4 <style type="text/css">
5 #outterDiv{ width:600px; }
6 .InnerDiv { width:49%; float:left; overflow:hidden; margin-left:5px; display:inline; }
7 .LeftDiv { width:200px; float:left; margin-left:17px;margin-top:10px; display:inline; }
8 .RightDiv { width:40px; float:left; display:inline; margin-left:5px; margin-top:100px; }
9 .DownDiv { width:200px; text-align:center;margin-bottom:8px; }
10 .NameDiv { width:100%; }
11 .SortDiv { width:100%; }
12 </style>
13 </head>
14 <body style="font-size:12px;">
15 <form id="form1" runat="server">
16 <div id="outterDiv">
17 <div class="InnerDiv">
18 <fieldset>
19 <legend>
20 <font style='font-size:12px;'>部门管理</font>
21 </legend>
22 <div class="LeftDiv">
23 <div class="NameDiv">
24 部门维护：<br />
25 <asp:TextBox ID="tbDept" runat="server" Width="200px"></asp:TextBox>
26 </div>
27 <div class="SortDiv">
28 部门排序：<br />
29 <asp:ListBox ID="LibDeptOrder" runat="server" Height="250px" Width="200px" AutoPostBack="true"
30 onselectedindexchanged="LibDeptOrder_SelectedIndexChanged"></asp:ListBox>
31 </div>
32 </div>
33 <div class="RightDiv">
34 <asp:Button ID="btnDeptUp" runat="server" Text="上移" onclick="btnDeptUp_Click" />
35 <br />
36 <asp:Button ID="btnDeptDown" runat="server" Text="下移" onclick="btnDeptDown_Click" />
37 </div>
38 <div class="DownDiv">
39 <asp:Button ID="btnDeptSave" runat="server" Text="保存" onclick="btnDeptSave_Click" />
40 <asp:Button ID="btnDeptDel" runat="server" Text="删除" onclick="btnDeptDel_Click" />
41 </div>
42 </fieldset>
43 </div>
44 <div class="InnerDiv">
45 <fieldset>
46 <legend>
47 <font style='font-size:12px;'>职位管理</font>
48 </legend>
49 <div class="LeftDiv">
50 <div class="NameDiv">
51 职位维护：<br />
52 <asp:TextBox ID="tbPosi" runat="server" Width="200px"></asp:TextBox>
53 </div>
54 <div class="SortDiv">
55 职位排序：<br />
56 <asp:ListBox ID="libPosiOrder" runat="server" Height="250px" Width="200px" AutoPostBack="true"
57 onselectedindexchanged="libPosiOrder_SelectedIndexChanged"></asp:ListBox>
58 </div>
59 </div>
60 <div class="RightDiv">
61 <asp:Button ID="btnPosiUp" runat="server" Text="上移" onclick="btnPosiUp_Click" />
62 <br />
63 <asp:Button ID="btnPosiDown" runat="server" Text="下移" onclick="btnPosiDown_Click" />
64 </div>
65 <div class="DownDiv">
66 <asp:Button ID="btnPosiSave" runat="server" Text="保存" onclick="btnPosiSave_Click" />
67 <asp:Button ID="btnPosiDel" runat="server" Text="删除" onclick="btnPosiDel_Click" />
68 </div>
69 </fieldset>
70 </div>
71 </div>
72 <input type="hidden" id="hidUnitID" runat="server"/>
73 </form>
74 </body>
75 </html>
