CSS 版心和布局

作者: roy_pub | 来源:发表于2018-12-08 20:08 被阅读280次

CSS 版心和布局
CSS-版心和布局
第十三天（css浮动）
经典CSS布局：双飞翼和圣杯布局
css第四节（2）
块状元素和内联元素、盒子模型
CSS基础布局
CSS布局
CSS学习问题
[前端学习]移动web部分学习笔记，第二天

版心（可视区）指网页中的主体内容区域。一般在浏览器中居中显示，显示宽度常见960px,980px,1000px,1200px等。

布局流程

确定页面版心
分析页面中的行模块，以及每一个行模块中的列模块
制作HTML结构
CSS初始化，然后通过盒子模型远离，通过DIV+CSS布局来控制网页每个模块

一列固定宽度且居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
        }

        .top, .banner, .main, .footer {
            background-color: cyan;
        }

        .top {
            height: 80px;
        }

        .banner {
            height: 120px;
            margin: 10px auto;
        }

        .main {
            height: 300px;
            margin: 10px auto;
        }

        .footer {
            height: 80px;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- .top+.banner+.main+.footer 快捷方式 -->
        <div class="top"></div>
        <div class="banner"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </div>
</body>
</html>

左右型结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .container {
            width: 960px;
            margin: 0 auto;
        }

        .top, .banner, .left, .right, .footer {
            background-color: cyan;
        }

        .top {
            height: 80px;
        }

        .banner {
            height: 120px;
            margin: 10px auto;
        }

        .main {
            height: 300px;
            margin: 10px auto;
        }

        .left {
            float: left;
            width: 240px;
            height: 300px;
        }

        .right {
            float: right;
            width: 700px;
            height: 300px;
        }

        .footer {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--.top+.banner+(.main>.left+.right)+.footer-->
        <div class="top"></div>
        <div class="banner"></div>
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

通栏平均分布型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         * {
             margin: 0;
             padding: 0;
         }

        .top {
            background-color: cyan;
            width: 100%;
            height: 80px;
        }

        .top-inner {
            background-color: grey;
            width: 960px;
            height: 80px;
            margin: 0 auto;
        }

        .container {
            width: 960px;
            margin: 0 auto;
        }

        .banner {
            background-color: cyan;
            height: 120px;
            margin: 10px auto;
        }

        .ad {
            width: 960px;
            height: 200px;
            background-color: darkseagreen;
        }

        .ad li {
            float: left;
            width: 225px;
            height: 200px;
            margin-right: 20px;
        }

        .ad .one {
            background-color: orange;
        }

        .ad .two {
            background-color: pink;
        }

        .ad .three {
            background-color: palegreen;
        }

        .ad .four {
            background-color: purple;
            margin-right: 0;
        }

        .footer {
            background-color: cyan;
            height: 80px;
        }

    </style>
</head>
<body>
    <div class="top">
        <div class="top-inner"></div>
    </div>
    <div class="container">
        <div class="banner"></div>
        <div class="ad">
            <ul>
                <li class="one"></li>
                <li class="two"></li>
                <li class="three"></li>
                <li class="four"></li>
            </ul>
        </div>
    </div>
    <div class="footer"></div>

</body>
</html>