search

Home >Web Front-end >HTML Tutorial >CSS perfect DIV CSS layout_html/css_WEB-ITnose

CSS perfect DIV CSS layout_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:32:561052browse

--Tip: First set the border: solid 1px blue in the CSS style of each larger DIV and then remove it after adjusting the overall layout.

1. Get the outermost frame first

View Code 

1 <div id="outterDiv">2 3 </div>

2. Add CSS immediately

View Code 

1 <style type="text/css">2 3 #outterDiv{ width:600px; }4 5 </style>

3. Analyze the left and right structure of the layout

View Code 

1 <div class="InnerDiv">2 3 </div>4 5 <div class="InnerDiv">6 7 </div>

4. Add CSS

View Code 

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

5. Analyze as left-right-bottom structure

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. Add 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. The left part is divided into two DIVs, upper and lower DIV

View Code 

<div class="NameDiv"></div><div class="SortDiv"></div>

8. Add CSS

View Code 

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

9. Fill each DIV content

10. All codes

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>











Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS Div translucent effect_html/css_WEB-ITnoseNext article：CSS Div translucent effect_html/css_WEB-ITnose

Related articles

See more