222wan

导航

html18 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>另一种</title>
    <style>
        * {
            margin: 0;
            padding:0;
        }
        .box {
            width: 1226px;
            height: 615px;
            background-color: cornflowerblue;
            margin: 100px auto;
        }
        .left {
            width:234px ;
            height: 615px;
            float: left;
            background-color: darkgoldenrod;
        }
        .right {
            width: 992px;
            height: 615px;
            background-color: darkolivegreen;
            float: right;
        }
        li {
            list-style: none;/*去除小li的圆点形式*/
        }
        .right ul li {
            width: 234px;
            height: 300px;
            background-color:rgb(146, 146, 175) ;
            float: left;
            margin-left: 14px;/*这里我们为什么要只设置左侧外边距，观察我们案例的图片可以看到在
            在右盒子的每一个小盒子都距离左边有一个外边距，这一点要细心观察，
            如果说我们像上一个例子一样给所有加上外边距那最后一个盒子就要涉及到取消外边距比较麻烦
            */
            margin-bottom: 14px;/*这里也是同理我们要多观察案例中的图片找到最合适的方法去写*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left">就放一张图片就行</div>
    <div class="right">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</div>
</body>
</html>

今天是另一种盒子模型的案例：

只做出大体框架内容不加填充，

代码中的注释大家要多看

 

posted on 2023-06-24 01:00  角落的蘑菇  阅读(10)  评论(0)  编辑  收藏  举报