新手学习DIV+CSS难点

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;

 

3、图片垂直居中显示：

在标签中加入align="absmiddle" 即可。

 

4、清除浮动：

  如果在同一行上有几个DIV并列显示，那么必须在其中加入清除浮动代码，如果在一行上只是一个DIV，好象不必清除浮动。

 

5、三列结构中的的DIV写法：

适用于左右栏是窄幅，中栏为主要内容显示，让其宽度自适应。

 

CSS:

 

#main{

     width:760px;

     margin:0 auto;

     }

.left{

     width:100px;

     float:left;

    }

.right{

     width:120px;

     float:right;

    }

.center{

     margin:0 120px 0 100px;/*页面中栏内容，未设置浮动，通过设置左右边界达到此DIV放于中栏的效果*/

     width:auto;

    }

.clear{clear: both;}

 

6、textarea在FireFox中不能自动换行的处理：

有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了word-break:break-all;word-warp:warp;也没有效果，怎么回事呢？

 

主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。

解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。

 

7、设置

  表列缩进值： 

    默认情况下，列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。

 

    CSS：

ul{

 margin-left: -24px;

}

    默认值是0，负值表示向左移，正值表示向右移。

 

8、水平导航条的制作示例：

 

HTML代码如下：   

• Home
• About
• News
• Products
• Services
• Clients
• Case Studies

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;

}

 

line-height:25px;

 vertical-align:middle;

 }