美女视频来电铃声,后入翘臀美女视频

常見行布局：

導(dǎo)航使用position:fixed固定住

導(dǎo)航會脫離文檔流，不占據(jù)空間

導(dǎo)致下面的元素上移，因此需要將下面的元素的padding-top設(shè)置成導(dǎo)航的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .header{
            width:100%;
            height:50px;
            background:#333;
            color:#fff;
            text-align: center;
            line-height:50px;
            position:fixed;
        }

        .banner{
            width:1200px;
            height:200px;
            margin:0 auto;
            background:#ccc;
            padding-top:50px;
        }
    </style>
</head>
<body>
    <div class="header">導(dǎo)航</div>
    <div class="banner">banner圖</div>
</body>
</html>

如果行高的單位是百分比，那么是基于當(dāng)前字體尺寸的百分比行間距

經(jīng)典的兩列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }

        .header{
            width:100%;
            height:60px;
            background:#000;
            color:#fff;
            line-height:60px;
            position:fixed;
        }
    
        .logo img{
            float:left;
            margin-left:20px;
        }

        ul{
            list-style:none;
            float:right;
            margin-right:20px;
        }
        
        ul li{
            float:left;
            margin-right:20px;
        }

        ul li a{
            text-decoration: none;
            color:#fff;
        }

        .container{
            width:100%;
            height:400px;
            background:rgb(173,216,230);
            padding-top:150px;
        }

        .left{
            width:35%;
            float:left;
            padding-left:15%;
        }

        .right{
            width:35%;
            float:right;
            padding-left:15%;
        }

        .left h1,
        .right h1{
            font-size:20px;
            margin-bottom:10px;
        }

        .item{
            height:40px;
            line-height:40px;
        }

        .item span{
            background:rgb(201,98,79);
            margin-right:2em;
            color:#fff;
        }

        .footer{
            width:100%;
            height:60px;
            background:#333;
            color:#fff;
            text-align: center;
            line-height:60px;
        }

        .footer span{
            margin-right:30px;
        }

        .footer span:last-child{
            margin-right:0;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"><img src="cat-little.jpg" alt="logo" height="60px"></div>
        <ul>
            <li><a href="#">導(dǎo)航1</a></li>
            <li><a href="#">導(dǎo)航2</a></li>
            <li><a href="#">導(dǎo)航3</a></li>
            <li><a href="#">導(dǎo)航4</a></li>
            <li><a href="#">導(dǎo)航5</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="left">
            <h1>推薦哦</h1>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現(xiàn)動態(tài)網(wǎng)頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現(xiàn)動態(tài)網(wǎng)頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現(xiàn)動態(tài)網(wǎng)頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現(xiàn)動態(tài)網(wǎng)頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現(xiàn)動態(tài)網(wǎng)頁
            </div>
        </div>
        <div class="right">
            <h1>其他相關(guān)</h1>
            <div class="item">
                HTML  CSS  JavaScript
            </div>
            <div class="item">
                HTML  CSS  JavaScript
            </div>
            <div class="item">
                HTML  CSS  JavaScript
            </div>
        </div>
    </div>
    <div class="footer">
        <span>友鏈</span>
        <span>友鏈</span>
        <span>友鏈</span>
        <span>友鏈</span>
        <span>友鏈</span>
    </div>
</body>
</html>

圖文混排使用：dl dt dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }

        .container{
            background:#ccc;
        }

        .content{
            width:1000px;
            margin:0 auto;
        }

        dl{
            width:300px;
            float:left;
            text-align:center;
            margin-right:50px;
        }

        dl:last-child{
            margin-right:0;
        }

        dl img{
            width:300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <dl>
                <dt><img src="cat.jpg"></dt>
                <dd>這是一段關(guān)于圖片的簡要描述</dd>
            </dl>
            <dl>
                <dt><img src="cat.jpg"></dt>
                <dd>這是一段關(guān)于圖片的簡要描述</dd>
            </dl>
            <dl>
                <dt><img src="cat.jpg"></dt>
                <dd>這是一段關(guān)于圖片的簡要描述</dd>
            </dl>
        </div>
    </div>
</body>
</html>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频