這篇文章帶給大家的內容是關於css實現佈局時可以用的幾個技巧(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
面對似曾相識的佈局
側邊固定中間自適應,頭部固定中間自適應,長得差不多的panel元件,model元件
我們有前端框架bootstrap,easyui都有提供這些元件插件,在使用給過程中總是和ui畫出來的頁面有些細微的差距比如:字體,高度,背景色
今天來總結下如何快速自訂佈局,提高開發效率
方案1:利用定位實現上面固定中間自適應佈局
#section{ position: fixed; top:0; left: 0; bottom: 0; right: 0; .top{ position: fixed; top:0; left: 0; height: @header_height; width: 100%; } .main{ position:relative; top:-@header_height; left:0; height:100%; border-top:@header_height solid transparent; } }
原理:利用border-top佔據top高度,利用position的top設定-@header_height將位置頂回去
方案2:利用float,padding,margin實現側邊固定中間自適應佈局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding layout demo</title> <style type="text/css"> * html #container{ height:1%; /* So IE plays nice */ } html{ height: 100%; } body{ height: 100%; margin:0; } #container{ background-color:#0ff; overflow:hidden; height: 100%; padding-right:220px; /* 宽度大小等与边栏宽度大小*/ } #content{ background-color:yellow; width:100%; float:left; height: 100%; } #sidebar{ background-color:#f00; width:220px; float:left; height: 100%; margin-right:-220px; } </style> </head> <body> <p id="container"> <p id="content">Main content section </p> <p id="sidebar">Right Sidebar </p> </p> </body> </html>
原理:利用padding佔據側邊寬度,利用側邊的margin設定-@side_width回到側邊位置
面板佈局:原理類似方案一,另外modal也可參考此佈局方法
html結構
<p class="panel"> <p class="panel-header"> <span class="panel-title-self">今日庭审</span> </p> <p class="panel-body"> <p class="trial"> </p> </p> </p>
css設定
@panel-title-font-size:1rem; @panel-title-color:#fff; @panel-title-bg:#30A7FF; @panel-title-height:2.7rem; .panel-title-self{ color: @panel-title-color; font-size: @panel-title-font-size; background-color: @panel-title-bg; height: @panel-title-height; } .panel{ height: 100%; border: 1px solid #ddd; margin: 0; position: relative; box-shadow: 3px 3px 3px 3px #ddd; .panel-header{ background:@panel-title-bg; padding-left: 10px; height: @panel-title-height; line-height: @panel-title-height; display: flex; align-items: center; img{ margin: 0 5px; } } .panel-body{ height: 100%; width: 100%; box-sizing: border-box; border-top:@panel-title-height solid transparent; padding: 0; position: relative; top:-@panel-title-height; } }
#相關推薦:
以上是css實現佈局時可以使用的幾個技巧(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!