1、网页居中显示:
需要设置两个地方,一个是body,一个是外边框div。
CSS:
body{
margin:0;
padding:0;
text-align:center;
}
#main{ /*最外层DIV*/
width:760px;
margin:0 auto;
padding:0
}
2、文字垂直居中显示:
在DIV中定义一个行高与其高度相同即可。
CSS:
.title{
height:25px;
line-height:25px;
vertical-align:middle;
}
3、图片垂直居中显示:
在<img>标签中加入align="absmiddle" 即可。
4、清除浮动:
如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码,如果在一行上只是一个DIV,好像不必清除浮动。
CSS:
.clear{
clear:both;
}
HTML示例:
<div id="main">
<div class="left">漂浮1</div>
<div class="center">漂浮2</div>
<div class="right">漂浮3</div>
<div class="clear">清楚漂浮</div>
</div>
<!--清除浮动后,后面的代码排列就不会有任何变形了,不管是在IE还是FF中,都很正确-->
5、设置<ul>表列缩进值:
默认情况下,<ul>列表是缩进两个字符显示列表项目的,我们可以通过设置margin-left的值达到控制其缩进值的目的。
CSS:
ul{
margin-left: -24px;
}
默认值是0,负值表示向左移,正值表示向右移。
有时候,我们用list-style-type:none;将前面的项目符号取消了,但是list列表却没有往左缩进,可以讲ul的padding值设置为0就好了。
CSS:
ul{
padding:0;
}
8、水平导航条的制作示例:
HTML代码如下:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
CSS中,首先清除ul的list-style、margin和padding:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left; /* 使ul不会因没有内容而没有了高度,使背景不能显示,也可以在最后加上空的div,然后用clear实现 */
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}
然后,可以将li的display属性设置了inline或者设置float为left,
display li可能会出现bug,所以我一般用float left的方法:
ul li {
float: left;
}
ul a {
display: block;
float: left; /*跨浏览设置*/
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top; /*设置分隔线*/
text-decoration: none;
color: #fff;
}
ul .first a {
background: none; /*去掉第一个链接的背景*/
}
ul a:hover {
color: #333;
}