利用盒子模块搭建色块页面布局_用html和css做出色块-优快云博客

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

效果图

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/03.css">
</head>
<body>
  <!-- 大盒子 -->
  <div class="bigbox">
    <!-- 第一部分 -->
    <div class="dfirst">
      <div class="dfirst1"></div>
      <div class="dfirst2"></div>
      <div class="dfirst3"></div>
    </div>

    <!-- 第二部分 -->
    <div class="dsecond">
      <div class="dsecond1"></div>
      <div class="dsecond2">
      轮播图
      </div>
      <div class="dsecond3"></div>
    </div>

    <!-- 第三部分 -->
    <div class="dthird">
      <div class="dthird1"></div>
      <div class="dthird2"></div>
      <div class="dthird3"></div>
      <div class="dthird4"></div>
      <div class="dthird5"></div>
    </div>

    <!-- 第四部分 -->
    <div class="dfourth">
      <div class="dfourth1"></div>
      <div class="dfourth2">
        <div></div>
        <div></div>
        <div></div>        
      </div>
      <div class="dfourth3"></div>
      <div class="dfourth4"></div>
    </div>

    <!-- 第五部分 -->
    <div class="dfifth">
      <div class="dfifth1"></div>
      <div class="dfifth2"></div>
      <div class="dfifth3" ></div>
    </div>
  </div>
</body>
</html>

css部分

*{
  margin: 0;
  padding: 0;
}
.bigbox{
  width: 1516px;
  height: 1151px;

  background-color: pink;
}
/* 第一部分 */
.dfirst{
  height: 70px;
  background-color: red;
}
.dfirst>div{
  height: 70px;
  float: left;
}
.dfirst1{
  width: 212px;
  background-color: #00A2E8;
}
.dfirst2{
 width: 993px;
 background-color: #fff222;
}
.dfirst3{
  width: 311px;
  background-color: #00A2E8;
}
/* 第二部分 */
.dsecond>div{
  height: 339px;
  float: left;
}
.dsecond1{
  width: 212px;
  background-color: #ffffff;
}
.dsecond2{
  width: 993px;
  background-color: blue;

  text-align: center;
  line-height: 330px;

  font-size: 90px;
  font-weight: bold;
}
.dsecond3{
  width: 311px;
  background-color: #ffffff;
}
/* 第三部分 */
.dthird>div{
  height: 86px;
  float: left;
}
.dthird1{
  width:212px ;
  background-color: #3c3c3c;
}
.dthird2{
  width:310px ;
  background-color:#a349a4 ;
}
.dthird3{
  width:342px ;
  background-color: #ed1c24;
}
.dthird4{
  width:340px ;
  background-color: #fff200;
}
.dthird5{
  width:311px ;
  background-color: #3c3c3c;
}

/* 第四部分 */
.dfourth>div{
  height: 440px;
  float: left;
}
.dfourth1{
  width:212px ;
  background-color: #ffffff;
}
.dfourth2{
  width: 315px;
  background-color:#b97a57 ;
}
.dfourth2>div{
  width: 270px;
  height: 90px;
  background-color: #ff7f27;

  margin-top: 24px;
  margin-left: 20px;
}
.dfourth3{
  width:680px ;
  background-color:#c8bfe7 ;
}
.dfourth4{
  width: 309px;
  background-color:#ffffff ;
}

/* 第五部分 */
.dfifth>div{
  height: 216px;
  float: left;
}
.dfifth1{
  width:212px ;
  background-color:#171717 ;
}
.dfifth2{
  width:993px ;
  background-color:#00a2e8 ;
}
.dfifth3{
  width:311px ;
  background-color:#171717 ;
}