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

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/div?????div class=center/div?????div class=right/div?????div class=clear/div/div!--清除浮动后，后面的代码排列就不会有任何变形了，不管是在IE还是FF中，都很正确--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;} ????HTML： !--注意：center这个DIV的位置--div id=main?????div class=left/div?????div class=right/div?????div class=center/div?????div class=clear/div/div ????6、textarea在FireFox中不能自动换行的处理： ????有时我们可能会遇到这种现象，在IE中可以自动换行，但在FF中就是不行，即使加了word-break:break-all;word-warp:warp;也没有效果，怎么回事呢？ ????主要原因是因为我们加入到textarea中的英文字符或代码过长，造成它误识别为一个单词所致。 ????解决方法也很简单，就是在内容中，人为加一些空格，让FF自动识别为多个单词，从而就能正确换行了。 7、设置ul表列缩进值： ??? 默认情况下，ul列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。 ??? CSS： ul{?margin-left: -24px;} ??? 默认值是0，负值表示向左移，正值表示向右移。 ??? 8、水平导航条的制作示例： ??? HTML代码如下： ul??? lia href=#Home/a/li??? lia href=#About/a/li??? lia href=#News/a/li??? lia href=#Products/a/li??? lia href=#Services/a/li??? lia href=#Clients/a/li??? lia 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的方