css的網頁佈局案例_ZenDei技術網路在線

css的網頁佈局案例

-Advertisement-

常見行佈局：導航使用position:fixed固定住導航會脫離文檔流，不占據空間導致下麵的元素上移，因此需要將下麵的元素的padding-top設置成導航的高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t ...

常見行佈局：

導航使用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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

jQuery---事件的執行順序

事件的執行順序 // 1 這個是p自己註冊的事件（簡單事件） $("p").on("click", function () { alert("呵呵噠"); }); // 2 給div自己執行的 $("div").on("click", function () { alert("嗚嗚嗚"); }); ...
jQuery---on註冊事件的2種方式

on註冊事件的2種方式 on註冊事件的語法 on註冊簡單事件 // 這個是p自己註冊的事件（簡單事件） $("p").on("click", function () { alert("呵呵"); }); $("#btn").on("click", function () { $("<p>我是新建的p ...
讓我們純手寫一個js繼承吧

繼承在前端邏輯操作中是比較常見的，今天我們就從零開始寫一個js的繼承方式在es5中繼承實質上是先創建子類的實例對象，然後再將父類的方法添加到this上Parent.call(this)，在es6中則是先創建父類的實例對象this調用父類的super()，然後再用子類的構造函數修改this，所以無論 ...
HTML5中input新增類型+表單新增屬性+其他標簽屬性

@ （猴頭） Input 新增屬性 email 郵箱（只在手機端有效） url 網址（只在iphone手機有效） tel 手機號（只在手機端有效） number 數字（右側有上下按鈕，只能輸入數字，+號，-號，. 和e） input 日期時間（手機端效果比較好） date 年月日 time 小時和分 ...
CSS中before、after偽類選擇器的巧用

大家好，今天給大家帶來使用css中 before 、 after 實現兩個效果，話不多說，我們先來看看， before 和 after 它們的作用是什麼選擇器作用 before 向選定的元素前插入內容 after 向選定的元素後插入內容作用描述簡單也容易理解，就是在指定的元素前面或者後面添加額 ...
vue(七)--監聽屬性（watch）

1.watch：用來監聽每一個屬性的變化 2.watch這個對象裡面都是函數，函數的名稱是data中的屬性名稱，watch中的函數不需要調用 3.當屬性發生改變那麼就會觸發watch函數，每個函數都會接受兩個值，一個是新值，一個是舊值 4.我們可以在watch當中就行新舊值的判斷來減少虛擬dom的渲 ...
HTML5文檔類型如何定義，有哪些標簽，以及如何使用，從整體認識HTML5

html5新增結構標簽 header 頭部 nav 導航 section 區域 article 文章 aside 側邊欄 figure 一組多媒體內容 figcaption 多媒體內容的標題 footer 底部 hgroup 區塊的相關信息 dialog 對話框 / 會話框 sublime安裝emm ...
vue(六)--計算屬性（computed）

計算屬性關鍵詞: computed demo1: <div id="app"> <p>原始字元串: {{ message }}</p> <p>計算後反轉字元串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#ap ...