<!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)脫離文檔流了,有多個div都脫離文檔流,它們會一個一個覆蓋,與浮動不同,浮動是一個個水平排列,不會覆蓋
QQ空間布局注意:3.1要設(shè)置主體main為relative(相對定位)以它為參照 3.2左邊.右邊絕對定位,中間大于左邊距離,大于右邊距離即可
QQ空間布局注意:整個內(nèi)容區(qū)塊content 設(shè)置絕對定位 頂部大于頭部 左邊右邊都為0 margin: auto;居中
運(yùn)行效果圖:
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號