利用盒子模块搭建色块页面布局

最新推荐文章于 2025-05-23 09:16:47 发布

星星小团

最新推荐文章于 2025-05-23 09:16:47 发布

阅读量109

点赞数

文章标签： tensorflow 人工智能 python

本文链接：https://blog.youkuaiyun.com/2301_79726309/article/details/134616500

版权

效果图

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/01.css">
</head>
<body>
  <!-- 大盒子 -->
  <div class="bigbox">
    <!-- 第一部分 -->
    <div class="dfirst">
      <div></div>
    </div>
    <!-- 第二部分 -->
    <div class="dsecond">
        <!-- 左侧 -->
        <div class="dsecondlef"></div>
        <!-- 右侧 -->
        <div class="dsecondrig">
          <!-- 上部 -->
          <div class="dsecondrigT">
            <div></div>
          </div>
          <!-- 下部 -->
          <div class="dsecondrigD">
            <div class="D1"></div>
            <div class="D2"></div>
            <div class="D3"></div>
          </div>
        </div>
    </div>
  </div>
</body>
</html>

css部分

*{
  margin: 0;
  padding: 0;
}
.bigbox{
  width: 1012px;
  height: 605px;
  /* background-color: aqua; */
}
/* 第一部分 */
.dfirst{
  width: 1012px;
  height: 75px;
  /* background-color: antiquewhite; */
}
.dfirst>div{
  width: 962px;
  height: 43px;
  background-color: #EDEDED;

  margin-top: 20px;
  margin-left: 22px;
}

/* 第二部分 */
.dsecond{
  width: 1012px;
  height: 509px;
  /* background-color: aquamarine; */
}
/* 左侧 */
.dsecondlef{
  width: 234px;
  height: 459px;
  background-color: #EDEDED;

  margin-top: 30px;
  margin-left: 22px;

  float: left;
}

/* 右侧 */
.dsecondrig{
  width: 734px;
  height: 509px;
  /* background-color: pink; */

  float: left;

  margin-left: 20px;
}
/* 右侧上部 */
.dsecondrigT{
  width: 734px;
  height: 130px;
  /* background-color: blueviolet; */
}
.dsecondrigT>div{
  width: 686px;
  height: 103px;
  background-color: #EDEDED;

  margin-top: 30px;
  margin-left: 22px;
}
/* 右侧下部 */
.dsecondrigD{
  width: 734px;
  height: 346px;
  /* background-color: burlywood; */
}
.D1{
  width: 230px;
  height: 296px;
  background-color: #EDEDED;

  margin-left: 22px;
  margin-top: 30px;
  float: left;
}
.D2{
  width: 384px;
  height: 128px;
  background-color: #EDEDED;

  margin-top: 30px;
  margin-right: 22px;
  float:right;
}
.D3{
  width: 384px;
  height: 128px;
  background-color: #EDEDED;
  
  margin-top: 30px;
  margin-right: 22px;

  float: right;
}