大哥是我111 2021-12-21 19:32 采纳率: 0%
浏览 34

css浮动 3*3的 如何使用百分数

想知道这个怎么写，一个框内怎么设置出几种不同颜色

img

  • 写回答

2条回答 默认 最新

  • CSDN专家-文盲老顾 2021-12-21 20:56
    关注

    因为没有颜色表，所以我直接用随机颜色来填充了

    
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    div {display:flex;}
    .example-box div {flex:1;}
    .column {flex-direction:column;}
  </style>
 </head>
 <body>
  <div style="height:100vh;width:100%;justify-content:center;align-items:center;">
    <div style="width:400px;height:400px;" class="example-box column">
        <div>
            <div class="column">
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div></div>
        </div>
        <div>
            <div>
                <div class="column">
                    <div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
            <div></div>
            <div></div>
        </div>
        <div>
            <div></div>
            <div></div>
            <div class="column">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
  </div>
  <script>
    var els = document.querySelectorAll('.example-box div');
    for(var i=0;i<els.length;i++){
        els[i].style.background = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
    }
  </script>
 </body>
</html>

    img

    评论

报告相同问题？

  • 【CSS + CSS3】前端八股文面试题
    2024-08-26 10:00
    菜鸟una的博客 【CSS + CSS3】前端八股文面试题 3.【JavaScript + ES6】前端八股文面试题 4.【jQuery】前端八股文面试题 5.【Vue2 + Vue3】前端八股文面试题 6.【Uniapp】前端面试题 7.【HTTP、Web常用协议等等】前端八股文面试题 ...
  • Web - CSS3浮动定位与背景样式
    2025-02-04 17:43
    stark张宇的博客 这篇文章主要介绍了 CSS3 中的浮动定位、背景样式、变形效果等内容。包括 BFC 规范与创建方法、浮动的功能与使用要点、定位的多种方式及特点、边框与圆角的设置、背景的颜色、图片等属性、多种变形效果及 3D 旋转等...
  • 前端学习--H5+CSS3部分
    2023-11-15 18:38
    AGW.的博客 主要介绍HTML5和CSS3的新特性。本文是根据pink老师前端web全套课程，如果有不理解的地方请移步到B站查找并观看相应课程。
  • Web前端开发技术——HTML5、CSS3、JavaScript
    2025-04-22 22:00
    666HZ666的博客 Web前端开发技术——HTML5、CSS3、JavaScript
  • 前端之css3
    2023-07-09 19:38
    程序媛刘刘的博客 1 新增实用的选择器，例如动态伪类，目标伪类，伪元素2 新增更好的视觉效果3 新增丰富的背景效果4 新增全新的布局方案5 新增web字体6 新增颜色，hsl，hsla，rgba7 新增2D和3D变换8 新增动画和过渡效果。
  • CSS3-第四部分-浮动
    2022-03-21 20:55
    人性背后-白云苍狗的博客 后来随着页面的提升，人们发现，使用浮动技术，可以用来帮助页面布局，所以浮动又有了一些新的作用，比如 可以使用浮动，让无序列表从纵向排列变成横向排列等等。 2，文档流 我们的页面布局实在不做任何样式定位，...
  • 3.CSS3基础入门【Web前端学习笔记】
    2025-07-25 21:35
    少侠PSY的博客 CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表CSS文件后缀名为.cssCSS用于HTML文档中元素样式的定义float属性定义元素在哪个方向浮动，任何元素都可以浮动。值描述left元素向左浮动right...
  • 前端面试高频考点HTML5+CSS3
    2023-06-09 11:19
    参宿7的博客 transform旋转，缩放，平移⭐⭐ 修改 CSS 坐标空间，实现旋转，缩放，倾斜或平移 默认相对元素的中心点 Css3 Transform 各种变形旋转 | 菜鸟工具 position关键字⭐⭐⭐ static（默认） 该关键字指定元素使用正常的...
  • 前端HTML5+CSS3学习笔记
    2021-11-17 17:57
    Baucc的博客 前端HTML5+CSS3学习笔记
  • 2024最新css3面试题理论，前端css面试题，移动端面试题理论。
    2024-12-19 19:38
    2401_89740557的博客 Flex 是 Flexible Box 的缩写，意为”...****px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。19、什么是媒体查询。在pc端中，视口指的是在pc端中浏览器的可视区域；
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 12月21日