新手学习DIV+CSS难点之经验总结

来源：互联网发布：网络侦探 2周目加强编辑：程序博客网时间：2024/05/17 23:01

导读：

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、图片垂直居中显示：

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

4、清除浮动：

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

CSS：

.clear{clear: both;}

HTML示例：

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

HTML：

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

网络侦探 2周目加强

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子碧沙堂沙塘镇沙塘鳢沙塘鳢多少钱一斤沙塘鳢价格真气运行李少波出神死的真气运行法吧李少波真气运行学李少波的真气运行法沙头村沙头角深圳市沙头角花店深圳沙头角电大沙头角租房深圳沙头角房价沙头角房价深圳沙头角新安房价南头房价盐田房价福田房价莲塘房价香蜜湖房价沙头镇佛山沙头镇花店什么的沙果沙果烘干设备沙奈朵沙奈朵mega 沙奈朵h 我的妈妈沙奈朵莎奈朵沙姜粉沙姜粉图片沙姜粉的作用沙姜鸡的做法沙姜鸡做法电饭煲沙姜鸡沙子口北京沙子口文具批发市场