使用html5的语意化标签和CSS的box-sizing进行一个经典网页布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典布局</title>
    <style>
        html {
            /*将整个页面和盒子设置为内减模式,原先默认的是content-box是外加模式,当你添加margin、padding、border的时候都会将原来的父盒子撑大,对布局进行很多计算(如果粗心漏掉一个计算就会出不来效果,修修改改越来越烦),而使用内减模式,就不需要这些复杂的计算*/
            box-sizing: border-box;
        }
         *, *:before, *:after {
            margin: 0;
            padding: 0;
            /*去除默认边距的同时让所有元素继承html的box-sizing*/
            box-sizing: inherit;
        } 
        body{
            background-color: #ccc;
            margin: 0 auto;
            text-align: center;
            color:#fff;
            
        }
        /*使用html5里面的相关标签*/
        header{
            background-color: #333;
            height: 50px;
            padding-top: 10px;
        }
        nav{
            width: 80%;
            height: 30px;
            line-height: 30px;  
            margin: 0 auto;
            /*padding-top: 10px;*/
            background-color: #bababa;
        }
        .container{
            width: 80%;
            margin: 0 auto;
            /*由于内部内容的浮动,会对后期的修改造成影响,这里设置最小的高度来清除浮动的影响*/
            min-height: 500px;      
        }
        section{
            background-color: #30a453;
            height: 500px;
            width: 70%;
            float: left;
        }
        aside{
            background-color: #4c77f2;
            height: 500px;
            width: 30%;
            float: right;
        }
        footer{
            background-color: #333;
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <header>
        <nav>我是nav标签</nav>
    </header>

    <div class="container">
        <section>
            <h4>这里是section</h4>
            <p>我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容</p>
        </section>

        <aside>这里是侧边栏</aside>
    </div>

    <footer>
        <p>footer区域</p>
    </footer>
</body>
</html>
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容