利用CSS布局到底有多难? - 网页制作

　利用CSS布局到底有多难?

作者：HeTingYi　时间： 2009-03-25　文档类型：原创　来自：蓝色理想

第 1 页利用CSS布局到底有多难? [1]
第 2 页利用CSS布局到底有多难? [2]
第 3 页利用CSS布局到底有多难? [3]
第 4 页利用CSS布局到底有多难? [4]

找Bug 篇

原始代码，未做修正：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>首页-牛腩新闻发布系统</title> <style type="text/css"> /*<![CDATA[*/ /* * 创建人：牛腩 */ * { /* 把默认值都设置为0 */ margin:0; padding:0; border-width:0; } body { font-size: 14px; } a:link,a:visited { /* 鼠标未移上去的超链接的样式, 超链接访问后的样式 */ color: #000; text-decoration: none; } a:hover { /* 鼠标移到超链接上的样式 */ color: #00f; text-decoration: underline; } #top, #search, #main, #footer { /* 公共样式 */ margin: 10px auto 10px auto; width: 760px; } #main { /* 可变内容区域样式 */ } ul,li { /* 项目列表样式 */ list-style-type:none; } li { text-align: center; margin: 20px; } li a:link, li a:visited { /* 分类名称样式 */ color: #00f; text-decoration: underline; font-weight: bold; } li a:hover { color: #f00; } .commonfrm { /* 框架公共样式 */ border:1px solid #DEDFDE; float: left; } .commonfrm h4 { /* 框架标题样式 */ color: #fff; background-color: #7BAEEF; height: 26px; line-height: 26px; padding-left: 10px; font-size: 14px; } .commonfrm table { width: 100%; text-align: center; border-collapse: collapse; /* 细线表格 */ } .commonfrm table th, .commonfrm table td{ padding: 5px; } .commonfrm tr, .commonfrm td { /* height: 26px !important; *height: auto !important; ie7 */ /* height:auto; ie6是auto */ } .commonfrm .th_category { /* 表格中类别名称列的宽度 */ width: 100px; } .commonfrm .th_time { /* 表格中发布时间列的宽度 */ width: 150px; } .commonfrm .td_category { color: #999; } .commonfrm .td_time { color: #999; font-size: 12px; } #category { /* 新闻分类框架 */ width: 180px; height: 368px !important; height: 378px; margin-right:5px; margin-bottom: 10px; } #newnews { /* 最新新闻框架 */ width: 560px; margin-left: 5px; margin-bottom: 10px; } #hotnews { /* 热点新闻框架 */ width: 560px; margin-left: 5px; margin-bottom: 10px; } /*]]>*/ </style> </head> <body> <div id="main">  <div id="category" class="commonfrm"> <h4>新闻分类</h4> <ul> <li><a href="#">首　　页</a></li> <li><a href="#">体育新闻</a></li> <li><a href="#">财经新闻</a></li> <li><a href="#">社会新闻</a></li> </ul> </div>  <div id="newnews" class="commonfrm"> <h4>最新新闻</h4> <table> <tr> <th class="th_category">所属类别</th> <th>新闻标题</th> <th class="th_time">发布时间</th> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> </table> </div>  <div id="hotnews" class="commonfrm"> <h4>热点新闻</h4> <table> <tr> <th class="th_category">所属类别</th> <th>新闻标题</th> <th class="th_time">发布时间</th> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> <tr> <td><a href="#" class="td_category">[体育新闻]</a></td> <td><a href="#">123456789</a></td> <td class="td_time">2008-2-59</td> </tr> </table> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

引用:
老师帮忙看一下以下网址:
http://taotao.wsyren.com/other/test.html
想做个全浏览器兼容的网页还真困难啊(兼容ie6,7,8,opera,ff,chrome),我想让边框上下都对齐的,可是怎幺调也调不出来,而且我发现不仅是ie和firefox有2像素差别的问题,opera和firefox也有2像素差别的问题,郁闷啊…
以上网页在不同浏览器里看下边都是没有对齐的..

以下为教程正文内容：

感觉这个页面比较有普遍性，下面就说说我的解决思路，以及是如何“重构”（其实这里说重构不太严谨，只是为了方便大家的理解）的，请同学们在看的同时，先自己分析一下这个页面的结构，以及为什么会出问题？这样理解会更加深刻一些，那幺现在就开始愉快的标准之路吧。

一、找出BUG之前的准备工作：

我先简要的讲一讲牛腩同学的页面原结构和CSS写法，然后再用我的理解指出不合理的地方。首先看看这个页面的效果，是一个很常见的“一行两列”的结构，按照一般的做法，最少需要三个“盒子”，才能实现初步的效果，但是如何实现左边的盒子和右边的横向排列呢？？方法有两种：第一，利用浮动；第二，使用绝对寻址；牛腩同学这里使用的是浮动布局，这是很常见的CSS布局手段。

下面来分析test.html具体的结构和CSS代码，

# main 这个最大的块里面包含了三个子块，并且引用了一个ID和Class，接着设置了页面整体的宽度和高度，再用margin:10px auto;就实现了页面整体居中，并且和窗口上下都有10px的距离，这是比较常见的用法，还有一种，可以不用在外面套DIV，只需要给各个子块定义宽高和margin 一样可以实现页面的整体居中。

#category是左边的列，设置了宽高，并且使用了float:left，其中高度有两条属性，那幺浏览器到底执行那条命令呢？

#category {
height: 368px !important; height: 378px;
｝

结果是IE7和firefox 浏览器高度为368px，IE6执行378px，而忽略368px。因为!important只有IE7和firefox或者符合标准的浏览器才能解析，IE6并不是很规范，所以会忽略这条属性，然后定义了margin-right和bottom。用来拉开和其它的块的距离。接着里面包含一个h4的标题和无序列表，相对比较简单，也很好理解，各位同学可以自己分析。

#newnews 和 #hotnews 结构相同，都是一个标题和一个表格，其中表格用来显示具体的新闻内容，两个块之间也设置了float:left和width:560px以实现和左边的列#category并排显示在同一行的效果，接着定义margin-left 和 margin-right ，区分出各自的范围。。

出处：蓝色理想
责任编辑：bluehearts

上一页下一页利用CSS布局到底有多难? [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

条件CSS的使用


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule