给大家带来网页页面原布局和CSS写法招致扫瞄器兼容成绩

只看该作者 · 发表于 2015-1-15 23:59:09

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

目前我们的站就是div+CSS做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
破洛洛文章简介：感到这个页面对照有广泛性，上面就说说我的办理思绪，和是怎样重构的，请同砚们在看的同时，先本人剖析一下这个页面的布局，和为何会出成绩？如许了解会加倍深入一些，那幺如今就入手下手兴奋的尺度之路吧.
找Bug篇
原始代码，未做修改：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="Content-Language"content="zh-CN"/><title>首页-牛腩旧事公布体系</title><styletype="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:10pxauto10pxauto;width:760px;}#main{/*可变内容地区款式*/}ul,li{/*项目列表款式*/list-style-type:none;}li{text-align:center;margin:20px;}lia:link,lia:visited{/*分类称号款式*/color:#00f;text-decoration:underline;font-weight:bold;}lia:hover{color:#f00;}.commonfrm{/*框架大众款式*/border:1pxsolid#DEDFDE;float:left;}.commonfrmh4{/*框架题目款式*/color:#fff;background-color:#7BAEEF;height:26px;line-height:26px;padding-left:10px;font-size:14px;}.commonfrmtable{width:100%;text-align:center;border-collapse:collapse;/*细线表格*/}.commonfrmtableth,.commonfrmtabletd{padding:5px;}.commonfrmtr,.commonfrmtd{/*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><divid="main"><divid="category"class="commonfrm"><h4>旧事分类</h4><ul><li><ahref="#">首　　页</a></li><li><ahref="#">体育旧事</a></li><li><ahref="#">财经旧事</a></li><li><ahref="#">社会旧事</a></li></ul></div><divid="newnews"class="commonfrm"><h4>最新旧事</h4><table><tr><thclass="th_category">所属种别</th><th>旧事题目</th><thclass="th_time">公布工夫</th></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr></table></div><divid="hotnews"class="commonfrm"><h4>热门旧事</h4><table><tr><thclass="th_category">所属种别</th><th>旧事题目</th><thclass="th_time">公布工夫</th></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="td_time">2008-2-59</td></tr><tr><td><ahref="#"class="td_category">[体育旧事]</a></td><td><ahref="#">123456789</a></td><tdclass="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像素不同的成绩,忧郁啊…
以上彀页在分歧扫瞄器里看下边都是没有对齐的..
以下为教程注释内容：
感到这个页面对照有广泛性，上面就说说我的办理思绪，和是怎样“重构”（实在这里说重构不太松散，只是为了便利人人的了解）的，请同砚们在看的同时，先本人剖析一下这个页面的布局，和为何会出成绩？如许了解会加倍深入一些，那幺如今就入手下手兴奋的尺度之路吧。
1、找出BUG之前的筹办事情：
我先扼要的讲一讲牛腩同砚的页面原布局和CSS写法，然后再用我的了解指出分歧理的中央。起首看看这个页面的效果，是一个很罕见的“一行两列”的布局，依照一样平常的做法，起码必要三个“盒子”，才干完成开端的效果，可是怎样完成右边的盒子和右侧的横向分列呢？？办法有两种：第一，使用浮动；第二，利用相对寻址；牛腩同砚这里利用的是浮动结构，这是很罕见的CSS结构手腕。
上面来剖析test.html详细的布局和CSS代码，

登录/注册后可看大图

#main这个最年夜的块内里包括了三个子块，而且援用了一个ID和Class，接着设置了页面全体的宽度和高度，再用margin:10pxauto;就完成了页面全体居中，而且和窗口高低都有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，辨别出各自的局限。。

破洛洛文章简介：感到这个页面对照有广泛性，上面就说说我的办理思绪，和是怎样重构的，请同砚们在看的同时，先本人剖析一下这个页面的布局，和为何会出成绩？如许了解会加倍深入一些，那幺如今就入手下手兴奋的尺度之路吧.

3、怎样改善？
成绩到这里，基础上就算办理了出一些能够优化的中央：
1.#newnews和#hotnews表面套一个Div对照好。
如图，如许把持起来加倍便利，只需浮动#right。

登录/注册后可看大图

