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>

 

 

 

posted @ 2019-02-13 15:21  鱼樱前端  阅读(7110)  评论(0编辑  收藏  举报