偶看新闻上海3c认证:重构之美（二）
来源：百度文库 编辑：偶看新闻 时间：2024/04/28 00:19:40
我是一个典型的初学者，而且是那种爬还不会就想破百米记录了。通过验证后回头看，我犯的错误很多都是不常见滴（太低级了），因此我声明一下：
高手们啊，对于下面文章中错误的代码或凌乱的结构，私下狂笑一下就行了哈……英雄，放过我吧。估计你看了我的代码你就知道我的双手有多新，是多么的洁白无暇，你会于心不忍的。
比我还新的新手请注意：代码几乎毫无借鉴的价值。
不过呢，我在三天内从零圈圈到完成这个首页，将表现与结构完全分离，并且三大浏览器显示效果几乎一样，CSS通过认证，只是页面文件不能通过认证而已。所以对于新手，应该还是有不少思路可以学习。
最后，我不想过多的纠缠在代码上，自己实践或者看书会收获更大。更多的，我希望能在这种全新的设计思路上进行探讨。我会把我的思路表达出来，也希望大家一起在这个方面多讨论。我说过，技术是为思想服务的，所以思想的正确性非常重要。为了避免某些人在这句话中钻牛角，补上一句：当然，技术的高低要反过来限制思想的宽度和深度。
所有工具打开了，第一件事设置目录结构，在IIS中设置站点，考虑到以后可能的多风格问题，在样式表和图片目录下分别建立DEFAULT目录。
好了，什么都不想，先试一下：样式表#indextop{height: 85px;background-color:#ED1C24;background-image:url(/images/default/bg_02.gif)background-repeat: repeat-x;}
我的第一个#开头样式，以前都是用.开头或者不开头的。现在都不完全清楚#和.的准确概念。#用id针对引用，.用class针对引用，不开头的全局引用。页面
后面代码请自己复制到下面调试框中相应位置榭础?br>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
OH YES！甚至无需设置宽度就自适应分辨率。
咦，色块没贴边。简单，样式表中加上：
body
{
margin: 0;
}
第一个不兼容问题出现，IE、Mozilla正常，Opera依旧不贴边，想了想，在body中添加 padding: 0; 一试，成功。愉快。
热完身，打开设计稿，开始研究。
页头到阴影前为止，因为要在程序中包含。先攻页头。
我需要页头两边自适应分辨率，自然需要嵌套居中的770DIV，这里就有选择：（导航下的白色背景是一个很淡的渐变，显然不能用背景色）
1、包括阴影从上到下四个DIV，然后1和3号分别嵌套一个居中的DIV放置‘LOGO’和导航。
2、两个DIV，因为阴影得平铺，估计还要使用z-index，所以必定单独一个。
3、三个DIV，阴影一个，导航一个，上面一个。
1号最终会有6个DIV，其中要单独为一个小色条设置一个DIV，不值。2号感觉不便于将导航独立出来，最终选择3号。小色条被包含在导航DIV中，便于不考虑‘LOGO’的垂直居中问题。小色条和导航背景连在一起切为宽一象素的GIF色条水平平铺，‘LOGO’虽然是网站名，但属于表现，通过CSS手册知道背景可以不平铺，爽，于是设为背景，居中，不平铺。看了下position的属性，大概理解relative是指不浮动，顺序向下排，absolute是浮动，相对上层的定位。DIV的居中问题，查看其他代码知道是设置margin: 0 auto;
OK，写代码如下：页面
样式表 （为了便于大家看结构，我加了黑白对比背景色）/* -----------页眉----------- *//* ---页头LOGO--- */#indextop{height: 85px;background-image: url(/Article/UploadFiles/200501/20050111101333324.gif);background-repeat: repeat-x;background-color: #ED1C24;}#indextop_logo{position:relative;margin:0 auto;width:770px;height:75px;background-image: url(/Article/UploadFiles/200501/20050111101335490.gif);background-repeat: no-repeat;background-position: center;background-color: #000;}/* --- 全局导航 --- */#indextop_globalnav{position: relative;height: 43px;padding: 1px;background-image: url(/Article/UploadFiles/200501/20050111101335835.jpg);}#indextop_globalnavmenu{position: relative;margin: 0 auto;padding: 0;width: 770px;height: 43px;background-color: #000;}/* -----------正文上----------- *//* ---广告条--- */#indexcontent_shadow{position: absolute;z-index: 1;margin: 0;padding: 0;width: 100%;height: 10px;background-image: url(/Article/UploadFiles/200501/20050111101335681.gif);background-repeat: repeat-x;left: 0px;top: 130px !important;top: 127px;}
[height: 43px;]这里本来是45px，但设了padding之后被撑大，由此知道了padding要影响高和宽，后来知道margin和border也一样，所以有些时候要高宽设置要做相应的裁减。
好了，页头的大局搞定，现在开始做导航，先分析。
如果用表格，很简单，两行十列，spacing为3，然后就是切图，每个图片左和右多切1px背景色，做botton。但是离开表格我就不知道怎么办了，多谢阿捷的一篇文章，我学习后知道了display: block;的使用，详细用法大家可以去看阿捷的《不用表格的菜单》和手册，这里我简单说一下我的理解：许多块元素默认是垂直显示，就像你有一堆方块，你列出来交给浏览器，浏览器的显示是从上到下顺序排列，而display: block;就是让浏览器水平排列这些方块，并且，遇到所在嵌套的边界就自动换行继续排列。好，现在我就将导航中的一个栏目设置为一个方块，然后不断重复直到我有17个方块，通过设置它的宽度，让它在水平排到第十个方块时到达globalnavmenu（770px）的右边界，它就自动换行了，这样导航条就出来了。方块的宽度不用计算，直接从设计稿中取，我的设计稿是很精确的。这里有个问题，由于globalnavmenu这个div是包含了小色块，默认的垂直居中显然不行，要在白色块中垂直居中才行。（看来啊，我还是没躲过，本以为将小色块放到导航中就可以不考虑LOGO的垂直居中问题，结果还是要影响导航条的定位，而且更麻烦，印证了我常说的一句‘个人名言’：困难是躲不过的，它总是会换个时间或空间重新摆到你面前，直到你迈过它才会消失。）解决办法，很明显要使用padding或margin，我选择了对方块使用margin。这又导致新问题，第一排的margin-top明显要比第二排的大，那么就不能对17个方块使用一个样式，我解决办法是上下各一个。栏目名字顺序置于方块中，通过调整上下padding垂直居中于方块。于是代码如下：页面…………
样式表……#indextop_globalnavmenu{position:relative;margin: 0 auto;padding: 0;width: 770px;height: 43px;}#indextop_globalnavmenu ul{clear: left;margin: 0px;padding: 0;border: 0px;list-style-type: none;text-align: center;display:inline;}#indextop_globalnavmenu li{width: 77px;height: 17px;float: left;text-align: center;margin: 0;}……
可以对方块加连接，就像对td加连接一样，更优越的是方块的a:hover可以定义样式，比如换方块的背景和色彩等各种样式，那太好了，以前需要用JS实现的响应mouseover事件就太简单了。（说明：翻转的图片、色彩、FLASH等都是属于表现，内容一般只有文字，所以图片应该设置成背景，这两天我看见有人在运用标准时依旧使用包含文字的图片直接做链接，这种做法是一种形似而神不是的伪标准，建议再认真读读《理解表现与结构相分离》，如果要使用字体，那么也应该将这种图片设为背景，再在相应位置隐藏相应文本。建议看看Micromedia的网站，他是怎么处理他全FLASH的页头导航？他将整个页头做了一个普通页头，然后隐藏了。浏览器不支持FLASH或文本浏览时，普通页头就出来了。）加入以下代码实现：页面没有，呵呵，只用于测试。
样式表……#indextop_globalnavmenu li{width: 77px;height: 17px;float: left;text-align: center;margin: 0;}#indextop_globalnavmenu li a{color: #000;display: block;width: 77px;height: 17px;text-align: center;text-decoration: none;background-image: url(/Article/UploadFiles/200501/20050111101335916.jpg) ;background-repeat: no-repeat;}#indextop_globalnavmenu li a:hover{color: #ED1C24;width: 77px;height: 17px;text-align: center;background-image:url(/Article/UploadFiles/200501/20050111101335279.jpg) ;background-repeat: no-repeat;text-decoration: none;}
好了，导航出来了，但是发现样式表重复很多，后来通过测试知道，下层继承上层的样式，哎呀概念我不说了，我说不准确，ajie帮我说吧。所以清除多于的代码，尽量减少重复且无意义的代码，字体在body中定义，加上控制字体在li中padding，图片位置的样式，重新整理代码为：样式表……#indextop_globalnavmenu li{width: 77px;height: 17px;FLOAT: left;TEXT-ALIGN: center;margin: 0;}#indextop_globalnavmenu li a{color: #000;display: block;width: 77px;height: 17px;text-decoration: none;background-image: url(/Article/UploadFiles/200501/20050111101335916.jpg) ;background-repeat: no-repeat;}#indextop_globalnavmenu li a:hover{color: #ED1C24;background:url(/Article/UploadFiles/200501/20050111101335279.jpg) ;text-decoration: none;background-repeat: no-repeat;}/* ---主导航第一行--- */#indextop_globalnavmenu li#first A{padding: 6px 0 0 0;background-position: 0px 3px;}#indextop_globalnavmenu li#first A:hover{padding: 6px 0 0 0;background-position: 0px 3px;}/* ---主导航第二行--- */#indextop_globalnavmenu li#second A{padding: 3px 0 0 0;}#indextop_globalnavmenu li#second A:hover{padding: 3px 0 0 0;}/* -----------正文上----------- *//* ---广告条--- */#indexcontent_shadow{position: absolute;z-index: 1;margin: 0;padding: 0;width: 100%;height: 10px;background-image: url(/Article/UploadFiles/200501/20050111101335681.gif);background-repeat: repeat-x;left: 0px;top: 130px !important;top: 127px;}
剩下的就是反复调试，这里由于这是以前的代码加修改后的图片，所以有问题，我稍稍调了一下，还不准确。
搞定了，页头基本上完毕，下面是阴影，阴影我用了一下absolute，因为要置与广告下，对absolute的理解也不是很透彻，使用过程中，发现div完全不居于现有的排版，它可在上重叠，也可以在下重叠，结合曾经用过的层的z-index，我对absolute的理解是它使一块脱离然后飞起来飘，更形象的理解是：你在一个平面内排版，absolute就使某一块脱离这个平面，可上可下，在于z-index的设置，既然飞起来了，不同z-index之间就不存在margin了。
将广告图片和其上阴影一起切下，开始做内容，一样，首先分析。
这里根据设计稿，我将内容分成三块，上中下三个大div，第一个div到草绿色结束，先攻它。
广告我暂时看作内容非表现，所以直接插入img，没什么说明。页面
[div]
样式表#indexcontent_top{position:relative;z-index: 2;margin: 0 auto;padding: 0;width:770px;height: 407px;}#indexcontent_top ul{clear: left;margin: 0;padding: 0;width:770px;LIST-STYLE-TYPE: none;}#indexcontent_top li#ad{float: left;clear: left;margin: 0;padding: 0;width:770px;height:105px;background: #000;}
然后自然是左边一块放登陆，右边一块放内容新闻，我嵌套div，这里学习float的使用，简单，我看过向左走、向右走滴，过程中我还定义过float: center;，似乎没作用，一直很奇怪，然后忘了删，后来验证，不要脸的w3告诉我float没center这个东西，这不违法了吗？，给左右，却不给中，TNND。笑过，看代码：页面……
样式表……/* ---登陆区域--- */#indexcontent_top_form{float: left;margin:0;padding:0;width:150px;height:302px;background-color: #9c0;}/* ---内容新闻区域---*/#indexcontent_top_adnewscontent{float: right;margin: 0;padding: 0;width: 620px;height: 302px;background-color: #09C;}
其实这里发现一个问题，注意那个广告下的黑条，高度是10px，我本来是在li完广告图片后，加了一个li，定义高度为10px，黑色。但是该死的IE，表格中的BUG继续带入DIV，那就是不能低于15px，在表格中，如果想低于15px定义，典型的老掉牙例子是表格画线，我们解决办法两个，一是插入1px/0px或0px/1px的不存在图片，一般这种方法N年前就不用了，另外一种就是去除td间的 字符就可以了。但现在我找不到好的解决办法，div怎么不放个 字符让我去删嘛，多好。我试了下加入不存在图片，可以了。但是那样好委屈哦。经过思考，在我页面的特定情况下，我找到了办法，注意我的li#id设置，广告是100px，我将li高度设置成105，背景黑色，好了，5px黑色出来了。后来我还可以用控制padding和margin的办法控制低于15px的显示，但是这始终不是很方便和通用的解决办法，比如又回到表格那个例子，空白页面中用一个无依无靠，孤孤单单的div怎么画背景线？
终于，一天结束了，我还清晰的记得那天回家路上，我短信徒弟：重构没价值，不学了，还是攻.net实在。我很嚣张的对徒弟说：等不到一周一个月了，明天我就可以完成，一个两天就可以学会的技术有什么价值？而且我还是做的一个门户站点首页。
然而实际上，第二天，我几乎放弃……
爆牙齿 2004 8 6
1、回头想想，如果是表格做导航，不但代码相对超多，而且图片必须重复切割，比如我有17个栏目，我就得切34张图片，浏览时也就要下载34张图片，然而用样式表，同样的情况只需要定义2个简单a和a:hover，加上仅两张图片就完成，而且字体是文本非图片。操作时，在页面只需要控制好一个，然后就是复制，设计时，表现与结构内容在头脑中也彻底分开，看页面上则只控制结构和内容，看样式表则只控制表现，思路非常清楚有条理。
2、导航在IE和Opera正确显示，在Mozillo上却有明显差异，这个怎么解决？!important没用了。差异看我第一帖的三图。
2、关于导航，其实我的代码是没有通过验证的，原因是id重复，我使用了一堆id="first"和一堆id="second"。后来修改时，我把设置li的padding思路换为设置上一层的margin后，就做到了对17个li只用一个样式，id都不用了。这里我给出导航验证后的代码，自己看了，不说了：页面
样式表/* ---主导航--- */#indextop_globalnav{position:relative;height: 43px;padding: 1px;border: 0;background:url(/images/default/bg_03.jpg);}#indextop_globalnavmenu{position:relative;margin: 0 auto;padding: 3px 0 0 0 !important;padding: 4px 0 0 0;width: 770px;height: 43px;}#indextop_globalnavmenu ul{margin: 0;padding: 0;list-style-type: none;}#indextop_globalnavmenu li{float: left;width: 77px;height: 20px;}#indextop_globalnavmenu li a{display: block;margin: 0;padding: 3px 0 0 0;color: #000;background:url(/images/default/bg_01.jpg) no-repeat;}#indextop_globalnavmenu li a:hover{color: #ED1C24;background:url(/images/default/bg_04.jpg) no-repeat;}
4、以上实际操作时并非像分析那样一次编写到位，而是不断调整的结果，解决一个问题再解决下一个，但是分析是尽可能的先做好。
最后给一个这一天的整体代码：