css的網頁布局案例

本文轉載自查看原文 2020-02-01 13:41 223 css

常見行布局：

導航使用position:fixed固定住

導航會脫離文檔流，不占據空間

導致下面的元素上移，因此需要將下面的元素的padding-top設置成導航的高度

<!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">導航</div>
    <div class="banner">banner圖</div>
</body>
</html>

如果行高的單位是百分比，那么是基於當前字體尺寸的百分比行間距

經典的兩列布局

<!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="#">導航1</a></li>
            <li><a href="#">導航2</a></li>
            <li><a href="#">導航3</a></li>
            <li><a href="#">導航4</a></li>
            <li><a href="#">導航5</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="left">
            <h1>推薦哦</h1>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現動態網頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現動態網頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現動態網頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現動態網頁
            </div>
            <div class="item">
                <span>此乃路徑</span>
                html5與css3實現動態網頁
            </div>
        </div>
        <div class="right">
            <h1>其他相關</h1>
            <div class="item">
                HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript
            </div>
            <div class="item">
                HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript
            </div>
            <div class="item">
                HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;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>這是一段關於圖片的簡要描述</dd>
            </dl>
            <dl>
                <dt><img src="cat.jpg"></dt>
                <dd>這是一段關於圖片的簡要描述</dd>
            </dl>
            <dl>
                <dt><img src="cat.jpg"></dt>
                <dd>這是一段關於圖片的簡要描述</dd>
            </dl>
        </div>
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 網頁簡單布局之結構與表現原則案例 CSS—網頁布局（標准流，浮動流） 25佳優秀的流體和響應式布局網頁設計案例 Css時間軸布局_Css時間軸布局案例整理 [CSS屬性設置，盒子模型，網頁布局] DIV+CSS網頁標准化布局(一） css實現三欄網頁布局的五種方式深入理解CSS網頁布局-理論篇 CSS基礎(滑動門，雪碧圖，網頁布局）一個簡單的模板了解css+div網頁布局