CSS实例教程:复合型CSS条状图表(下)
来源:西米CC 发布时间:2010-01-23 12:52:00
在CSS样式中,dl部分只是简单的把内外边距设置为0,dd部分有一个clear属性需要特别注意。当某个元素的属性设置float浮动时,它所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float浮动,或者是希望浮动元素后面的内容不被其float浮动所影响,这个时候我们就需要设置clear来清除这种浮动关联。
举个例子,假如文档中有下列内容:
<p style="float:left;width :200px;">这个是第一列,</p>
<p style="float:left;width :200px;">这个是第二列,</p>
<p >这个是新起一行的段落。</p>
如果不使用浮动清除,那么第3个P里的文字就紧跟在第一、二个P显示在同一行,这个时候如果要达到预期中的效果,我们需要在第3个P的样式中加一个清除浮动:
<p style="float:left;width :200px;">这个是第1列,</p>
<p style="float:left;width :200px;">这个是第2列,</p>
<p style="clear:both;">这个是列的下面。</p>
在本例中,如果dt不使用浮动清除,三个图表的内容就无法实现对齐
dt和dd涉及到的其它样式都比较简单,主要是背景、宽高、浮动等属性,这里就不一一解释了。进度条效果的实现依靠背景覆盖来完成,因为两张背景图只是在色彩鲜明度上有所差异,使得最终的效果呈现出类似一个半透明图层覆盖在底部背景上,兼顾了视觉上的差异和融合。
指针的效果在strong标签中定义,来看看它的完整CSS:
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("/b20083922100.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
里面所用到的背景就是指针图像,需要注意的是该图像的尺寸是24*9像素,所以这里有几个数值要进行精确的计算。首先因为一部分的指针图像要显示在dl区域之外,因此使用了absolute绝对定位方式;其次因为dl元素的高度我们设置成了20像素,所以指针的上、下溢出部分在高度上均为(24-20)/2即2像素,水平方向的溢出也同理参照指针的宽度9像素进行计算,根据这些数据最终计算出right和top的值。最后通过text-indent属性设置文本的缩进,目的是实现对文本的隐藏。
最后在CSS样式中还要加入一行Hack完善其在IE中的效果:
* html dd { float: none; }
猜你喜欢
- 页面访问慢是网站公认的死穴,如果页面都没法访问,往后再精彩的体验都等于零。这个问题如果专业点说,叫做“加载”呈现效率。那么具体了讲,除常规的
- 判断字符串长度函数:<SCRIPT LANGUAGE="JavaScript"><!--fu
- 如何在数据库中限制检索行数?为了照顾显示器屏幕的大小,使检索结果更整齐明了一些,请问,可以控制数据库的检索行数吗? &
- 如果遇到与文件许可有关的问题,可能数启动mysqld时UMASK环境变量设置得不正确。例如,当你创建表时,MySQL可能会发出下述错误消息:
- 阅读上一篇:WEB2.0网页制作标准教程(11)不用表格的菜单辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们
- MS SQL基本语法及实例操作 一:建表并初始化 ============================ create database
- 在新建数据库或附加数据库后,想添加关系表,结果出现下面的错误: 此数据库没有有效所有者,因此无法安装数据库关系图支持对象。若要继续,请首先使
- 因此计划先把数据转插入一个临时表,再对临时表的数据进行分析。 问题点是如何动态创建临时表。原先Insus.NET使用下面代码实现: 代码如下
- 不论是企业网站、个人博客,或者购物网站、游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。可用性是用户体验的一种度量,它可以用访
- 大部分时候我们讲导航,讲的是导航对内容和结构的一种表现。就是说我们在讨论导航的时候,更多的去关注怎么与之交互,以及视觉上是怎么好看。但是导航
- 设置MySQL数据同步(单向&双向)由于公司的业务需求,需要网通和电信的数据同步,就做了个MySQL的双向同步,记下过程,以后用得到
- 研究好多天了,也试过好多办法了,总结出目前发现最好的方法:先说一下基本的东西:<%@ codepage=65001%>
- 我们大家都知道CSS功能的强大,而有关CSS基本的排版控制虽然已有详细的使用说明和参考教程,但还有许多丰富的CSS排版能力,是很少能查到的。
- 修复Access数据库,我们一般使用微软Office 97中带的Access 97对数据库进行修复和整理。Access数据库被损坏分以下几种
- 本节为读者讲解如何利用ADO.NET本身的参数对象和存储过程技术防止注入攻击,以达到用户界面输入与原始SQL的分离,使黑客无法拼接SQL语句
- 代理服务是一种复杂的技术,具有很多可配置的移动组件。详细信息如下:信息信息是指在服务代理应用程序中调用的基本信息单元。对于服务代理来说,信息
- 阅读上一章:Chapter 14 图片替换Chapter 15 为<body>指定样式把内容与显示效果分开设定的好处之一就是灵活
- adodb.stream对象的方法/属性cancel 方法使用方法如下object.cancel说明:取消执行挂起的异步 execute 或
- 本次薯片会讨论了关于分类与类型的问题。怎么找一个item?页面导航一般分类为主,在具体的分类展示下选择类型:典型例子:炫铃(QQ客户端)当只
- ASP中判断字符串中是否包含字母和数字的两个函数function isnaw(str) for