特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构,但他不能让我们实现美丽的页面制作,此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果,但其在不同的浏览器下是有不可预知的效果,为了让你的CSS能解决这些不一致下,今天给大家介绍25个CSS技巧代码,我相信这些对你肯家有很大的作用。
一、使用text-indent来隐藏文本
这个常用在图片替换文本中,最常见的就是使用使用图片来替换Logo,这个是非常有用的,使用“text-indent”我们可以达到图片替换文本的效果,而且方便搜索引擎的优化,还能支持阅读器阅读网页内容:
h1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; }
当然,这个只是使用“text-indent"替换文本的一种效果,其实他还有更多的方法。
扩展阅读:
- 十种图片替换文本CSS方法
- Fahrner Image Replacement
- Revised Image Replacement
- A new image replacement technique
- Dynamic Text Replacement
- Using background-image to replace text
- CSS Hack: text-indent: -10000px;
- CSS text-indent: An Excellent Trick To Style Your HTML Form
二、根据文件格式设置链接图标
这个技巧主要是针对用户体验,让用户能很清楚点击的链接是有关于什么方面的内容,比如说,点击某个链接会到跳到站外。换句话说使用属性选择器器,给不同的链接设置不同的图标,让用户很轻松的明白相应的链接是有关于什么方面的内容:
a[href^="http:"] { display:inline-block; padding-right:14px; background:transparent url(/Images/ExternalLink.gif) center right no-repeat; } a[href^="mailto:"] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/MailTo.gif) center left no-repeat; } a[href$='.pdf'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/PDFIcon.gif) center left no-repeat; } a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/FlashIcon.gif) center left no-repeat; } a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/ExcelIcon.gif) center left no-repeat; } a[href$='.ppt'], a[href$='.pps'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat; } a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/WordDocIcon.gif) center left no-repeat; } a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/ZIPIcon.gif) center left no-repeat; }
扩展阅读:
三、在IE浏览器中删除textarea的滚动条
IE浏览器中textarea默认就有滚动条出现,为了达到所有浏览器默认下一致的效果,其实我们可以使用代码让他达到一致的效果:
textarea{ overflow:auto; }
扩展阅读:
四、段落首字下沉
有杂志排版中我们常看到第一个段落的首字下沉的效果,其实这种效果实现是相当的容易:
p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; }
扩展阅读:
五、所有浏览器下的CSS透明度
元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置:
.transparent { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; }
但是使用opacity会影响其后代元素的透明度,我们可以考虑使用:
.transparent { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.g
如需转载,烦请注明出处:https://www.w3cplus.com/css/20-incredibly-useful-CSS-snippets-for-developers
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!