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

時間  2019-11-16
標籤 常見 佈局 樣式 總結 針對 常見的 简体版
原文   原文鏈接 
<!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、兩列布局 */
            /* 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、三列布局 */
            /* 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程