您的位置：首页 > 其它

VIM多行缩进

2011-09-04 13:08 134 查看

CSS代码实现百分比柱状图，很实用的CSS功能，这里主要是用CSS控制平铺的背景，达到柱状显示的功能，你可以试着更改这些参数，看有什么美妙的变化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312">

<head>

<title>CSS百分比图 JS代码小猪站长学院</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style>

dl {

margin:0;

padding:0 0 15px 0;

width:401px;

height:auto;

background:#fff url(http://www.codefans.net/jscss/demoimg/200904/bar3.gif) bottom left no-repeat;

}

dt {

text-align:center;

font-size:12px;

border-bottom:3px solid #fff;

}

dd {

margin:0;

display:block;

width:400px;

height:2em;

background:#0a0;

border-bottom:1px solid #fff;

font-size:12px;

}

dd b {

float:right;

display:block;

margin-left:auto;

background:#cec;

height:2em;

line-height:2em;

text-align:right;

font-size:12px;

}

dd.p670 b {width:33%;}

dd.p67 b {width:93.3%;}

dd.p12 b {width:98.8%;}

dd.p197 b {width:80.3%;}

dd.p26 b {width:97.3%;}

dd.p08 b {width:99.2%;}

</style>

</head>

<body>

<dl>

<dt>Browser usage (%) - July 2005</dt>

<dd class="p670">IE.6 = 67% </dd>

<dd class="p67">IE.5 = 6.7% </dd>

<dd class="p12">Opera = 1.2% </dd>

<dd class="p197">Firefox = 19.7% </dd>

<dd class="p26">Mozilla = 2.6% </dd>

<dd class="p08">NN7 = 0.8% </dd>

</dl>

小猪站长学院致力于网页标准的传播,提供DIV CSS XHTML等学习教材,标准化的网页代码

符合W3C标准的网页设计,提供建站资源,设计字体等资源下载的综合性站长学习平台

你所下载的代码来自<a href="http://www.pigzz.com" _fcksavedurl="http://www.pigzz.com">

小猪站长学院</a> ,欢迎下载

使用

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航