快速业务通道

CSS经典技巧20条总结

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04
又出现了,这在靠近漂浮元素时更容易发生(注:没见过)。此时,可以为消失的元素设定: position: relative ,如果不行,再考虑为这些元素指定一个宽度试试。

十七、不可见文字 不论因为何种原因希望某些网页文字不在浏览器中显示,比如为了打印或为了小屏幕而让某些文字不显示,都可以用 display: none 。这非常简单,但有时对某些人这有点没用,他们能去掉这个控制,这时就要用到: position: absolute; left: -9000px 。 这实际上是把文字指定在页面以外显示。

十八、为手持设备设计专门的CSS 也就是手机/PDA等小屏幕用户,可以专门设计一个CSS来让网页显示更舒服些。为此,可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是: <link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" /> 也可以阅读专门的手持设备可用性。

十九、3D效果的按钮 以前要想制作带有3D效果,并且点击下去还会变化的按钮,就得用图片替换的方法,现在CSS就可以了: a { display: block; border: 1px solid; border-color: #aaa #000 #000 #aaa; width: 8em; background: #fc0; } a:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; } 至于效果,还可以自己调整了。

二十、在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就应该变灰,而其他页亮起来。一般要实现这个效果,需要写程序或专门为每一页做设计,现在靠CSS就可以实现这个效果。 首先,在导航代码中使用CSS类: <ul> <li><a href="#" class="home">Home</a></li> <li><a href="#" class="about">About us</a></li> <li><a href="#" class="contact">Contact us</a></li> </ul> 然后分别为每一页的Body指定一个id,和上面类同名。如<body id="contact">。 然后设计CSS如下: #home .home, #about .about, #about .about { commands for highlighted navigation go here } 这里,当id设为home时,.home就会起作用,也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号