CSS常见11条技巧与经验收集

所属分类: 网页制作 / 应用技巧 阅读数: 245
收藏 0 赞 0 分享
1.如何清除图片下方出现几像素的空白间隙?

复制代码
代码如下:

方法1:
img{display:block;}
方法2:
img{vertical-align:top;}
备注:除了top值,还可以设置为text-top
| middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以
方法3:
#test{font-size:0;line-height:0;}
备注:#test为img的父元素

2.如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?

复制代码
代码如下:

方法:
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
备注:按L-V-H-A的顺序设置超链接样式即可,可速记为LoVe(喜欢)HAte(讨厌)

3.为什么Standard mode下IE无法设置滚动条的颜色?

复制代码
代码如下:

方法:
html{
scrollbar-3dlight-color:#999;
scrollbar-darkshadow-color:#999;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eee;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ddd;
scrollbar-track-color:#eee;
scrollbar-base-color:#ddd;
}
备注:将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

4.如何使文本溢出边界不换行强制在一行内显示?

复制代码
代码如下:

方法:#test{width:150px;white-space:nowrap;}
备注:设置容器的宽度和white-space为nowrap即可,其效果类似<nobr>标签

5.如何使文本溢出边界显示为省略号?

复制代码
代码如下:

方法(此方法Firefox5.0尚不支持):
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
备注:首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。

6.如何使连续的长字符串自动换行?

复制代码
代码如下:

方法:#test{width:150px;word-wrap:break-word;}
备注:word-wrap的break-word值允许单词内换行

7.如何去掉超链接的虚线框?

复制代码
代码如下:

方法:a{outline:none;}
备注:IE7及更早浏览器由于不支持outline属性,需要通过js的blur()方法来实现,如<a
onfocus="this.blur();"...

8.标准模式Standard mode和怪异模式Quirks mode下的盒模型区别?

复制代码
代码如下:

方法:
标准模式下:Element
width = width + padding + border
怪异模式下:Element
width = width
备注:相关资料请参阅CSS3属性box-sizing

9.如何在文本框中禁用中文输入法?

复制代码
代码如下:

方法:input,textarea{ime-mode:disabled;}
备注:ime-mode为非标准属性,写该文档时只有IE和Firefox支持

10.如何让层在falsh上显示?

复制代码
代码如下:

方法:<param
name="wmode" value="transparent" />
备注:设置flash的wmode值为transparent或opaque

11.如何设置IE下的iframe背景透明?

复制代码
代码如下:

方法:
设置iframe元素的标签属性allowtransparency="allowtransparency"然后设置iframe内部页面的body背景色为transparent。不过由此会引发IE下一些其它问题,如:设置透明后的iframe将不能遮住select
更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多