2.Css部分：
#top,#search,#main,#footer{
margin:10pxauto10pxauto;width:760px;
}
Margin的分列按次为上、右、下、左，能够简写为margin:10pxauto;
#category{
width:180px;
height:368px!important;height:378px;
}
能够把height改成height:368px;
#category{
margin-right:5px;
}
这里界说的是间隔右侧的列5px的宽度，可是右侧的#newnews
和#hotnews界说了margin-left:5px;意义就是要有10px的间距，能够把#category的margin-right间接改成10px。。然后右边的列就能够不必界说margin-left了。。。
重构篇
4、“重构”的出色
怎幺样，了解起来不坚苦吧？上面是最出色的部分了，完整重构这个复杂的页面，假如能用本人的设法本人复原。。那是再好不外的了。。
1.搭建最基本的布局
起首，请找个你最随手的编写工具，好比我是用的EditPlus，然后就入手下手吧，特地放上几首轻音乐，不要太严重了，呵呵。。
先从写几个Div入手下手，一步一步的把布局公道的搭建出来，如图：

登录/注册后可看大图

请列位同砚注重一个成绩，ID的定名是独一的，代表着这个块在页面只要一个，假如要反复呈现，请利用Class类来界说，另有定名最好有个标准，只需本人看得懂就好，这方面的内容，能够在谷歌下面输出关头词“CSS定名标准”
就晓得怎幺做了。
我注释一下各块的寄义：个中#wrapper是最外的包括容器，你能够了解为和body相称的感化，这里有同砚会问了，为什幺间接在body内里把持全部页面呢？
我的倡议：不要对body和html付与任何款式，由于这两个标签是“不成把持”的，大概说是“很难把持”的，好比给body界说一个宽度和高度，然后加一个背景致，列位同砚能够本人下手碰运气。。能把持吗？？
#content是正式内容的入手下手，你也能够不嵌套这个Div，干系不年夜，我这里只是便利同砚们了解罢了。
#leftbar望文生义，右边的列。#rightbar固然是右侧的列啦，但右侧不是有两个块吗？？别急，我们再接着写。。

破洛洛文章简介：感到这个页面对照有广泛性，上面就说说我的办理思绪，和是怎样重构的，请同砚们在看的同时，先本人剖析一下这个页面的布局，和为何会出成绩？如许了解会加倍深入一些，那幺如今就入手下手兴奋的尺度之路吧.

2.一步步的完美页面全体布局：

登录/注册后可看大图

下面的图是左列#leftbar的详细内容和布局。。个中界说了一个.left_subnav，代表左列所包括的子导航条。。导航条一样平常都是用ul无序列表来搭建的，这类做法是切合Web尺度的，以是不必忧虑，怎幺样。。有了优秀的定名习气是否是看起来加倍简单了呢？？别的的我就不注释了。。很复杂。。同砚们应当本人思索一下，这些标签是什幺寄义。。

登录/注册后可看大图

