亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 61
粉絲 0
評論 0
訪問量 73728
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
QQ空間首頁布局
Pengsir
原創(chuàng)
1324人瀏覽過
<!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é):

  1. 相對定位:自己本身位置沒變,以自身為起始點(diǎn)移動

  2. 絕對定位:已經(jīng)脫離文檔流了,有多個div都脫離文檔流,它們會一個一個覆蓋,與浮動不同,浮動是一個個水平排列,不會覆蓋

  3. QQ空間布局注意:3.1要設(shè)置主體main為relative(相對定位)以它為參照  3.2左邊.右邊絕對定位,中間大于左邊距離,大于右邊距離即可

  4. QQ空間布局注意:整個內(nèi)容區(qū)塊content 設(shè)置絕對定位 頂部大于頭部 左邊右邊都為0 margin: auto;居中

運(yùn)行效果圖:

QQ空間簡單布局.png

本博文版權(quán)歸博主所有,轉(zhuǎn)載請注明地址!如有侵權(quán)、違法,請聯(lián)系admin@php.cn舉報(bào)處理!
全部評論 文明上網(wǎng)理性發(fā)言,請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)