页面布局基础布局

最新推荐文章于 2021-03-23 22:20:24 发布

十友九

最新推荐文章于 2021-03-23 22:20:24 发布

阅读量240

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106105240

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style type="text/css">
        *{
        margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #666666;
        }
        /*公共类*/
        .inner{
            width: 970px;
            margin: 0 auto;
        }
        .mgb10{
            margin-bottom: 10px;
        }
        /*header*/
        .header{
            overflow: hidden;
        }
        .header .logo{
            float: left;
            width: 277px;
            height: 103px;
            background-color: red;
        }
        .header .lang{
            float: right;
            width: 137px;
            height: 49px;
            background-color: lightgreen;
            margin-bottom: 8px;
        }
        .header .nav{
            float: right;
            width: 679px;
            height: 46px;
            background-color: lightgreen;
        }
        /*content开始*/
        .content{
            overflow: hidden;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .content .slide{
            float: left;
            width: 310px;
            height: 435px;
            background-color: yellow;
        }
        .content .main{
            float: right;
            width: 650px;
        }
        .content .main .top{
            overflow: hidden;
        }
        .content .main .bottom{
            height: 25px;
            background-color: green;
        }
        .content .main .top .left{
            float: left;
            width: 450px;
        }
        .content .main .top .right{
            float: right;
            width: 190px;
            height: 401px;
            background-color: purple;
        }
        .content .main .top .left div{
            height: 240px;
            background-color: lightblue;
        }
        .content .main .top .left div.son2{
            height: 110px;
        }
        .content .main .top .left div.son3{
            height: 30px;
        }
        .footer{
            height: 35px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--header-->
    <div class="header inner">
        <div class="logo"></div>
        <div class="lang"></div>
        <div class="nav"></div>
    </div>
<!--content-->
    <div class="content inner">
        <div class="slide"></div>
        <div class="main">
            <div class="top mgb10">
                <div class="left">
                    <div class="son1 mgb10"></div>
                    <div class="son2 mgb10"></div>
                    <div class="son3"></div>
                </div>
                <div class="right"></div>
            </div>
            <div class="bottom"></div>
        </div>
    </div>
<!--footer-->
    <div class="footer inner"></div>
</body>
</html>