这幅图就是第二列上半部分的页面布局，这里在旧事的部分我用了释义列表（dl）来做，固然，你改成别的的布局我也没什幺定见，个中dt是题目，有三个题目，以是这里就是三个dt来代表了个中dd嵌套了三个span，由于没有别的符合的标签来暗示这里的布局，以是能够用span。
下半部分的布局是一样的。。这里我就不贴图了。。列位同砚能够间接Copy.
3.“地基”已建好，“装修”正式入手下手
起首在写css之前，同砚们能够用扫瞄器，看看这个没有任何衬着的效果，是否是感到很朴实？可是页面的内容仍然完全，能够很好的扫瞄？这就是尺度的上风。。
(1).通用款式的编写
因为IE和别的的切合尺度的扫瞄器（好比firefox、Opera）等，对尺度和Css的了解纷歧样，以是我们写css的时分一样平常都必要重置扫瞄器的默许款式，如许它们才不会给我们“色彩”看。
这是我写的通用款式：
body,div,dl,dt,dd,ul,li,h3,p{padding:0;margin:0;border:0;}
body{background:#fff;color:#333;font:12px宋体,微软雅黑,Arial;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
h3{background:#7BAEEF;color:#fff;font-size:14px;padding-left:10px;line-height:26px;}
有同砚大概会有疑问了，“诶，我常常瞥见的都是用的通配符*来界说啊，这里写的怎幺纷歧样呢？？”我注释一下：
*代表选择了一切的标签，比如我们要做的网页是一张白纸，如今某些中央我要刷黑，可是用了*就代表全体都被刷黑了，可是我在制造的过程当中，又但愿有的中央刷成其余色彩，怎幺办呢？这时候又要从头界说款式。而扫瞄器的剖析历程是先刷黑，当你某些中央要刷白色的时分，就会把黑色彩给洗濯失落，然后再刷成白色。。如许就形成了资本的华侈和速率的减慢，固然这关于小站来讲没有什幺年夜成绩，可是当你做的网站属于流派性子的时分，就能够感觉到了。

破洛洛文章简介：感到这个页面对照有广泛性，上面就说说我的办理思绪，和是怎样重构的，请同砚们在看的同时，先本人剖析一下这个页面的布局，和为何会出成绩？如许了解会加倍深入一些，那幺如今就入手下手兴奋的尺度之路吧.

(2)界说各个块的宽度，和高度
#wrapper{width:760px;margin:10pxauto;}/*这是核心容器*/
#content{width:760px;height:378px;}/*这是内容容器*/
#leftbar{width:180px;height:378px;float:left;border:1pxsolid#DEDFDE;margin:010px00;}/*这是左列的款式*/
#rightbar{float:left;width:560px;}/*这是右列的款式*/
这里我是用的浮动结构，固然，你也能够用其余办法.详细各个属性代表什幺意义，我就未几说了，同砚们能够细心的检察css手册.
(3)完美左列的款式。。
#leftbar{width:180px;height:378px;float:left;border:1pxsolid#DEDFDE;margin:010px00;}/*margin:010px00;代表间隔右侧的列有10px的清闲*/
ulli{font-size:14px;list-style:none;text-align:center;margin:20px;}
写完后。。左列的效果应当就出来了，属性都很复杂，请列位同砚查找一下css手册，对应着了解。。。
(4)完美右列的款式
先界说#rightnews_a和#rightnews_b的款式，然后再写完内里的细节，请同砚们随着我的思绪一步一步的写出来，万万不要手懒，不下手，Css是一种理论性很强的手艺，不下手是很难学会的。。
#rightnews_a{border:1pxsolid#DEDFDE;margin:0010px;height:178px;overflow:hidden;}/*overflow:hidden是为了把子内容超越的部分埋没*/
#rightnews_b{border:1pxsolid#DEDFDE;height:188px;}
（5）完美右列的细节款式
先界说dl的款式，这里我仍然接纳的浮动来定位，有一点请注重，一个标签浮动今后，最好给它界说一个符合的宽度。。浮动详细的道理，限于篇幅，就不细讲了，这里次要是供应一种使用web尺度来搭建网页的思绪，和让同砚们对Css有一个理性的熟悉，以是我不想颁出一年夜堆的实际来注释，以免让人人损失了进修的信念。
#rightbardl{text-align:center;}
#rightbardt{float:left;font-weight:bold;font-size:14px;line-height:26px;}
#rightbar.t1{width:100px;padding:05px;}
#rightbar.t2{width:280px;padding:05px;}
#rightbar.t3{width:148px;padding:05px;}
#rightbardd{line-height:26px;font-size:14px;}
#rightbar.dd1{width:100px;padding:05px;float:left;}
#rightbar.dd2{width:280px;padding:05px;float:left;}
五，总结：
Web尺度的中心头脑：

用符合的标签来搭建页面布局：好比页面中的一个段落，就能够用P标签，而不要用div来取代。。导航条能够用ul等，请不要把看起来是什幺的布局，用别的意义的标签来表达，如许是不太公道的。
体现方面的内容，请用css来把持，好比：本教程中的font-size，background等，如许就能够完成体现和布局相分别了。
请不要过量的利用hack，同砚们在看本教程的时分，有无发明我一个Hack都没有写？是的，尺度的本意是不保举利用hack的，由于“向后兼容”的大概性十分小，好比你如今能够兼容ie6.7ff3.0，可是ie8,ff4大概便可能会给你的页面找点贫苦了，以是当你要用Hack的时分，无妨换个思绪，改改布局，大概改css，能制止就只管制止。

怎幺样？？用Web尺度来“重构”一个页面，不是那幺坚苦吧？本人下手尝尝了吗？
假如你细心看了这篇教程，仍是有中央不睬解的话，能够在论坛留言，大概电子邮件给我，我会全力匡助你，自己的程度也无限，假如途经的妙手有什幺意见大概定见，请发封邮件给我，不甚感谢，最初祝福人人在“尺度”的路上好事多磨。
My-email:huangpengan@qq.com

本教程的Word版下载(包含一切源文件)

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只看该作者 · 发表于 2015-1-17 23:51:57

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-1-26 22:32:15

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-2-5 02:42:03

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-1 21:01:35

滚动条)层属性--溢出(visible/hidden/scroll/auto)

只看该作者 · 发表于 2015-3-11 00:15:42

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-17 17:09:42

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-3-24 17:20:39

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来网页页面原布局和CSS写法招致扫瞄器兼容成绩

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子