CSS后臺(tái)布局實(shí)例-創(chuàng)新互聯(lián)

下面的例子是一個(gè)簡單的布局

成都創(chuàng)新互聯(lián)公司自2013年起，公司以成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶1000多家，涉及國內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

最上面是header，左邊是一個(gè)logo（老男孩），右邊是用戶的登錄信息

中間一大塊是內(nèi)容，內(nèi)容左側(cè)是菜單，右側(cè)是具體的內(nèi)容

CSS 后臺(tái)布局實(shí)例

代碼如下：

body的margin為0，確保邊上全部填滿

absolute 確保位置不變; 注意如果他的父級標(biāo)簽有relative，他相對于這個(gè)父級標(biāo)簽的位置不變，否則相對于body的位置不變

overflow 在內(nèi)容超過標(biāo)簽范圍之后會(huì)自動(dòng)加個(gè)滾輪

font-awesome插件可以使用現(xiàn)成的小標(biāo)簽

<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<link rel="stylesheet"  href="font-awesome-4.7.0/css/font-awesome.min.css"/>    
<style>    
body{    
margin: 0;    
}    
.left{    
float: left;    
}    
.right{    
float: right;    
}    
.pg-header{    
height: 48px;    
background-color: #2459a2;    
color: white;    
line-height: 48px;    
}    
.pg-header .logo{    
width: 200px;    
background-color: #204982;    
text-align: center;    
}    
.pg-header .icons{    
padding: 0 20px;    
}    
.pg-header .icons:hover{    
background-color: #204982;    
}    
.pg-header .user{    
margin-right: 60px;    
padding: 0 20px;    
color: white;    
height: 48px;    
}    
.pg-header .user:hover{    
background-color: #204982;    
}    
.pg-header .user .a img{    
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;    
}    
.pg-header .user .b{    
z-index: 20;    
position: absolute;    
top: 48px;    
right: 0;    
background-color: white;    
color: black;    
width: 160px;    
display: none;    
font-size: 14px;    
line-height: 30px;    
}    
.pg-header .user .b a{    
padding: 5px;    
color: black;    
text-decoration: none;    
}    
.pg-header .user .b a:hover{    
background-color: #dddddd;    
}    
.pg-header .user:hover .b{    
display: block;    
}    
.pg-header .user .b a{    
display: block;    
}    
.pg-content .menu{    
position: absolute;    
top:48px;    
left: 0;    
bottom: 0;    
width: 200px;    
background-color: #dddddd;    
}    
.pg-content .content{    
position: absolute;    
top: 48px;    
right: 0;    
bottom: 0;    
left: 200px;    
overflow: auto;    
z-index: 9;    
}    
</style>    
</head>    
<body>    
<div class="pg-header">    
<div class="logo left">    
老男孩    
</div>    
<div class="user right" >    
<a class="a" href="#">    
<img src="22.jpg">    
</a>    
<div class="b">    
<a href="#">我的資料</a>    
<a href="#">注銷</a>    
</div>    
</div>    
<div class="icons right">    
<i class="fa fa-commenting-o" aria-hidden="true"></i>    
<span>5 </span>    
</div>    
<div class="icons right">    
<i class="fa fa-bell-o" aria-hidden="true"></i>    
</div>    
</div>    
<div class="pg-content">    
<div class="menu left">a</div>    
<div class="content left">    
<!--<div >返回頂部</div>-->    
<!--<div >返回頂部</div>-->    
<div >    
<p >asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>    
</div>    
</div>    
</div>    
<div class="pg-footer"></div>    
</body>    
</html>

效果如下

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：CSS后臺(tái)布局實(shí)例-創(chuàng)新互聯(lián)
本文來源：http://www.bm7419.com/article0/dpcpoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、微信小程序、云服務(wù)器、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營