|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于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中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!