对CSS网页布局的技巧,可谓是名目繁多,在52CSS.com上就有很多种,很多条,但有多少是适合新手朋友的呢。今天介绍一位CSS新手整理的CSS网页布局的小技巧,或许对您更有实际的参考价值:
1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法:
初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
临时解决方法:选择符{属性名:B !important;属性名:A}
4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image,而不是list-style-image。
6、IE分不清继承关系和父子关系的差别,全部都是继承关系。
7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
10、与内容无关的图片请使用background
11、定义颜色可以缩写#8899FF=#89F
12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
13、<script>没有language这个属性,应该写成这样:<script type=”text/javascript”>
14、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试)
td{border:#000 solid 1px
;}
16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。
17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
18、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效
<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>
19、在IE中可能由于注释带来的文字重复问题时可以把注释改为:
20、如何用CSS调用外部字体
@font-face{font-family:name;src:url(url);sRules}
取值:
name:字体名称。任何可能的 font-family 属性的值
url(url):使用绝对或相对 url 地址指定OpenType字体文件
sRules:样式表定义
21、如何让一个表单中的文本框中的文字垂直居中?
如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。
22、定义A标签要注意的小问题:
当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。
只定义了一个a:link时,一定要记得把其它三种状态定义出来!
23、并不是所有样式都要简写:
当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。
24、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。
25、几个常用到的CSS样式:
1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;
2)固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。
3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。
4)<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。
5)图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西;
6)FLASH透明:选中swf,打开原代码窗口,在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
发表评论
-
PS加强网页设计中像素化细节的技巧
2009-05-13 10:12 859PS加强网页设计中像素化细节的技巧 http://www. ... -
如何在浏览器地址栏前添加自定义的小图标?
2009-05-07 17:37 3457如何在浏览器地址栏前添加自定义的小图标?你是不是记得有时在浏览 ... -
CSS属性:装饰超链接
2009-05-07 17:35 976CSS属性:装饰超链接 ※装饰超链接 网页默认的 ... -
网页收藏
2009-04-02 16:12 733http://www.cool80.com/ 搜罗精美酷站, ... -
CSS样式的filter(滤镜效果)可控制DIV透明度
2009-03-26 23:06 1869我们可以用CSS样式的filter(滤镜效果)对HTML的一些 ... -
div+css学习网站
2009-03-26 23:05 742http://www.aa25.cn/ -
使用css设置字体的透明度及艺术字代码
2009-03-26 23:03 6025使用css设置字体的透明度及艺术字代码 2006/10/28 ... -
优秀站点的CSS导航菜单
2009-03-26 22:54 10241. http://www.alvit.de/css-sho ... -
CSS导航菜单:仿淘宝首页导航条布局效果
2009-03-26 22:49 1866一直以来,人们都认为淘宝的导航条不错,更有很多网站效仿;今天 ... -
高级CSS技巧-Tab选项卡导航菜单
2009-03-26 22:48 1876任何的tab导航,都可以采用下面的方式来实现。看一下下面的T ... -
点击出现图片大图效果
2009-03-26 22:33 905<style>#demo{overflow:hid ... -
非常漂亮的导航菜单
2009-03-26 22:30 911实际效果图: <!DOCTYPE html PUBL ... -
国内设计好站/酷站收藏类网站收集
2009-03-26 22:15 816设计站点必须要有灵感,好的灵感需要多阅读多思考,所以WEB设计 ... -
【酷站】中国互联网Web2.0 Top 100
2009-03-26 22:11 871猫扑 http://www.mop.com 和讯 h ... -
国内WEB2.0酷站赏析
2009-03-26 22:10 782RichURL在线收藏夹 * http:/ ... -
国内酷站欣赏
2009-03-26 22:07 775http://www.citycy.com/http://ww ... -
用网页技术CSS实现网页背景渐变
2009-03-26 22:01 1403用网页技术CSS实现网页背景渐变的四种代码设置。 一、从上往 ... -
三角形图标的DIV+CSS做法
2009-03-26 21:53 1168以前做三角形图标,都是做一个三角的图片,然后在css里面调用, ...
相关推荐
该教育网站采用ASP ACCESS开发,页面采用div css布局,兼容IE/搜狗/360等浏览器,蓝色风格界面设计清爽、干净,功能简单、适合二次开发,更适合新手站长学习div css布局。原程序首页书法专区位置串位,现已修复。 ...
不论你是一位经验丰富的web创作人员,还是一无所知的新手,都可以把它作为内容翔实的CSS参考资料放在手边。Eric A.Meyer。在HTML、CSS和web标准领域是国际上公认的专家,他从1993年就开始从事web方面的工作。他也是...
.net中的正则表达式使用高级技巧 (一) C#静态成员和方法的学习小结 C#中结构与类的区别 C#中 const 和 readonly 的区别 利用自定义属性,定义枚举值的详细文本 Web标准和ASP.NET - 第一部分 XHTML介绍 在ASP.NET...
该模块包括:新闻公告、帮助中心、网站底部、新手指南、分类管理,可以通过快捷方式进行分类访问。从文章列表可以进入修改文章内容及重新生成。都可以通过列表下面的选择操作进行审核、生成等操作,根据各个管理...
3.5.2 位和字节 ................................ 55 3.5.3 值的表示 ................................ 56 3.5.4 值的转换 ................................ 57 3.6 方法 ...............................