web开发之布局

最新推荐文章于 2023-09-13 15:26:55 发布

i want to舞动乾坤

最新推荐文章于 2023-09-13 15:26:55 发布

阅读量191

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_52924633/article/details/120432526

版权

以小米商城布局：

此盒子的做法：

分为三个区域：大盒子，左盒子，右盒子。其中大盒子作为父级盒子，不对它进行添加浮动，左盒子和右盒子要进行添加浮动，使其在父级盒子内展示，接着测量父级盒子宽度，高度，左侧宽度。再拿父级盒子减去左盒子可得到右侧宽度。在右侧盒子中又有了八个小盒子，这里可以用div也可以用ul li进行实现这里我采用div实现，而后测量每个小盒子的宽度，高度。我们在这个图中可以观察到盒子之间还有范围，那么这里分别测量左和右盒子宽度而不一个一个进行测量，再用margin-left:盒子之间的距离；即可分割。最后再用margin-bottom:盒子之间距离即可实现，用这种方法不会出现盒子跑到父级盒子外面。

代码模型：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        .box {
            width: 1225px;
            height: 611px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .box .left {
            width: 233px;
            height: 611px;
            float: left;
            background: #000;
        }
        
        .box .right {
            width: 992px;
            height: 611px;
            float: right;
            background: red;
        }
        
        .right>div {
            width: 234px;
            height: 300px;
            float: left;
            background: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>

</body>

</html>

网页常用的整体布局：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .top {
            height: 50px;
            background: gray;
        }
        
        .banner {
            width: 980px;
            height: 150px;
            margin: 10px auto;
            background: gray;
        }
        
        .box {
            background: pink;
            width: 980px;
            height: 300px;
            margin: 0 auto;
        }
        
        li {
            list-style: none;
        }
        
        .box li {
            width: 237px;
            height: 300px;
            float: left;
            background: gray;
            margin-right: 10px;
        }
        
        .box .last {
            margin: 0;
        }
        
        .footer {
            height: 200px;
            margin-top: 10px;
            background: gray;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>



</body>

</html>