手机模块布局案例

最新推荐文章于 2024-09-18 15:13:40 发布

爱吃火锅的小boy

最新推荐文章于 2024-09-18 15:13:40 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.csdn.net/weixin_42900834/article/details/124696347

本文详细解析了网页布局的两种常见方式：标准流中的上下盒排列和浮动布局下的左右盒子布局，通过实例代码演示了如何设置盒子大小和位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页布局第一准测：标准流设置上下盒子排列，浮动设置左右盒子排列

网页布局第二准测：先设置盒子大小，之后设置盒子的位置

代码：

<!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>浮动布局练习2</title>
    
    <style>
     
     /* 整个盒子大小 */
     .box{
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }        

        /* 左盒子 */
    .left{
             /* 左对齐 */
            float: left;
            width: 234px;
            height: 615px;
            background-color:purple;
            }


        /* 右盒子 */
     .right{
            /* 左对齐 */
            float:left;  
            width: 992px;
            height: 615px;
            background-color: skyblue;
           }
       
    /* 子代选择器 */ 
    .right>div{ 
     
         float: left;
         width: 234px;
         height: 300px;
         background-color: pink;
         /* 从第一个盒子开始留出左边14像素的距离 */
         margin-left: 14px;
         /* 从第一个盒子开始留出下边14像素的距离 */
         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>

运行效果