天天看點
傳回

pc端常見布局樣式總結（針對常見的）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 寬度适配 */
            html,
            body {
                width: 100%;
                overflow-x: hidden;/* 外層盒子設定最小寬度的話看不到橫向滾動條 */
            }

            /*1. pc端适配的需求：目前我們pc項目的設計稿尺寸是寬度1920，高度最小是1080。
            2.放大或者縮小螢幕，網頁可以正常顯示 */
            /* 一、兩列布局 */
            /* 1.左定寬 右邊自适應 或者 右邊定寬左邊自适應 */
            .content{
                width: 1200px; /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #fff;
            }
            .left {
                float: left;
                width: 200px;/* 定寬 */
                background: #ccc;
                height: 800px;/* 測試設了一個高度和背景（為了更好看效果） */
            }

            .right {
                margin-left: 100px;
                background: #999;
                height: 800px;/* 測試設了一個高度和背景（為了更好看效果） */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="left">左邊</div>
            <div class="right">右邊</div>
        </div>
    </body>
</html>      
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 寬度适配 */
            html,
            body {
                width: 100%;
                overflow-x: hidden;
                /* 外層盒子設定最小寬度的話看不到橫向滾動條 */
            }
            /* 一、三列布局 */
            /* 1.左右定寬中間自适應 */
            .content {
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: firebrick;/* 測試設了一個背景（為了更好看效果） */
                display: table;
            }

            .left {
                width: 100px;
                /* 定寬 */
                background: #ccc;
                height: 800px;
                /* 測試設了一個高度和背景（為了更好看效果） */
            }
            .right {
                width: 100px;
                /* 定寬 */
                background: fuchsia;
                height: 800px;
                /* 測試設了一個高度和背景（為了更好看效果） */
            }

            .left,
            .right,
            .center {
                display: table-cell;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="left">左邊</div>
            <div class="center">中間</div>
            <div class="right">右邊</div>
        </div>
    </body>
</html>      
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>實作三欄水準布局之雙飛翼布局</title>
        <style type="text/css">
            .container {
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #ccc;
                /* 測試設了一個背景（為了更好看效果） */
            }

            .left,
            .center,
            .right {
                float: left;
                min-height: 400px;
                /* 測試更好觀看效果 統一高度*/
                text-align: center;
            }

            .left {
                margin-left: -100%;
                background: #0000FF;
                width: 200px;
                /* 定寬 */
            }

            .right {
                margin-left: -300px;
                background-color: #FF0000;
                width: 300px;
                /* 定寬 */
            }

            .center {
                background-color: #f2f1f1;
                width: 100%;
            }

            .content {
                margin: 0 300px 0 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            　　<div class="center">
                　　<div class="content">中間自适應</div>
            　  </div>
            　　<div class="left">左邊</div>
            　　<div class="right">右邊</div>
        </div>
    </body>
</html>      
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>實作三欄水準布局之聖杯布局</title>
        <style type="text/css">
            .container {
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #ccc;/* 測試設了一個背景（為了更好看效果） */
                padding: 0 300px 0 200px;
            }

            .left,
            .center,
            .right {
                position: relative;
                min-height: 200px;
                float: left;
            }

            .left {
                left: -200px;
                margin-left: -100%;
                background: green;/* 測試設了一個背景（為了更好看效果） */
                width: 200px;
            }

            .right {
                right: -300px;
                margin-left: -300px;
                background: red;/* 測試設了一個背景（為了更好看效果） */
                width: 300px;
            }

            .center {
                background: blue;/* 測試設了一個背景（為了更好看效果） */
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            　　<div class="center">center</div>
            　　<div class="left">left</div>
            　　<div class="right">right</div>
        </div>
        <div class="tip_expand">雙飛翼布局比聖杯布局多建立了一個div，但不用相對布局了</div>
    </body>
</html>      
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>實作三欄水準布局-Flex布局</title>
        <style type="text/css">
            .container {
                display: flex;
                width: 1200px;
                /* 主容器 */
                min-width: 960px;
                margin: 0 auto;
                background: #ccc;
                /* 測試設了一個背景（為了更好看效果） */
                min-height: 800px;
                font-size: 0; /* 間隙處理 */
            }

            .main {
                flex-grow: 1;
                background-color: blue;
                font-size: 24px;
            }

            .left {
                order: -1;/* 對于order屬性：定義項目的排列順序，越小越靠前，預設為0。 */
                flex-basis: 200px;/* 通過項目屬性flex-basis 設定left和right的固定寬度 */
                background-color: green;
                font-size: 24px;
            }

            .right {
                flex-basis: 300px;/* 通過項目屬性flex-basis 設定left和right的固定寬度 */
                background-color: red;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            　　<div class="main">main</div>
            　　<div class="left">left</div>
            　　<div class="right">right</div>
        </div>
    </body>
</html>
html css 自适應
上一篇: 使用者位置定位
下一篇: thinkphp判斷訪客為手機端或PC端的方法

繼續閱讀