萌萌妈妈 发表于 2015-1-15 23:59:09

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

目前我们的站就是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">/*<!]>*/</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>

援用:
先生协助看一下以下网址:
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

每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
页: [1]
查看完整版本: 给大家带来网页页面原布局和CSS写法招致扫瞄器兼容成绩