用CSS设计类似条状统计表效果

<html>

<head>

<title>用CSS设计类似条状统计表效果</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(bar.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>主流浏览器用户数(%) - July 2009</dt>

<dd class="p670"><b>IE6 = 21% </b></dd>

<dd class="p67"><b>IE7 = 52% </b></dd>

<dd class="p12"><b>Opera = 3.2% </b></dd>

<dd class="p197"><b>Firefox = 16.7% </b></dd>

<dd class="p26"><b>Mozilla = 6.3% </b></dd>

<dd class="p08"><b>NN7 = 1.2% </b></dd>

</dl>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间: 2024-10-08 16:39:29

用CSS设计类似条状统计表效果的相关文章

CSS - toggle collapse 类似bootstrap的展开效果

问题:toggle collapse 类似bootstrap的展开效果(展开一个关闭另一个) Demo:http://jsfiddle.net/JSDavi/L47vscw4/ 方案:使用transition动画,变换高度.

纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTML结构: <body> <ul id="navWrapper"> <li> <a href="#">Menu A</a> <ul

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&

CSS实现导航条Tab切换的三种方法

前面的话 ??导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局] ??从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

(12)用css设计电子相册 {下}

本篇学习资料讲解:        延续上一篇的学习资料,仍然介绍 使用css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 上篇学习资料介绍的“阵列模式电子相册”,如果也能够看到详细信息就更好了.如果能够在鼠标指针经过时出现一个信息框,并显示文字内容,鼠标离开以后该信息框自动消失,这样不但页面非常简洁,而且可以方便浏览者快速掌握信息. 1.“鼠标指针经过时动态出现文字信息”电子相册 先看效果图再说: 上图中,可以看到当鼠标指针经过第一行的第四张图片时,它的下面出现了一

CSS设计指南之理解盒子模型

原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构.使用WebDeveloper工具条中的"OutLine"->"OutLine Level Element"菜单项,可以方便地显示盒子的边框和背景,从而让我们能从另外一个角度来审视页面的构成. 1.1 元素盒子的属性 1.边框(border):可

使用Fragment实现类似TabHost标签栏的效果

在前几天,我写了篇<Android TabHost的使用>简单的介绍了其使用的方法,但是在实现的时候发现TabHost已经被官方遗弃了.虽然我觉得TabHost还是多好用的(可能因为我这种菜鸟不清楚吧)不知道为什么官方会遗弃,但应该还是有原因的吧. 首先,我们来简单的了解一下Fragment.Fragment是Android在3.0中引入的概念用来在一个Activity中描述一些行为或一部分用户界面,支持不同分辨率屏幕的动态和灵活的UI设计.Fragment必须总是被嵌入到一个Activity

CSS实现进度条和订单进度条

原文:CSS实现进度条和订单进度条 最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果图如下: CSS实现进度条: html结构: <div id="progress"> <span>70%</span> </div> css样式: #progress{ width: 50%; height

使用CSS3制作导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果. 导航条是梯形形状的. 背景区域的毛玻璃效果. 把导航条和毛玻璃效果在一篇文章中分享其实是有原因的.因为这两个效果的实现离不开一个重要的思想. 用语言来描述就是:父元素设置position:relative,其伪元素(after或者before)设置