用CSS画矩形统计表(cad怎么画矩形)

矩形统计表,就是通过矩形形状形象地表达出数据间的数量,关系。用CSS能否处理得了呢?
其实不难,画矩形其实就是一个DIV加上背景色就行了。下面一起看下。

操作方法

  • 01

    首先我们看下,一个简单的矩形,在Html,css里,是怎样画出来的? html就是一个简单的div,如图

  • 02

    看下,css样式,我们设置了高度,宽度,和背景色,

  • 03

    看下效果,就是一个标准的长方形矩形。

  • 04

    我们可以通过修改长度,宽度来改变矩形的形状大小,也可以通过修改背景色来改变颜色,如图:

  • 05

    我们接着做一个完整的应用矩形的例子,矩形统计表, html的代码如图, 样式class为jx的div就是矩形图,不同的高度由height来决定,颜色由背景色background-color决定,关键就这二点,其他没什么特别的地方。

  • 06

    再看下css代码的定义,如图, css上也没什么特别的地方,矩形div 我们设置 display: inline-block; 让他们并行排列,而不是一行一个。

  • 07

    最后看下效果图,很标准的统计图。 数据改动也很方便把高度,颜色修改下就行。下次写个JS脚本,根据数据自动生成矩形的方法:)

Unity3D软件如何下载?
« 上一篇 2024-10-13 19:03
cad2010如何设置经典工作空间?(cad2010调成经典模式)
下一篇 » 2024-10-13 19:03