收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ空間首頁布局</title>
<style>
body,ul,li{
margin: 0;
padding: 0;
}
body{
margin: 0px;
padding: 0px;
background-color: lightskyblue;
background-image: url("img7.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.nav{
width: 100%;
height: 50px;
background-color: black;
position: fixed;
}
.content{
position: absolute;/*絕對定位*/
left: 0;
right: 0;
top: 50px;
margin: auto;
width: 1000px;
height: 800px;
background-color: olive;
}
.content .head{
width: 1000px;
height: 150px;
background-color: red;
}
.content .main{
width: 1000px;
height:600px;
background-color: lavender;
position: relative;/*相對定位*/
}
.content .main .left{
width: 170px;
height: 600px;
background-color: rebeccapurple;
position: absolute;/*絕對定位*/
top: 0;
left: 0;
}
.content .main .middle{
width: 510px;
height: 600px;
background-color: lightcoral;
margin-left: 180px;
margin-right: 310px;
}
.content .main .right{
width: 300px;
height: 600px;
background-color: lawngreen;
position: absolute;/*絕對定位*/
top: 0px;
right: 0px;
}
.content .main .foot{
width: 1000px;
height: 50px;
background-color: lightslategray;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="content">
<div class="head">頭部</div>
<div class="main">
<div class="left">左邊</div>
<div class="middle">中間</div>
<div class="right">右邊</div>
<div class="foot">底部</div>
</div>
</div>
</body>
</html>總結(jié)：
相對定位：自己本身位置沒變，以自身為起始點(diǎn)移動
絕對定位：已經(jīng)脫離文檔流了，有多個(gè)div都脫離文檔流，它們會一個(gè)一個(gè)覆蓋，與浮動不同，浮動是一個(gè)個(gè)水平排列，不會覆蓋
QQ空間布局注意：3.1要設(shè)置主體main為relative(相對定位)以它為參照 3.2左邊.右邊絕對定位，中間大于左邊距離，大于右邊距離即可
QQ空間布局注意：整個(gè)內(nèi)容區(qū)塊content 設(shè)置絕對定位 頂部大于頭部 左邊右邊都為0 margin: auto;居中
運(yùn)行效果圖：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號