css给你灵感--css动态图表设计大全

午梅2008-07-10 14:08:21

Freeren希望以下图表的设计制作，能给做网站设计的你提供些许灵感。如有更好的图表设计，可以留言哦。

图表一

这是最简单的一个

Region 1: 25%
Region 2: 55%
Region 3: 75%

需要的图片有这么三个

代码如下：

图表二

增加一个

5页多少页?

7 天多少天?

.how-many-pages span {
	color:#505444;
	float:right;
	font-family:Arial,Helvetica,sans-serif;
	font-size:16px;
	font-weight:bold;
	height:30px;
	line-height:30px;
	margin:14px 0 0;
	padding:2px 0 0;
	width:116px;
}

.how-many-pages strong {
	color:#464D2F;
	float:left;
	font-family:Arial,Helvetica,sans-serif;
	padding:0 0 3px;
	width:200px;
}

.how-many-pages div {
	background:transparent url(x.gif) repeat-x scroll 0 50%;
	float:left;
	height:20px;
	overflow:hidden;
	padding:0;
	position:relative;
	width:355px;
}

a.bullet, a.minus, a.plus {
	background:transparent url(bg-plus.png) repeat scroll 0 0;
	cursor:pointer;
	display:block;
	height:22px;
	overflow:hidden;
	position:absolute;
	right:0;
	text-indent:-9999px;
	top:0;
	width:23px;
}

a.minus {
	background:transparent url(bg-minus.png) repeat scroll 0 0;
	height:22px;
	left:0;
	right:auto;
	width:25px;
}

a.bullet {
	background:transparent url(bullet2.png) repeat scroll 0 0;
	height:17px;
	left:108px;
	top:3px;
	width:18px;
}

.how-many-pages div div {
	background:transparent none repeat scroll 0 0;
	display:inline;
	float:left;
	height:22px;
	margin:0 0 0 25px;
	position:relative;
	width:310px;
}
--></style><div id="page-slider" class="how-many-pages"><span>5页</span><strong>多少页?</strong><div><a class="minus" href="#" container="0">-</a><div><a class="bullet" href="#" container="0" style="top: 3px; left: 117px; position: absolute;"></a></div><a class="plus" href="#" container="0">+</a></div></div><div id="day-slider" class="how-many-pages"><span>7 天</span><strong>多少天?</strong><div><a class="minus" href="#" container="1">-</a><div><a class="bullet" href="#" container="1" style="top: 3px; left: 290px; position: absolute;"></a></div><a class="plus" href="#" container="1">+</a></div></div>

图表三

Region 2: 55%
20%

图片有三个

代码如下：

图表四

140

100

图表五

图表六

图表七

Css 图表: 说明文字75%

上一篇：2008 Web设计流行趋势
下一篇：如何使现有的Web 站点符合标准，易于维护－－－网站重构（一）

发表看法3

>> more 看看其他人的看法
您好！这是我第一次访问到您的博客！我们是一群志愿者，并开始在社区的一个新举措，在相同的利基。您的博客为我们提供了有价值的信息工作。你做了出色的工作！
1 payday loans no faxing 2012-1-12 15:01 Thursday
}
嗨，我认为您的网站可能是浏览器兼容性问题。当我在您的网站在Opera看，它看起来不错，但在Internet Explorer中打开时，它有一些重叠。我只是想给你一个快速的抬起头来！然后，精湛的博客！
2 search engine optimization vancouver 2012-1-13 08:55 Friday
}
嘿！一段时间我一直在读您的博客，终于得到了继续前进，从达拉斯TX给你一个喊出来的勇气！只想说保持了良好的工作！
3 oh canada 2012-1-21 14:21 Saturday
}

css给你灵感--css动态图表设计大全

图表一

图表二

图表三

图表四

图表五

图表六

图表七

有什么想说的吗？