《
符合标准的可访问的可视化CSS数据图表》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345102013.htm
--> [
网站建设之]合乎尺度的可拜访的可视化CSS数据图表
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal Bar Chart / Accessible Data Examples</title>
<style type=",
符合web标准的嵌入Flash的方法-JS调用;text/css" media="screen">
/* SETUP */
* {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #333;
}
a {
color: #2D7BB2;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #333;
}
h2, h3, h4 {
clear: both;
margin: 0 0 0.6em 0;
}
h3 {
color: #666;
}
.section {
float: left;
clear: left;
padding: 1em 2em;
}
/* CHART LISTS */
.chartlist {
float: left;
border-top: 1px solid #EEE;
width: 15em;
,
符合W3C标准就完成SEO的50%工作了; }
.chartlist li {
position: relative;
display: block;
border-bottom: 1px solid #EEE;
_zoom: 1;
}
.chartlist li a {
display: block;
padding: 0.4em 4.5em 0.4em 0.5em;
position: relative;
z-index: 2;
}
.chartlist .count {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0 0.3em;
text-align: right;
color: #999;
font-weight: bold;
font-size: 0.875em;
line-height: 2em;
}
.chartlist .index {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #B8E4F5;
text-indent: -9999px;
overflow: hidden;
line-height: 2em;
}
.chartlist li:hover {
background: #EFEFEF;
}
</style>
</head>
<body>
<div class="section">
<h2>2006-2011 JZxue.com</h2>
<ul class="chartlist">
<li>
<a href=" _fcksavedurl=""
<span class="count">420</span>
<span class="index" style="width: 42%">(42%)</span>
</li>
<li>
<a href="
<span class="count">280</span>
,
站长，你了解搜索引擎的习性吗？; <span class="index" style="width: 28%">(28%)</span>
</li>
<li>
<a href="
<span class="count">200</span>
<span class="index" style="width: 20%">(20%)</span>
</li>
<li>
<a href="
,
站长需要掌握的六脉神技; <span class="count">100</span>
,
站长选择网站关键词时注意的三点; <span class="index" style="width: 10%">(10%)</span>
</li>
</ul>
</div>
</body>
</html> Tag： CSS CSS
(责任编辑：网站建设)
符合标准的可访问的可视化CSS数据图表相关文章