CSS 完美DIV+CSS布局_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:32 PM

--技巧先对每个较大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>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。