网站首页站长博客下载中心域名交易站长论坛域名主机免费电邮免费域名中文排行排名查询站长书库书籍教程下载
设为首页
加入收藏
总编信箱
投稿或申请专栏请先 [登 陆]
学院首页 网络编程 网页设计 图形图象 数 据 库 服 务 器 网络媒体 网络安全 个人专栏 站长CLUB 业界新闻 信息公告
 当前位置:首页 >> 网页设计 >> Html/Css >> 正文
公告通知
返回上级列表
资料搜索
相关文章
CSS超级技巧大放送(5)
[ 来源:中国站长学院 | 作者:风未起时 | 时间:2005-5-13 10:28:50 | 浏览:人次 ]
收藏到新浪ViVi 收藏到365KEY 收藏到我摘  字号选择〖    〗/ 双击滚屏 单击停止  
十三.清除浮动

一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts

十四.横向居中(centering)

这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:

<!-- 你的布局这里开始 -->

你可以这样定义使它横向居中:

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。


[发送给好友]  [打印本页]  [关闭窗口]  [返回顶部]   转载请注明来源:http://edu.chinaz.com   
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
栏目编辑: 设计风 责任编辑: 设计风
原始作者: 风未起时 录入时间: 2005-5-13 10:28:50
信息来源: 中国站长学院 投稿信箱: Edu#chinaz.com
设为首页 - 加入收藏 - 关于我们 - 广告服务 - 版权申明 - 友情链接 - 联系方式 - 总编信箱 - 会员投稿