新​手​学​习​D​I​V​+​C​S​S​难​点​之​小​结

2014/07/15 22:05
阅读数 52

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中,首先清除ullist-stylemarginpadding

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left;    /* 
使ul不会因没有内容而没有了高度,使背景不能显示,也可以在最后加上空的div,然后用clear实现 */
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

然后,可以将lidisplay属性设置了inline或者设置floatleft

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;
}

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
2
分享
返回顶部
顶部