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

搜索
博主信息
博文 9
粉絲 1
評論 0
訪問量 10924
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
布局簡單頁面0905補(bǔ)作業(yè)
jiangxiaobai
原創(chuàng)
768人瀏覽過

實(shí)例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css.css">
    <title>Title</title>
</head>

<body>
<div class="header">
    <div class="content">
        <ul>
            <li><a href="">首頁</a></li>
            <li><a href="">php</a></li>
            <li><a href="">mysql</a></li>
            <li><a href="">java</a></li>
            <li><a href="">python</a></li>
        </ul>
    </div>
</div>


<div class="container">

    <div class="wrap">
        <div class="main">
            <h1>圖片列表</h1>
        <ul>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/4.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                          ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/3.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/1.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/2.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>

            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/4.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/3.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/1.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            <li class="fore1">
                <div class="p-img">
                    <a href="#" target="_blank">
                        <img src="static/img/2.jpeg" alt="">
                    </a>
                </div>
                <div class="p-info">
                    <div class="p-name">
                        <a href="#" target="_blank" title="" class="x-name">
                            ***鞋子
                        </a>
                    </div>
                    <div class="p-price"><i>￥</i>1598.00</div>
                    <div class="p-buy">
                        <button>立即***</button>
                    </div>
                </div>
            </li>
            
        </ul>
        </div>
    </div>


    <div class="left">
        <h1>商品列表</h1>
        <ul>
            <li><a href="">華為</a></li>
            <li><a href="">三星</a></li>
            <li><a href="">聯(lián)想</a></li>
            <li><a href="">錘子</a></li>
            <li><a href="">蘋果</a></li>
        </ul>
    </div>


    <div class="right">
        <h1>最新推薦</h1>
        <ol>
            <li>推薦1</li>
            <li>推薦1</li>
            <li>推薦1</li>
            <li>推薦1</li>
            <li>推薦1</li>
            <li>推薦1</li>
            <li>推薦1</li>
        </ol>
    </div>

</div>





<div class="footer">
    <div class="content">

        <p>
            <a href="">?jiangxiaobai</a>
            <a href=""></a>
            <a href=""></a>
        </p>
    </div>
</div>
</body>

</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

css代碼

實(shí)例

body {
    margin: 0;
    padding: 0;
}
.header{

    background-color: #5e9ca0;
    margin: 0 auto;
}
.header .content{
    background-color: #5e9ca0;
    width: 90%;
    margin: 0 auto;
    height: 60px;

}
.header .content ul{
    margin: 0;
    padding: 0;
}
.header .content ul li{
    list-style: none;


}
.header .content ul li a{
    float: left;
    text-decoration: none;
    color: white;
    line-height: 60px;
    text-align: center;
    min-width: 80px;
    min-height: 60px;

}
.header .content ul li a:hover{
    color: #e2da99;
    font-size: 1.1rem;

}
.container {
    overflow: hidden;
    width: 90%;
    background-color: lightgray;
    margin: 5px auto;

}




.left {
    width: 200px;
    min-height: 800px;
    border: 1px solid #444444;
    padding: 10px;
    box-sizing: border-box;
}
.left h1{
    font-size: 1.1rem;
    color: white;
    border-bottom: 1px solid #555555;
}
.left ul{
    margin-top: 50px;
}
.left ul li{
    list-style: none;
    padding: 10px 20px;
}
.left ul li a{
    text-decoration: none;
    color: white;

}
.left ul li a:hover{
    color: red;
    font-size: 1.1rem;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: lightcoral;
}

.wrap {
    width: 100%;
    float: left;

}


.left{
    float: left;
}
.right{
    float: left;
}
.wrap{
    float: left;
}

.main {
   margin-right: 200px;
    margin-left: 200px;

    min-height: 800px;
}

.left {
    margin-left: -100%;
}

.right {
    margin-left: -200px;
}
ul{
    width: 100%;
}
ul>li img{
    width: 280px;
    height: 280px;
}
ul .fore1{
    float: left;
    list-style: none;
    width: 25%;
}
.x-name{
    float: left;
    text-decoration: none;
    color: white;
    padding-right: 5px;
}
.p-price{
    float: left;
    padding-right: 50px;
}
.footer{

    background-color: #404343;
    margin: 0 auto;
}
.footer .content{
    width: 90%;
    background-color: #404343;
    height: 60px;
    margin: 0 auto;
}
.footer .content p a{
    color: white;
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
    display: block;
    line-height: 60px;

}
.right ol li{
    color: #e2da99;
    font-size: 1.1rem;
    line-height: 30px;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

迷迷糊糊的寫了布局，感覺還是不太理解。不太理解布局的區(qū)別，還要繼續(xù)加強(qiáng)學(xué)習(xí)


批改狀態(tài)：合格

老師批語：對于初學(xué)者, 感覺有點(diǎn)難理解是正確 的, 相信, 現(xiàn)在再有人跟你提及這種布局, 你應(yīng)該可以和他聊聊人生了
本博文版權(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
隨時(shí)隨地碎片化學(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é)