css實現布局時可以用的幾個技巧(代碼)

來源:互聯網
上載者:User
本篇文章給大家帶來的內容是關於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; }}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.