《
CSS 直方图布局示例》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331U2013.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS直方图示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <style type="text/css"> .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em; } .chart li { list-style: none; float: left; width: 5em; text-align: center; background: url( center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url( center -1px no-repeat; border-top: 5px solid #fff; } .chart strong { display: block; text-align: center; font-weight: normal; } </style> </head> <body> <ul class="chart"> <li>一月<,
CSS 性能调优;span style="background-position: center -35">: </span><strong>35%</strong></li> <li>仲春<span style="background-position: center -40">: </span><strong>40%<,
CSS 必知的7个知识点;/strong></li> <li>三月<span style="background-position: center -87">: </span><,
CSS 常用信息速查手册;strong>87%</strong></li> <li>四月<span style="background-position: center -45">: </span><strong>45%<,
CSS 区分IE版本的三个方法;/strong></li> <li>蒲月<span style="background-position: center -23">: </span><strong>23%</strong></li> </ul> <p style="clear: both"> <ul class="chart"> <li><em>一月</em><span style="background-position: center -35">: </span><strong>35%</strong></li> <li><em>二月<,
CSS 入门教程 纵向导航菜单;/em><span style="background-position: center -40">: </span>,
css sprites适用范围和css sprites的利弊;<strong>40%</strong></li> <li><em>三月</em><span style="background-position: center -87">: </span><strong>87%<,
CSS Sprites技术及图片优化;/strong></li>,
CSS Sprites技术以及图片优化; <li><em>四月</em><span style="background-position: center -45">: </span><strong>45%</strong></li> <li><em>五月</em><span style="background-position: center -23",
CSS Sprites技术;>: </span><strong>23%</strong></li> </ul> <p style="clear: both"> </body> </html>
Tag：直方图 直方图
应用CSS布局一个直方图，可能比拟适用，重要是考验应用CSS布局的才能，看看后果吧。
[ 提醒：你可先修正局部代码,CSS Sprites图片合并技术减少请求优缺点，再按Ctrl+A 全体抉择 ]
--> [
网站建设之]CSS 直方图布局示例
(责任编辑：网站建设)
CSS 直方图布局示例相关文章