收藏
批改狀態(tài)：合格
老師批語：你這個(gè)手寫作業(yè)厲害了, 得多大的紙
在CSS布局頁面過程中都是通過CSS的定位屬性完成對元素的位置和大小的控制的，定位就是精確定義HTML元素在頁面中位置，，可以是頁面中絕對位置，也可以是父級元素的相對位置。position就是最主要的定位屬性之一，position屬性可以定義元素在頁面中的相對位置和絕對位置，當(dāng)然還有固定位置?；菊Z法如下：static（默認(rèn)值）表示無特殊定位 | position: absolute（絕對位置）表示絕對定位，相對于其父元素進(jìn)行定位，元素位置可以通過top、right、bottom、left等屬性進(jìn)行設(shè)置。還可以通過z-index屬性改變定位元素的層級 | relative（相對位置）表示相對定位，定位的元素不可以重疊，可以通過top、right、bottom、left等屬性設(shè)置元素在頁面中的偏移位置，還可以通過z-index屬性改變定位元素的層級 | fixed（固定位置）表示將定位元素懸浮固定在頁面中某個(gè)位置，其包含塊是瀏覽器可視窗口本身，因此元素不會隨著瀏覽器的滾動條而滾動，可以通過top、right、bottom、left等屬性設(shè)置
當(dāng)你為元素定義position屬性之后，你還可以對其他的屬性進(jìn)行設(shè)置，例如：width、height、z-index、to、’right、bottom、left、overflow和clip，其中to、’right、bottom、left等屬性只有position屬性值為absolute、relative和fixed時(shí)才會起作用哦
下面我們將利用CSS的position屬性做簡單一個(gè)登錄頁面的布局案例
效果如下：
HTML代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登錄注冊</title> <link rel="stylesheet" href="login.css"> <style>body { min-width: 960px; } #header { width: 100%; height: 40px; background: mediumspringgreen; } #footer { width: 100%; height: 40px; background: greenyellow; clear: both;}#container { width: 100%; background:#ff742d;}#left { background: mediumvioletred; width: 200px; margin-left: -100%; display: block;}#right { background: midnightblue; color: #fff; width: 200px; margin-left: -200px;;}.column { float: left; height: 200px;}#content { margin-left: 200px; margin-right: 200px; background: olivedrab;} </style></head><body> <!-- 登錄注冊開始 --> <div class="continue_login"> <div class="continue_login_left lf"> <p>新字體即將發(fā)布</p> <p>告別商用字體版權(quán)糾紛</p> <p>— ContinueDream系列字體將于2022年正式發(fā)布 —</p> <div> <div class="qrcode">二維碼生成中...</div> <span>掃碼獲得書面授權(quán)</span> </div> </div> <div class="continue_login_right rh"> <div class="continue_login_right_title">歡迎登錄</div> <div class="continue_login_right_form"> <form action="lging.php" method="POST""> <input type="text" name="username" id="user_name" placeholder="用戶名/郵箱" autocomplete="off" max="20" required > <input type="password" name="password" id="user_password" placeholder="輸入密碼" min="6" max="20" required> <p> <input type="checkbox" name="checkbox_remember" id="login_state" > <label for="login_state">記住登錄狀態(tài)</label> </p> <button id="login_btn">登錄 </button> </form> <div class="other_Options"> <a href="">忘記密碼？</a> <span>還沒有賬號？<a href="">點(diǎn)擊注冊</a></span> </div> </div> <div class="continue_login_right_other_log-in"> <a href="http://"><img src="/static/images/qq_ico_dl.png" alt="QQ登錄" srcset=""></a> <a href="http://"><img src="/static/images/pheon_ico_dl.png" alt="手機(jī)號登錄" srcset=""></a> <a href="http://"><img src="/static/images/weiixn-ico_dl.png" alt="微信登錄" srcset=""></a> <a href="http://"><img src="/static/images/weibo_ico_dl.png" alt="微博登錄" srcset=""></a> </div> </div> </div> <!-- 登錄注冊結(jié)束 --></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
我們都知道html的塊級元素會在頁面中占據(jù)一整行的空間，依次向下排列，如果我們希望塊級元素能夠在一行中顯示，那么我們可以通過為塊元素設(shè)置浮動(float)的方式來實(shí)現(xiàn)。
浮動定位只能在水平方向定位，而不能在垂直方向定位哦，被設(shè)置為浮動的元素可以左右移動，直到碰到它的包含框的邊緣或者是另一個(gè)浮動元素的邊緣才會停止。CSS的浮動(float)基本語法如下：float: none表示不浮動 | left表示左浮動 | right表示右浮動。
清除浮動
有設(shè)置浮動就會有相應(yīng)的清除浮動。雖然浮動布局在頁面中使用的比較多，但是有些時(shí)候我們并不想因?yàn)槟承└拥奶匦杂绊懙轿覀兊木W(wǎng)頁布局，這時(shí)候就會需要清除布局屬性clear。
清除浮動雨大如下：clear: left 表示清除元素左側(cè)的浮動| right表示清除元素右側(cè)的浮動 | both表示清除左右兩邊的浮動。
下面我們結(jié)合定位和浮動來完成下面的一個(gè)圣杯布局案例
首先我們說明一下布局思路和步驟：
1.首先我們先給#header和#footer設(shè)置100%寬和80像素的高
2.給主體部分的#container設(shè)置100%寬加個(gè)背景便于觀察之后的布局
3.為了實(shí)現(xiàn)圣杯布局，我們需要將#container父元素下的三個(gè)同級元素統(tǒng)一設(shè)置浮動，也就是給類名.colum的元素設(shè)置float:left.
4.由于我們?yōu)?container下面三個(gè)子元素設(shè)置了浮動，它們已經(jīng)脫離文檔流了，并且#container這個(gè)父元素我們沒有為它設(shè)置高度，還有浮動后會影響的是后面的盒子所以#footer元素會上去遮蓋掉設(shè)置浮動的三個(gè)子元素
5.此時(shí)我們只需要給#footer元素設(shè)置清除浮動屬性clear: both;即可
6.清除浮動之后我們可以看到子元素中的文本，但是看不到每個(gè)子元素的顏色，這是為什么呢？這是因?yàn)槲覀儧]有為父元素和子元素設(shè)置高度，所以此時(shí)它的高度是零，它無法將顏色顯示出來
7.我們在寫文檔結(jié)構(gòu)的時(shí)候，就給#content、#left、#right這三個(gè)元素設(shè)置統(tǒng)一的類名.column，所以直接給這個(gè)類名設(shè)置一個(gè)高度400px像素的高，同時(shí)也要給它的父容器#container設(shè)置高度
8.我們給#content這個(gè)子元素設(shè)置寬度100%寬度讓它隨著父元素的寬度而變化，達(dá)到自適應(yīng)的目的。
9.給#left設(shè)置寬度200px像素；給#right設(shè)置寬度200px像素。
10.給父元素#container設(shè)置左右內(nèi)邊距各200px，給#left和#right這個(gè)兩個(gè)元素預(yù)留出兩邊的位置用于放置它們
11.我們需要讓#left這個(gè)元素上到左邊為它預(yù)留的位置上，所以我們?yōu)樗O(shè)置margin-left: -100%,此時(shí)我們會看到它已經(jīng)上到父容器設(shè)置內(nèi)邊距的位置了，因?yàn)樗歉鶕?jù)父元素的寬度來移動的
12.如果想#left元素完全到達(dá)預(yù)留位置，我們只需要為它再設(shè)置right: 200px；讓它往左邊移動200像素，此時(shí)對#left元素的設(shè)置就完成了
13.現(xiàn)在還剩下#right元素需要放到右邊預(yù)留的位置上，所以我們只需要為它設(shè)置屬性margin-right: 200px；即可對它設(shè)置完成
14.最后我們需要給body設(shè)置最小的寬度，也就是不能低于#left的寬度200px+#left: 200px+#right寬度200px=min-width=600px
效果如下：
HTML代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局</title> <link rel="stylesheet" href="layout_style.css"> <style>* { margin: 0; padding: 0;}body { min-width: 600px;}#header { width: 100%; height: 80px; background: brown;}#container { width: 100%; background: cyan; padding: 0 200px; box-sizing: border-box;}.column { float: left; height:475px; position: relative;}#content { width: 100%; background: lightsalmon;}#left { width: 200px; background: mediumblue; margin-left: -100%; right: 200px;}#right { width: 200px; background: orchid; margin-right: -200px;}#footer { clear: both; width: 100%; height: 80px; background: chartreuse;}</style></head><body> <header id="header">header</header><div id="container"><div id="content" class="column">content </div><div id="left" class="column">left</div><div id="right" class="column">right</div></div> <footer id="footer">footer</footer></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
具體思路和圣杯布局差不多，就是結(jié)構(gòu)有所改變，
效果如下：
HTML代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>雙飛翼布局</title> <link rel="stylesheet" href="shuangfei_style.css"></head><body> <div id="header">頭部</div> <div id="container" class="column"> <div id="content">內(nèi)容dasdsa </div> </div> <div id="left" class="column">左邊</div> <div id="right" class="column">右邊</div> <div id="footer">頁腳</div></body></html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS代碼如下：
body { min-width: 960px; } #header { width: 100%; height: 40px; background: mediumspringgreen; } #footer { width: 100%; height: 40px; background: greenyellow; clear: both;}#container { width: 100%; background:#ff742d;}#left { background: mediumvioletred; width: 200px; margin-left: -100%; display: block;}#right { background: midnightblue; color: #fff; width: 200px; margin-left: -200px;;}.column { float: left; height: 200px; height: 425px;}#content { margin-left: 200px; margin-right: 200px; background: olivedrab;}效果：
代碼如下：
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml"><meta charset="utf-8"><title>商品信息表</title><style type="text/css">table { border-collapse: collapse; margin: 50px auto;}.Tb-title { height: 48px;; font-size: 2rem; padding: 10px; background: #4BCBFA; border: 1px solid #ccc; border-bottom: 0; color: #fff;}table tr>th,table tr>td{ border: 1px solid #ccc; padding: 10px; text-align: center; color: #fff;}table>thead>tr { background: #06BFFF;}table>tbody>tr:nth-child(odd) { background: #2186FF;}table>tbody>tr:nth-last-child(odd) { background: #1C92FF;}table>tbody td[rowspan] { background: #3B98F0;}tfoot > tr { background: #4BCBFA; color: #fff;}a { text-decoration-line: none; color: #3B98F0;}</style></head><body><table> <caption class="Tb-title">行業(yè)客戶信息表</caption> <thead> <tr> <th>序號</th> <th>行業(yè)</th> <th></th> <th>項(xiàng)目名稱</th> <th>打印介質(zhì)</th> <th>關(guān)鍵部門</th> <th>適用機(jī)型</th> </tr> </thead> <tbody> <tr> <td rowspan="5">1</td> <td rowspan="5">工商局</td> <td>1</td> <td>營業(yè)執(zhí)照</td> <td>A3幅面銅版紙</td> <td>信息中心</td> <td>136列鏢局打印機(jī)</td> </tr> <tr> <td>2</td> <td>個(gè)體戶營業(yè)執(zhí)照</td> <td>6頁左右的證件</td> <td>個(gè)體處/信息中心</td> <td>136列票據(jù)打印機(jī)</td> </tr> <tr> <td>3</td> <td>食品流通許可證、餐飲許可證、食品生產(chǎn)許可證</td> <td>A3幅面銅版紙</td> <td>科技處</td> <td>136列票據(jù)打印機(jī)</td> </tr> <tr> <td>4</td> <td>收費(fèi)項(xiàng)目（據(jù)了解工商局取消了事業(yè)收費(fèi)，只擔(dān)任管理部門職能）</td> <td>發(fā)票</td> <td>個(gè)體處/信息中心</td> <td>80列票據(jù)/80列報(bào)表打印機(jī)</td> </tr> <tr> <td>5</td> <td>食品安全流通帳</td> <td>多聯(lián)票據(jù)</td> <td>消?？?軟件公司</td> <td>80列票據(jù)打印機(jī)</td> </tr> <tr> <td rowspan="4">2</td> <td rowspan="4">地稅局(征管科/信息中心)</td> <td>1</td> <td>發(fā)票領(lǐng)購薄</td> <td>證本</td> <td>征管科\信息中心</td> <td>DS5400HPRO、7系列證卡打印機(jī)</td> </tr> <tr> <td>2</td> <td>多元化申報(bào)項(xiàng)目</td> <td>A3或A4幅面報(bào)表</td> <td>征管科\信息中心</td> <td>136列報(bào)表打印機(jī)、行打</td> </tr> <tr> <td>3</td> <td>數(shù)據(jù)大集中</td> <td>稅收票證</td> <td>征管科\信息中心</td> <td>票據(jù)打印機(jī)、7系列證卡打印機(jī)</td> </tr> <tr> <td>4</td> <td>地稅網(wǎng)絡(luò)版發(fā)票</td> <td>地稅網(wǎng)絡(luò)發(fā)票</td> <td>征管科\信息中心</td> <td>80列平推機(jī)型</td> </tr> <tr> <td rowspan="5">3</td> <td rowspan="5">人民醫(yī)院</td> <td>1</td> <td>門診收費(fèi)</td> <td>10厘米左右小票</td> <td>計(jì)算機(jī)中心</td> <td>80列票據(jù)打印機(jī)</td> </tr> <tr> <td>2</td> <td>財(cái)務(wù)報(bào)表</td> <td>A3或A4幅面報(bào)表</td> <td>財(cái)務(wù)科\計(jì)算機(jī)中心</td> <td>136列報(bào)表打印機(jī)</td> </tr> <tr> <td>3</td> <td>住院部</td> <td>住院藥費(fèi)清單</td> <td>計(jì)算機(jī)中心</td> <td>136列報(bào)表打印機(jī)</td> </tr> <tr> <td>4</td> <td>醫(yī)生/護(hù)士工作站</td> <td>A4幅面報(bào)表</td> <td>計(jì)算機(jī)中心</td> <td>80列票據(jù)打印機(jī)</td> </tr> <tr> <td>5</td> <td>電子處方(His 系統(tǒng))</td> <td>10厘米左右的3層壓感紙</td> <td>計(jì)算機(jī)中心</td> <td>80列票據(jù)\報(bào)表打印機(jī)</td> </tr> </tbody> <tfoot> <tr> <td colspan="7">*本表格信息來源于<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%95%86%E5%93%81%E4%BF%A1%E6%81%AF%E8%A1%A8&hs=2&pn=20&spn=0&di=88440&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3308635019%2C1114975116&os=89752825%2C1194102239&simid=0%2C0&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%95%86%E5%93%81%E4%BF%A1%E6%81%AF%E8%A1%A8&objurl=http%3A%2F%2Fwww.mianfeiwendang.com%2Fpic%2F240f083302a80ec7f2eb830d%2F1-618-jpg_6_0_______-1017-0-0-1017.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B4twgujtojg1wg2_z%26e3Bv54AzdH3F15vAzdH3Fd9auabnnadwbajv0udjkbna1&gsm=&islist=&querylist=">這里</a></td> </tr> </tfoot></table></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
案例1
效果如下
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>非TABLE表格布局</title> <link rel="stylesheet" href="style_table.css"></head><body> <!-- 表格部分 --><div class="table"> <!-- 表格標(biāo)題 --> <p class="caption">第九期課程安排</p> <!-- 表格頭部 --> <span class="thead"> <ul> <li>序號</li> <li>課程</li> <li>描述</li> </ul> </span> <!-- 表格主題部分 --> <span class="tbody"> <ul> <li>1</li> <li>前端開發(fā)基礎(chǔ)</li> <li>HTML5常用標(biāo)簽,CSS3樣式控制與頁面布局</li> </ul> <ul> <li>2</li> <li>PHP開發(fā)基礎(chǔ)</li> <li>PHP語法,類與對象,常用開發(fā)技術(shù)與案例</li> </ul> <ul> <li>3</li> <li>大型CMS開發(fā)實(shí)戰(zhàn)</li> <li>Laravel開發(fā)基礎(chǔ),Laravel開發(fā)CMS全程精講</li> </ul> </span><!-- 表格腳注部分 --> <span class="tfoot"> <ul> <li>備注:全程直播教學(xué)</li> <li></li> <li>每晚20:00 - 22:00(節(jié)假日除外)</li> </ul> </span></div></body></html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS代碼：
.table { display: table; border: 1px solid #ff742d; width: 1000px; border-collapse: collapse; margin: 10% auto;}.caption { display: table-caption; font-size: 2rem; background: #ff742d; text-align:center; color: #fff;}.thead { display: table-header-group;}.tbody { display: table-row-group;}.tfoot { display: table-footer-group; position: relative;}.tfoot ul >li:first-child { position: absolute; left: 300px; border: 0;}.tfoot ul >li:nth-child(2) {border: 0;}.table ul { display: table-row;}.table ul li { display: table-cell; border: 1px solid #ff742d; padding: 20px;}.tbody ul>li:nth-child(1) { width: 100px;}案例2
效果：
代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非Table表格布局及合并</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .on_border { border:1px solid #ff742d; } .off_border { border: 0; } .cler_collapse { border-collapse: collapse; } .td_padding { padding: 10px; } #table { display: table; border: 1px solid #ff742d; border-collapse: collapse; width: 800px; height: 500px; margin:100px auto; text-align: center; } #thead { display: table-header-group; } .caption { display: table-caption; font-weight: bold; } #tbody { display: table-row-group; } #table .table_tr { display: table-row; } .sub_table { display: table; width: 100%; height: 100%; } .sub_table_tr { display: table-row; width: 100%; height: 100%; } .sub_table_td { display: table-cell; width: 100%; height: 100%; vertical-align: middle; font-size: 18px; } #tfoot { display: table-footer-group; } </style></head><body> <!-- 主表格開始 --> <div id="table"> <!-- 主表格頭部部分 --> <div id="thead"> <!-- 主表格的第一個(gè)tr --> <div class="table_tr"> <!-- 主表格中第一個(gè)嵌套子表格 --> <div class="sub_table"> <!-- 嵌套子表格中第一個(gè)tr --> <div class="sub_table_tr"> <!-- 子表格中第一個(gè)單元格 --> <div class="sub_table_td td_padding on_border caption" style="width: 40%;">省份／直轄市</div> <!-- 子表格中第二個(gè)單元格 --> <div class="sub_table_td td_padding on_border caption" style="width: 30%;">GDP(億元)</div> <!-- 子表格中第三個(gè)單元格 --> <div class="sub_table_td td_padding on_border caption" style="width: 30%;">增長率</div> </div><!-- 嵌套子表格結(jié)束 --> </div> </div><!-- 主表格的第一行結(jié)束 --> </div><!-- 主表格頭部部分結(jié)束 --> <!-- 主表格主體部分 --> <div id="tbody"> <!-- 主表格主體部分中的第一行tr --> <div class="table_tr"> <!-- 主表格主表格主體部分中第一個(gè)嵌套子表格 --> <div class="sub_table cler_collapse"> <!-- 子表格中第一行tr --> <div class="sub_table_tr"> <!-- 子表格中第一個(gè)單元格 --> <div class="sub_table_td td_padding on_border" style="width: 40%;">上海市</div> <!-- 子表格中第二個(gè)單元格 --> <div class="sub_table_td td_padding on_border" style="width: 30%;">88888</div> <!-- 子表格中第三個(gè)單元格 --> <div class="sub_table_td td_padding on_border" style="width: 30%;">10.8%</div> </div> <!-- 子表格第一個(gè)tr結(jié)束 --> </div> <!-- 主表格主表格主體部分中第一個(gè)嵌套子表格結(jié)束 --> </div> <!-- 主表格主體部分中的第二個(gè)tr --> <div class="table_tr"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格 --> <div class="sub_table cler_collapse"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中的第一個(gè)tr --> <div class="sub_table_tr"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td --> <div class="sub_table_td" style="width: 30%;"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格 --> <div class="sub_table cler_collapse"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr --> <div class="sub_table_tr"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td --> <div class="sub_table_td" style="width: 40%;"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格 --> <div class="sub_table cler_collapse"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第一個(gè)tr --> <div class="sub_table_tr td_padding " style="height:50%; "> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第一個(gè)tr中第一個(gè)td --> <div class="sub_table_td on_border" style="width: 100%; height:50%;"> 河南 </div> </div> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第二個(gè)tr --> <div class="sub_table_tr td_padding " style="height:50%; "> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第二個(gè)tr中第一個(gè)td --> <div class="sub_table_td on_border" style="width: 100%; height:50%;"> 江蘇 </div> </div> </div> </div> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格 --> <div class="sub_table cler_collapse"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第一個(gè)tr --> <div class="sub_table_tr" style="height:50%;"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第一個(gè)tr中第一個(gè)td --> <div class="sub_table_td on_border" style="width: 100%; height:50%;"> 河南 </div> </div> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第二個(gè)tr --> <div class="sub_table_tr" style="height:50%;"> <!-- 主表格中第二個(gè)tr嵌套的第一個(gè)子表格中第一個(gè)td中嵌套的第一個(gè)表格中第一個(gè)tr中第一個(gè)td中嵌套的第一個(gè)表格中的第二個(gè)tr中第一個(gè)td --> <div class="sub_table_td on_border" style="width: 100%; height:50%;"> 江蘇 </div> </div> </div> <div class="sub_table_td" style="width: 30%;"> <div class="sub_table cler_collapse"> <div class="sub_table_tr" > <div class="sub_table_td on_border" style="width: 100%; "> 8.6% </div> </div> </div> </div> </div> </div> <!-- 合并部分結(jié)束 --> </div> </div> </div> </div> </div> <!-- 主表格頁腳部分 --> <div id="tfoot"> <div class="table_tr"> <div class="sub_table"> <div class="sub_table_tr"> <div class="sub_table_td" style="width: 70%;">上海市</div> <div class="sub_table_td" style="width: 30%;">10.8%</div> </div> </div> </div> </div> </div></body></html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
1.position屬性的值包括left、right、top、buttom、z-index，只有定位元素設(shè)置了absolute和relative或fixed它們才能起作用
2.浮動布局在為元素設(shè)置浮動屬性后該元素會脫離文檔流，會影響到后面的其他元素。需要注意的是當(dāng)子元素設(shè)置浮動屬性后會導(dǎo)致它的父元素失去高度二出現(xiàn)折疊情況，我們可以給父元素添加屬性：overflow: heidden或overflow:auto或者還可以給父元素添加偽元素：例如：
div { content: ""; display: block; clear: both;}3.圣杯布局和雙飛翼布局的區(qū)別只是結(jié)構(gòu)不同，圣杯布局是需要給父元素下面的三個(gè)子元素設(shè)置浮動然后將后面兩個(gè)子元素設(shè)置一下代碼：
#left { width: 200px; background: mediumblue; margin-left: -100%; right: 200px;}#right { width: 200px; background: orchid; margin-right: -200px;}雙飛翼布局則需要給內(nèi)容的父元素#container和左邊#left和右邊#right設(shè)置浮動，并未其設(shè)置一下代碼：
#container { width: 100%; background:#ff742d;}#left { background: mediumvioletred; width: 200px; margin-left: -100%; display: block;}#right { background: midnightblue; color: #fff; width: 200px; margin-left: -200px;;}.column { float: left; height: 200px; height: 425px;}#content { margin-left: 200px; margin-right: 200px; background: olivedrab;}部分手寫代碼：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號