mzldustu 2019-11-06 18:41 采纳率: 100%
浏览 759
已采纳

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条)

报告相同问题？

  • 九宫格视频监控Vue前端界面布局
    2022-02-17 11:22
    mxgsa的博客 最近做项目要用到是监控界面，需要九宫格的，之前html的时候做过类似的，现在用vue来做，感觉也不是太难，就做出来，具体效果如下： 具体代码： 1 4 6 8 9 12 变倍 聚焦 光圈 截图 关闭 具体页面还需要优化，整体的...
  • 基于Vue.js的移动端九宫格抽奖应用实战
    2025-06-01 17:20
    别蹭我的Wifi的博客 实现九宫格布局的方法多种多样，其中最流行的是使用CSS的flexbox布局和CSS网格布局。 3.1.1 flex布局在九宫格中的应用 Flexbox布局是CSS3的一部分，提供了一种更灵活的方式来排列、对齐和分配容器内的项目空间。下面...
  • HTML5和CSS3 WEB技术开发
    2023-01-02 21:27
    teayear的博客 B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本...
  • 九宫格抽奖转盘源码分析
    2019-09-21 22:44
    angjiu8534的博客 效果如上图所示，下面对其实现代码进行分析，看能不能破解其抽奖规则。需要引入jquery-1.8.3.min.js和images/9张图片。...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3...
  • HTML+CSS实现九宫格悬停延伸特效项目实战
    2025-10-27 01:06
    九门提督守皇上的博客 九宫格布局的HTML结构与CSS基础实现 在现代前端开发中，九宫格布局不仅是UI设计中的常见模式，更是一种兼具美学平衡与功能扩展性的结构范式。从移动端应用图标排列、图片画廊展示到交互式导航面板，九宫格以其对称...
  • 如何利用html和css布局,最全Html和CSS布局技巧
    2021-06-13 06:47
    weixin_39542477的博客 } 2.6九宫格布局 2.6.1 使用table实现 html: css: .parent{display:table;table-layout:fixed;width:100%;} .row{display:table-row;} .item{display:table-cell;width:33.3%;height:200px;} 2.6.2 实用flex实现 ...
  • HTML5九宫格拼图游戏开发指南
    2025-07-10 02:57
    亿风行的博客 本文还有配套的精品资源，点击获取 简介：HTML5九宫格拼图游戏是一个在线益智游戏，它使用CSS3和JavaScript创建交互式的图形界面和逻辑控制。本指南将介绍游戏的关键技术要点，包括Canvas图形绘制、JavaScript逻辑...
  • HTML5九宫格拼图游戏PuzzlGame项目实战
    2025-09-16 20:59
    92sweetie的博客 九宫格拼图游戏的核心原理基于3x3矩阵布局，其中8个格子显示图像片段，1个为空白格，通过移动相邻格子至空白位置实现图像重组。该机制涉及矩阵运算、状态判断与路径记录等逻辑。游戏通过空白格位置检测可移动区域，...
  • 前端九宫格抽奖系统源码实战项目
    2025-10-28 05:33
    南城游子的博客 九宫格界面的HTML结构与CSS3动态样式实现 在现代前端开发中，构建一个视觉吸引且交互流畅的九宫格抽奖系统，不仅依赖于JavaScript逻辑控制，更离不开扎实的HTML语义化结构和强大的CSS3样式支持。本章节深入剖析如何...
  • 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
    2021-12-12 23:40
    jason的java世界的博客 1.2.1前端 1.2.2后台 1.2.3 浏览器 1.3 纯文本和超文本的使用 1.4 开发工具的使用 1.4.1常见开发工具简介 1.4.2 Visual Studio Code 1.4.3 编写第一个HTML文件 1.5 HTML骨架 1.5.1 DTD 1.5.2 html标签 1.5.3 字符集 ...
  • 没有解决我的问题, 去提问