易截截图软件、单文件、免安装、纯绿色、仅160KB

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


相关文档:

笑谈IE系列6.0到8.0网站CSS兼容

方法超级简单三句话:
第一:做网站用IE7.0,这个版本是最标准的版本。先不要管别的浏览器是否兼容。
第二:网站做完,好了用IE6.0,IE8.0测试一下,好了,IE6.0有小部分变动,IE8.0惨目人睹,现在先来解决IE6.0的问题
         IE6.0是现在最烂最垃圾的浏览器版本,o(︶ ......

JSP页面中无法显示CSS中的背景图片

jsp页面调用 <link type="text/css" rel="stylesheet" href="css/style.css"/>样式表
其他样式都可以再页面正常显示
.button-qingchu{background:url(images/qingchu.jpg); width:70px; height:30px; border:0px;} 像这样的背景图片样式就显示不出图片是什么问题! Myeclipse 6.5
在html中都可以显示 在jsp中显示 ......

Jquery input控件的CSS控制

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
</head>
<style>
.lastp{bord ......

CSS: z index 取值范围


原理:
当两个同父元素z-index相同时,后面的元素显示在上面。
当z-index超过浏览器最大值时,浏览器会按最大值计算。
方法:
连续放置两个div元素d1,d2;并设定position:absolute及不同背景色。
设定d1.z-index = max + 1, d2.z-index = max;
当max + 1有效时,d1在前;当max + 1 无效时,d2在前。(参看原理) ......

Magento 集成css文件到页面文件中

转载于 罗马集市
Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下,但是一
般我们不直接调用它们。
那么Magento应用又是如何引用CSS文件的呢 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号