10种有用的CSS技巧-白红宇

重置浏览器的默认设置

首先将以下代码加到你的全局css文件中：

/*
1.Reset browser defaults then reset the browser font size
*/
             body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
             blockquote,th,td 
{ 
margin
:
0
;
 padding
:
0
;
 
}
             table 
{ 
 border-collapse
:
collapse
;
 border-spacing
:
0
;
 
}
             fieldset,img 
{ 
 border
:
0
;
 
}
             address,caption,cite,code,dfn,em,strong,th,var 
{ 
 font-style
:
normal
;
 font-weight
:
normal
;
 
}
             ol,ul 
{ 
 list-style
:
none
;
 
}
             caption,th 
{ 
 text-align
:
left
;
 
}
             h1,h2,h3,h4,h5,h6 
{ 
 font-size
:
100%
;
 font-weight
:
normal
;
 
}
             q:before,q:after 
{ 
 content
:
“
;
 
}
             abbr,acronym 
{ 
 border
:
0
;
 
}
             html 
{ 
font-size
:
 62.5%
;
}

然后，我们把字体大小font-size设为10px如：

html 
{ 
font-size
:
 62.5%
;
}

这样我们就比较容易的通过em单位来设置页面字体的大小了，e.g

Code

2.水平居中（仅限固定宽度）

这个我想大家都会知道的，如：

div#container 
{ 
margin
:
 0 auto
;
}

3.充分利用position中的absolute和relatively

4.居中，还是居中（纵横通杀）

div.popup 
{ 
 height
:
400px
;
 width
:
500px
;
 position
:
 absolute
;
 top
:
 50%
;
 left
:
 50%
;
}
 div.popup 
{ 
 margin-top
:
 -200px
;
 margin-left
:
 -250px
;
}

Memo：

·必须指定width和height的固定值；

·position值为absolute；

·分别指定top与left为50%；

·设置margin-top和margin-left分别height和width的负值的一半，也可以简写为：margin:-200px 0 0 -250px;

5.CSS也能复用

建立你的global css rules，充分在任何可以用到的页面用它吧，e.g

.left 
{ 
float
:
 left
;
}
 .right 
{ 
float
:
 right
;
}
 img .left 
{ 
 border
:
2px solid #aaaaaa
;
 margin
:
 0 10px 0 0
;
}
 img .right 
{ 
 border
:
2px solid #aaaaaa
;
 margin
:
 0 0 0 10px
;
 padding
:
 1px
;
}

6.IE6的margin bug

当你设置div元素的float属性并指定了margin-left属性，在IE6或以下版本浏览的时候你可以会太跌眼镜，IE6怎么给你愉愉地加了margin的值呢？

解决方法：把div设为内联的就行了 e.g

div 
{ 
float
:
left
;
margin
:
40px
;
display
:
inline
;
}

7.简单的导航菜单

xhtml:

<
div 
id
="navbar"
>
<
ul
>
<
li
><
a 
href
=http://www.peakflowdesign.com
>
Peakflow Design
</
a
></
li
>
<
li
><
a 
href
=http://www.google.com
>
Google
</
a
></
li
>
<
li
><
a 
href
="http://zenhabits.net/"
>
Zen Habits
</
a
></
li
>
</
ul
>
</
div
>

CSS:

            #navbar ul li 
{ 
display
:
inline
;
margin
:
0 10px 0 0
;
}
             #navbar ul li a 
{ 
color
:
 #333
;
display
:
block
;
float
:
left
;
padding
:
5px
;
}
             #navbar ul li a:hover 
{ 
background
:
#eee
;
color
:
black
;
}

8. 尽量减少使用table来布局

9.页面元素可以有多个class, e.g

<
div 
class
="regColor bigSize"
>
I am a reg color of font width big size!
</
div
>

orginal article:

转载请注明出处［］

作者赞赏

刚做的招标网：请大家多意见

分类:

标签: , , ,

本文转自Sam Lin博客博客园博客，原文链接：http://www.cnblogs.com/samlin/archive/2008/08/09/1264491.html，如需转载请自行联系原作者