一个简单的网页布局

最新推荐文章于 2022-04-08 12:47:33 发布

小奔跳跳

最新推荐文章于 2022-04-08 12:47:33 发布

阅读量618

点赞数

分类专栏： PC端页面

本文链接：https://blog.csdn.net/qq_35367566/article/details/99630608

版权

PC端页面专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一个简单的网页布局

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .header{
                height: 80px;
                width: 970px;
                margin: 0 auto;
                margin-bottom: 10px;
            }
            .header .logo{
                float: left;
                height: 80px;
                width: 270px;
                background-color: red;
            }
            .header .nav{
                float:right;
                height: 42px;
                width: 680px;
                background-color: yellowgreen;
                margin-top: 8px;
            }
            .header .language{
                float:right;
                height: 30px;
                width: 137px;
                background-color: yellowgreen;
            }
            .content{
                height: 435px;
                width: 970px;
                margin: 0 auto;
            }
            .content .ad{
                float:left;
                width: 310px;
                height: 435px;
                background-color: blue;
            }
            .content .content_right{
                float:left;
                height: 435px;
                width: 660px;
            }
            .content .content_right .top{
                height: 400px;
                width: 660px;
            }
            .content .content_right .top .content_r2{
                margin-left: 10px;
                float: right;
                width: 190px;
                height: 400px;
                background-color: pink;
            }
            .content .content_right .top .content_r1{
                float: left;
                width: 450px;
                height: 400px;
                margin-left: 10px;
            }
            .content .content_right .top .content_r1 .news{
                width: 450px;
                height: 240px;
                background-color:orange;
            }
            .content .content_right .top .content_r1 .info{
                margin-top: 10px;
                width: 450px;
                height: 110px;
                background-color: orange;
            }
            .content  .content_right .top .content_r1 .hot{
                margin-top: 10px;
                width: 450px;
                height: 30px;
                background-color: orange;
            }
            .content .content_right .link{
                width: 650px;
                height: 25px;
                background-color: forestgreen;
                margin-top: 10px;
                margin-left: 10px;
            }
            .footer{
                width: 970px;
                height: 35px;
                margin: 0 auto;
                background-color: skyblue;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <!--头部部分开始-->
        <div class="header">
            <div class="logo"></div>
            <div class="language"></div>
            <div class="nav"></div>
        </div>
        <!--头部部分结束-->
    
        <!--内容部分开始-->
        <div class="content">
            <div class="ad"></div>
            <div class="content_right">
                <div class="top">
                    <div class="content_r1">
                        <div class="news"></div>
                        <div class="info"></div>
                        <div class="hot"></div>
                    </div>
                    <div class="content_r2"></div>
                </div>
                <div class="link"></div>
            </div>
        </div>
        <!--内容部分开始-->
    
        <!--页脚部分开始-->
        <div class="footer"></div>
        <!--也叫部分结束-->
    </body>
    </html>