国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁(yè)

好書

留言交流

下載APP

聯(lián)系客服
DIV+CSS最常用的網(wǎng)頁(yè)布局代碼11例_CSS教程_100天網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)

div css布局不同于table布局，它主要是按列來計(jì)算，而table是嵌套實(shí)現(xiàn)。這里列舉了最常見的幾種布局代碼：

單行一列

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body { margin: 0px; padding: 0px; text-align: center; }    
  2. #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  

兩行一列

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body { margin: 0px; padding: 0px; text-align: center;}    
  2. #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}    
  3. #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}  

三行一列

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body { margin: 0px; padding: 0px; text-align: center; }    
  2. #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }     
  3. #content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }    
  4. #content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  

單行兩列

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }    
  2. #bodycenter #dv1 {float: left;width: 280px;}    
  3. #bodycenter #dv2 {float: rightright;width: 410px;}   

兩行兩列

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}    
  2. #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }    
  3. #bodycenter #dv1 { float: left; width: 280px;}    
  4. #bodycenter #dv2 { float: rightright;width: 410px;}  

三行兩列

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header{ width: 700px;margin-right: auto; margin-left: auto; }    
  2. #bodycenter {width: 700px; margin-right: auto; margin-left: auto; }    
  3. #bodycenter #dv1 { float: left;width: 280px;}    
  4. #bodycenter #dv2 { float: rightright; width: 410px;}    
  5. #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }  

 單行三列使用絕對(duì)定位

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #left { position: absolute; top: 0px; left: 0px; width: 120px; }    
  2. #middle {margin: 20px 190px 20px 190px; }    
  3. #right {position: absolute;top: 0px; rightright: 0px; width: 120px;}  

 float定位一

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="warp">    
  2. <div id="column">    
  3. <div id="column1">這里是第一列</div>    
  4. <div id="column2">這里是第二列</div>    
  5. <div class="clear"></div>    
  6. </div>    
  7. <div id="column3">這里是第三列</div>    
  8. <div class="clear"></div>    
  9. </div>   

CSS:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #wrap{ width:100%; height:auto;}    
  2. #column{ float:left; width:60%;}    
  3. #column1{ float:left; width:30%;}    
  4. #column2{ float:rightright; width:30%;}    
  5. #column3{ float:rightright; width:40%;}    
  6. .clear{ clear:both;}   

float定位二：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="center" class="column">    
  2. <h1>This is the main content.</h1>    
  3. </div>    
  4. <div id="left" class="column">    
  5. <h2>This is the left sidebar.</h2>    
  6. </div>    
  7. <div id="right" class="column">    
  8. <h2>This is the right sidebar.</h2>    
  9. </div>   

CSS:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}    
  2. .column {position: relative;float: left;}    
  3. #center {width: 100%;}    
  4. #left {width: 180px; rightright: 240px;margin-left: -100%;}    
  5. #right {width: 130px;margin-right: -100%;}   

兩行三列：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="header">這里是頂行</div>    
  2. <div id="warp">    
  3. <div id="column">    
  4. <div id="column1">這里是第一列</div>    
  5. <div id="column2">這里是第二列</div>    
  6. <div class="clear"></div>   

css

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header{width:100%; height:auto;}    
  2. #wrap{ width:100%; height:auto;}    
  3. #column{ float:left; width:60%;}    
  4. #column1{ float:left; width:30%;}    
  5. #column2{ float:rightright; width:30%;}    
  6. #column3{ float:rightright; width:40%;}    
  7. .clear{ clear:both;}   

三行三列

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div id="header">這里是頂行</div>    
  2. <div id="warp">    
  3. <div id="column">    
  4. <div id="column1">這里是第一列</div>    
  5. <div id="column2">這里是第二列</div>    
  6. <div class="clear"></div>    
  7. </div>    
  8. <div id="column3">這里是第三列</div>    
  9. <div class="clear"></div>    
  10. </div>    
  11. <div id="footer">這里是底部一行</div>   

CSS:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header{width:100%; height:auto;}       
  2. #wrap{ width:100%; height:auto;}       
  3. #column{ float:left; width:60%;}       
  4. #column1{ float:left; width:30%;}       
  5. #column2{ float:rightright; width:30%;}       
  6. #column3{ float:rightright; width:40%;}       
  7. .clear{ clear:both;}       
  8. #footer{width:100%; height:auto;}    

 

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
div+css布局漫談
建站教程>CMS建站>DIV+CSS常用的Html網(wǎng)頁(yè)布局代碼匯集
不會(huì)前端也可以看得懂的3種DIV CSS布局技術(shù)
PrestaShop的基本HTML結(jié)構(gòu)與CSS樣式
CSS布局解決方案（多列布局）
CSS常見布局解決方案
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服