CSS已经成为网页前段设计一个非常重要的部分,由于写CSS时需要考虑的问题非常多,老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架,这篇文章可以给新手们一些启示。
1.简单的纯CSS Tooltip
通过这些代码,你可以做出简单的Tooltip。这是CSS
代码:
以下为引用的内容: |
HTML代码如下:
以下为引用的内容: |
效果如图。
2.重设基本样式
为了统一不同浏览器对各种HTML标签的默认样式的渲染,我们必须从新定义各种标签的样式,这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。
以下为引用的内容: |
3.方便的CSS调试器
这段代码可以把页面上的各种标签嵌套用不同的线条划分出来,方便你找出BUG。
以下为引用的内容: |
4.使一个未设定宽度的DIV居中
对于一个有固定宽度的DIV容器,你可以轻松地通过margin:auto属性令他居中。如果要居中的DIV容器并没有设置宽度的话,你可以使用下面的CSS代码:
以下为引用的内容: |
5.为大图片添加伪AJAX的载入图标
等待图片下载是浏览网页是意见烦人的事,但用JavaScript动态载入图片技术难度又比较大。你可以用CSS加上一个载入图标,缓解访客等待加载时的情绪。
以下为引用的内容: |
6.CSS图像预载
如果你要在HTML文件加载完成前预载图片,你可以把图片设置为一个DIV容器的背景图,并且把这个容器设为不可见。当HTML加载后再把这个DIV容器插入页面里。
以下为引用的内容: |
7.CSS透明度
由于老式浏览器对页面元素透明度处理不好,你必须为透明的元素写hack。
以下为引用的内容: |
8.为IE和其它浏览器设置元素的最小高度
由于IE不支持min-height属性,我们还是要为IE写hack。以下代码的第一部分是正确的代码,可以在标准浏览器里使用,第二部分是针对IE的hack。由于IE不能识别min属性,因此height值设定为8em,使容器能装下超出容器范围的文本。
以下为引用的内容: |
9.根据链接类型选用不同的链接样式
超链接的形式主要有http链接和mailto链接两种,你可以为这两种链接设置不同的样式。通过CSS3,你甚至能为指向不同文件类型的附件链接建立不同的样式!不过,这种做法对不兼容CSS3的浏览器不够友好,而这也是我们必须尽快淘汰老版本IE的原因。
以下为引用的内容: |
10.移除IE里文本输入框的滚动条
IE浏览器会画蛇添足地为多行的文本输入框加上一个滚动条,哪怕你输入的文字长度还没有超出输入框的范围。通过下面的代码你可以把多余的滚动条移除。
以下为引用的内容: |