lovestar墨竹
2019-11-06 18:41
采纳率: 100%
浏览 548

HTMLCSS做出如下的九宫格

图片说明
请问大佬这个怎么做,我总是一个颜色覆盖另外一个颜色,我是初学者,好多不明白。求大佬教教啊!万分感谢!最好有成功的代码。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • Big澳 2019-11-06 21:16
    已采纳

    要给父盒子设置宽高

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        .box {
          width: 300px;
          height: 300px;
        }
    
        * {
          margin: 0;
          padding: 0;
        }
    
        .box div {
          width: 100px;
          height: 100px;
          float: right;
        }
    
        .a {
          background-color: red;
        }
    
        .b {
          background-color: pink;
        }
    
        .c {
          background-color: #ccc;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="a"></div>
        <div class="c"></div>
        <div class="a"></div>
        <div class="c"></div>
        <div class="a"></div>
        <div class="b"></div>
        <div class="a"></div>
    </div>
    </body>
    
    </html>
    
    点赞 2 评论
  • 孤芳不自賞 2019-11-06 19:05

    1、写9个div
    2、每3个div,设置宽度之和100%。
    3、给每个div设置不同的颜色。

    点赞 评论
  • 春末里的废墟 2019-11-06 22:57

    你可以试试用dispaly:flex 更多的用法你可以去百度

    点赞 评论

相关推荐 更多相似问题