网页Css+Div排版常见问题总结

这个是我对于网站样式写排版时候遇到问题后处理了获得的经验，分享给大家。

1.开发工具部分。

      我推荐使用Dreamweaver，至于版本不重要。我用的是8.其他开发工具不是不可以，不过个人感觉Dreamweaver更高效。他的代码提示真的很好用。

2.对于处理排版

     开始处理网页，首先需要定义布局。目前定义布局的方法有2种，目前比较常用的Div+Css方法，这种通过写Div块来排布样式，很方便，也很实用。容易扩展。并且如果理解了Div的属性，这个很好学的。

     第二个，就是最早的Table了。在我刚开始开发程序的时候，由于自己写网页，所以一律用的Table，很麻烦，每个块都需要定义固定的宽、高。而且还要用tr和td套用，很不好扩展，而且不易阅读。所以我推荐用Div+Css的方法。

3.对于排版样式如何实现

     一开始接触排版可能都是直接写，后来，Div发现都只能1列，这就头疼了。一些网站上美观的2列、3列是怎么做出来的呢？其实很简单，就是浮动Float。一个div如果设置为左浮动，那么他就是靠左开始，如果设置右浮动，就是靠右开始。如：

.left{float:left}.right{float:right}

    如果你过分使用浮动可能会遇到问题，问题比如：

》1，你设置了2栏分页，但是发现右边栏变到左边栏下边去了。

      这个通常是左边栏过长，或者是边距设置问题。边距，分为内边距padding和外边距margin。可以通过如下写：.test{ margin:12px 2px 5px 7px}

      来设置外边距，内边距也是同样，4个值分别是上、右、下、左边距。

      左边栏（也就是float为left的div）设置好适合的宽度，就可以和右边栏放在一排。

      同理，网上那些好几排的呢，你可以并列一串左浮动的div，也可以几个左浮动+1个右浮动，也可以1左1右：其中左浮动里或右浮动里嵌套。都行。

》2，你设置好了排版，在IE8下很不错，然后你到火狐、IE6、Chrome下一打开，发现：哇，惨不忍睹！怎么解决呢？这其实是各个浏览器默认html样式不同的缘故。这个问题最好的解决方案也是用的最多的解决方案是使用一个重置html样式的css文件，这个东西可以在网上下，你也可以自己写。抛砖引玉啦。就不详述了，很容易的。

4.对于图片的一些问题总结

》1，如果你想弄一个展示，展示图片，发现图片不居中，那么原因可能有2个。其一，在其父Div的display属性没有设定成table-cell（这个可以实现垂直居中）；其二，如果使用了浮动，在设置了table-cell以后仍然不能居中的，看看浮动是否清除了。

》2，有一些图片，你想弄成背景，但是在HTML里可以，到css文件中就不行了，那么，最好的解决办法就是使用Dreamweaver吧。问题产生的原因是路径不对，尤其是相对路径‘./’，‘../’这些。都试一下就可以了解了。

5.对于列表ul和li的一些总结

》1，在写样式的时候我们经常发现需要用到列表，但是table又太庞大，所以果断用ul+li吧。ul+li可以实现table的许多同样功能。比如，你想做一个导航条，如何让它横起来？ul+li默认是一条一行，并且前面有个大圆点。你可以设定css风格，使li排成一行。排成一行的方法有2种，一种是display：inline；一种是float：left；这2种都可以实现排成一行。但是如果用了display：inline后，如果里面套用了a标签display：block的话会冲掉这个display：inline；但是如果你不使用display：block的话就放心用吧。这个可以通过在ul的css设定text-align：center来做成居中的导航条。当然如果你要使用display：block的话就用float：left吧。别忘了浮动以后清除浮动，这个很重要！然后呢，去掉那个大圆点。如果你横版的li的话已经没有问题了，如果是竖版的，默认是有那个的，你可以使用list-style：none；来去掉。

》2，有的时候你发现你写的导航条之类的在IE8下正常，到IE6下就没了一些上部分，这个就是需要设置line-height。一般来说用过word都知道，行距单倍行距还是比较舒服的，有些人也喜欢1.5倍的。这个时候你要看你的font-size，如果字体大小为12px，那么单倍行距就是24px。随便怎么弄，只要看的舒服就行。

》3，有的时候你发现写了li字多了会换行，而你不想换行，想弄成‘...’这样的，你可以通过设置css达到目的：

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

这3个分别是，不换行、超出部分隐藏、文字超出用...代替。

6.特效心得。

     其实就是CSS滤镜，这个滤镜很多在火狐下面都不行，不过IE下样子还是挺绚丽的，比如你要透明某个部分，就用alpha滤镜，还有比如图片轮播切换之类的。可以专门学习下。这里就不列举了。

7.文字心得。

     目前网站一般使用12号字比较舒服，看的爽。字的样子css代码属性很多，也不列举了，试一下就行。最好设定一些行高。

8.页面设置心得。

     页面设置一般宽度为960px为宜，你也可以使用大图背景呵呵。不过主要部分960px为宜，因为目前主流一些显示器还是17寸的，1024x768这个分辨率很多人在用。

9.其他心得

     如果你要使用一些比如圆角，那么你就做一个圆角的背景图，然后一拼就行了。网上花哨的边框其实都是背景图拼接成的。用Photoshop改一些圆角，然后设置成div的背景。说道背景，许多网站上渐变的背景其实都是1px宽的渐变线拉长得到的。而这个渐变线随便用Photoshop的渐变工具就可以生成。如何拉长？background:url(../test/test.jpg) repeat-x ;就可以横着拉。如果需要竖着拉就repeat-y。

     在浏览网上的时候，也许细心的你看到了一些小图，边框等，想保存，但是一保存下来发现保存了一个整个文件，里面整个页面的样式都基本有。这个就是CSS Spirit技术。这个可以提高网页的传输速率，不用多次传输图片，只用一次就全部弄来。呵呵，实现这个说白了就是background属性里指定一下位置罢了。

如：

background:url(../images/css_sprites.png) -143px -37px no-repeat;

分别是url,x,y,重复属性。这里的x和y是负的，0点位于整个图片的左上角。往下往左都变负。

     最后说一个，对于JavaScript可以实现一个鼠标移入样式变化，其实css也可以，那个就是a:hover这个。设置下样式不同就可以了。效果很显著。

     这里就先总结这些常见问题，做一个漂亮的网站，需要兼容很多浏览器。在兼容的时候我推荐用Firebug调试，其实用Dreamweaver调试也行，不过有些差异。Firebug是火狐的一个插件，自己下载，然后再想要调试的块右键，选择“查看元素”，就可以看到那个块的代码了，尤其是浮动错误的时候用这个很好发现。