布局案例

最新推荐文章于 2022-05-26 13:33:44 发布

原创最新推荐文章于 2022-05-26 13:33:44 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端、Java 专栏收录该内容

31 篇文章

订阅专栏

本文通过实例讲解了如何使用CSS进行布局设计，强调了通过设置不同元素的左右margin来实现精准布局的方法，并提及了权重在布局中的作用。

首先每个都设置左右margin，然后，最左最右再分别设置相应的margin为none，更详细的名称，权重也会更大

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>布局框架</title>
        <style>
            *{
                margin: 0;/*将所有的元素边距都设置为0*/
                padding: 0;
            }
            #header{
                height: 50px;
                background:#E83828;
            }
            #header .head{
                width: 1005px;
                height: 50px;
                margin: auto;
            }
            #banner{
                height: 500px;
                background: slateblue;
            }
            #category{
                width: 1005px;
                height: 200px;
                margin: auto;
                background: pink;
            }
            #category .item{
                width: 125px;
                height: 165px;
                padding-left: 25px;
                padding-right: 25px;
                padding-top: 10px;
                padding-bottom: 25px;
                border-right: 1px dashed black;
                float: left;
            }
            #category .item.first{
                padding-left: 0;
            }
            #category .item.last{
                padding-right: 0;
                border: 0;
            }
            #case{
                height: 490px;
                background: #eeeeee;
            }
            #case .title-text{
                width: 1005px;
                margin: auto;
                padding-top: 20px;
                padding-bottom: 10px;
            }
            #case .item-wrapper{
                width: 1000px;
                margin: auto;
                overflow: auto;
            }
            #case .item-wrapper .item{
                width: 320px;
                height: 330px;
                background-color: #9ACD32;
                float: left;
            }
            #case .item-wrapper .item.mg{
                margin-left: 20px;
                margin-right: 20px;
            }
            #case p{
                width: 1005px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 15px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 30px;
                color: dimgrey;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <div class="head"></div>
        </div>
        <div id="banner"></div>
        <div id="category">
            <div class="item first"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item last"></div>
        </div>
        <div id="case">
            <div class="title-text">
                Case
            </div>
            <div class="item-wrapper">
                <div class="item"></div>
                <div class="item mg"></div>
                <div class="item"></div>
            </div>
            <p>查看更多+</p>
        </div>
    </body>
</html>