|
去年刚刚接触DIV+CSS样式布局，发现这种布局有好多优点，其中最大的优点是能够很清析的结构化html代码，给后期制作后台程序带来很大的便捷，于是便喜欢上了这种布局方式。
现在总结一些我在做DIV+CSS样式布局时遇到的一些问题，以及这些问题的解决方法，以便以后自己查询，也希望有高人能看到这篇笔记，从而指导并交流一下。 1。IE浏览器真的是让人又爱又恨，它是被运用最广的浏览器，可偏偏又不符合标准，以至于页面设计师们，在制作页面布局的时候，要考虑到IE和其它浏览器的兼容问题，如和FireFox之间的兼容。现在有很多网站很喜欢在大分辨率的显示器中，采用页面居中的方式布局。在IE中只要如下布局即可： <html> <head> <title>CSS</title> <style type="text/css"> <!-- body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;} #wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;} --> </style> </head> <body> <div id="wrap"></div> </body> </html> 但是现在这段代码，在IE下看是居中的，可在FireFox中，则依然是左对齐，如果要解决两个浏览器都能居中显示，只需要在#wrap里加入margin:0 auto;即可，详细代码如下： <html> <head> <title>CSS</title> <style type="text/css"> <!-- body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;} #wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px; margin:0 auto; } --> </style> </head> <body> <div id="wrap"></div> </body> </html> 2。在DIV+CSS样式布局中经常会用到<ul><li>来进行布局，通常是用于新闻标题列表。见下面的代码： <html> <head> <title>CSS</title> <style type="text/css"> <!-- body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;} ul,li{list-style:none; padding:0px; margin:0px;} #wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px; margin:0 auto; } --> </style> </head> <body> <div id="wrap"> <ul> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div> </body> </html> 上面代码的效果，是让<li>列表能够左对齐，因为<ul><li>都是默认自带样式的，不加上面的样式，他是默认与左边线有一段距离的，上面的代码还解决了IE和FireFox兼容问题，如果只写padding:0px;在FireFox下可以实现左对齐，IE不能；只写margin:0px;在IE下可以实现左对齐，FireFox又不能了（唉，这两个浏览器太能整人了），所以把这两个样式都加上，这样肯定是没有错的。 3。在用table布局的时候，咱们可以使用<table>作出一个1px的线，注意：不是用<hr>。在Div下也可以实现： <html> <head> <title>CSS</title> <style type="text/css"> <!-- body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;} .line{height:1px; background:#FF0000;width:50%; font-size:1px;} #wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;} --> </style> </head> <body> <div id="wrap"> <div class="line"></div> </div> </body> </html> 在FireFox中，只要加上height:1px；那么就已经认出了，这个Div的高度为1px，可是IE下不能，就是高那么一块（好像Div的高度低于15px，IE都不能直接用height来控制），所以用font-size:1px;来解决这个问题。 4。Div不同于table，没有垂直居中，如果只是单纯的让文字实现垂直居中，可以用以下代码： <html>
<head> <title>CSS</title> <style type="text/css"> <!-- body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;} #valign_div{height:300px; line-height:300px; overflow:hidden;} #wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;} --> </style> </head> <body> <div id="wrap"> <div id="valign_div">test</div> </div> </body> </html> 让Div的高度和行高相等，最好加个overflow:hidden;来控制下文溢出的问题，防止破坏页面布局。 |
|
|
