Css数据图表
Data visualization is mostly achieved with flash applications or
with help of some programming languages. Are those solutions the only
way to present, let's say simple data chart? How about giving it a try
with nothing but good ol' css?
Take a look at the Demo
| Download Css Chart
Approach
In this example I am not using JavaScript or any backend application. All I rely on is well formed markup and css.
So, the goal is to present data chart. We could say that a chart is a
two dimensional object. So, the best structural and semantical choice
is definition list. Why? Well, for starter, it is a list of items.
Although the list is linear, we could interpret definition titles (dt
elements) as items on x axis and definition descriptions (dd elements)
as values on y axis.
If that doesn't make sense because of my poor explanation skills :) what I'll do here is turn this:
into this
with css alone.
The markup
In my example I have used a period of last 12 days and presented my working energy level in percentages,
100% being the best I've felt about working ever. As you can see, on 6th day it went up a bit because I
received a solid paycheck and that boosted me up :)
Anyway, to structure this kind of data I chose definition list. Definition title contains the day title
<dt>Day 1</dt>
And definition description contains the value
<dd>36</dd>
Inside the definition description element I will add a span and nested em element. Not for structural purposes,
but to give myself enough elements to work with. I will also assign classes that I can use later on.
So definition description looks like this now:
<dd><span class="type2 p80"><em>80</em></span></dd>
Styling it
Definition list contains acts as a chart container, so I'll assign background image to it and set the width and
height to match the dimension of the chart. Also, I'll remove default margins and paddings
dl#csschart
相关文档:
作者:李丽媛
邮箱:lly219@gmail.com
日期:2009-1-12
前言(自说自话)
从初识CSS到现在已经5个年头了。大多是断断续续的,可是近一年来接触颇多,甚有一些些体会。
第一次接触只知道font,color,background,margin,padding等基本知识,乃至连margin、padding都分不清个所以然。
在第一次Web大作业中知道了有&ldq ......
CSS 和 JavaScript 标签 style 属性对照表:
盒子标签和属性对照
CSS语法(不区分大小写) JavaScript语法(区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color bor ......
首先要说的是元素的border,元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。
CSS 边框
在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。
元素外边距内就是元素 ......
转载于 罗马集市
Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下,但是一
般我们不直接调用它们。
那么Magento应用又是如何引用CSS文件的呢 ......
当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:
<input type="text" /> 文本框
<input type="p ......