中财网天才相师精校txt百度云:重构之美（四）
来源：百度文库 编辑：中财网 时间：2024/05/03 03:47:47
和上次一样，整理学习要点，其实第二天主要还是在对第一天的知识熟悉和运用：
第二天学到的几个技术基础问题。
1、所谓DIV+CSS并非是将div标记一用到底，应充分使用其他标记，比如UL、LI、P、SPAN等。
2、可以通过整合的方法缩减代码。比如background: url() (color) (position) (repeat);等。不过我建议，初学者在最初最好还是老老实实写全代码，这样既便于理解也便于以后在需要分开写时能知道如何写。
3、多角度分析结构，耐心细心的调试。
其中第三点非常重要，它其实都不属于技术问题了，是一个心态问题。不耻下问是美德，但是不是事无巨细都需要问的，我做完页面花了三天，修改以通过认证花了两天，总共五天的时间，在这五天内，我只问过一个问题，是关于不使用一个ID来定义一个区域的各种表现的问题，那个问题在我花了4个小时都没解决情况下才发帖询问，在发帖没效果后，我又花了2个小时，终于自己解决了。六个小时的时间只是解决了一个小问题，或许你会认为不值得，会认为我太固执了，六个小时的时间是什么概念，我很清楚，如果使用表格来还原这个页面，六个小时我可以完美完成两次，包括需要的网页特效。但我仍然将它花在了解决一个小问题上，为什么？因为对于一个问题而言，经验由两部分组成，一半是问题解决的直接经验，一半是问题周边的间接经验，如果别人帮助了我，我将得不到间接经验，而大多数情况下，间接经验更重于直接经验，因为它不是单一的，是多面的，它将对你以后考虑问题的宽度产生很大影响。如果你哪天像周星驰一样恍然大悟，一挥拳头：有道理有道理，我怎么没想到呢？那就表明你的间接经验不如对方了。尤其是当大家都站在同一起跑线上的时候，拼得就是间接经验。所以不要随便提问，首先全力的分析、查资料、看书，在万不得已的情况下才去选择提问，要相信自己不比别人笨。
说到这里多说两件事：
1、关于我提的问题，有人说不用ID，可以用CLASS呀。是的，我用过CLASS，没深究理论，不过实践中，如果将ID定义的样式换成CLASS来表现好像不行，会有部分失效，至于为什么，我没时间去研究，在特定情况下最后我换了一种角度解决了问题，在介绍修改获得认证过程中我会将这个问题详细告诉大家。
2、我说如果用表格还原，三个小时足以，而用DIV，我花了四、五十个小时，这里就有很明显的速度、效率差别，我想这是阻碍大家广泛使用DIV的很大原因，在获得认证的两天中，我也在犹豫，究竟值不值？我会在下篇小结中详细说明对此我得出的结论。
好，入题。
第三天 看见速度
7月30日，经过上一天的打击，我安安静静的来到公司，开始继续制作。
分析：最初我是按照画表格的思路将这一块按左边蓝色和橙色之间分界为中、下两部分，所以命名为indexcontent_middle_XXX和indexcontent_botton_XXX，很快我发现应该是分为左、右两部分，因为左边四块样式完全一样，仅色彩不一样。不过正由于色彩的区别，不能对一个DIV使用一个ID（其实可以用ID定义布局，CLASS定义具体表现[
第二天学到的几个技术基础问题。
1、所谓DIV+CSS并非是将div标记一用到底，应充分使用其他标记，比如UL、LI、P、SPAN等。
2、可以通过整合的方法缩减代码。比如background: url() (color) (position) (repeat);等。不过我建议，初学者在最初最好还是老老实实写全代码，这样既便于理解也便于以后在需要分开写时能知道如何写。
3、多角度分析结构，耐心细心的调试。
其中第三点非常重要，它其实都不属于技术问题了，是一个心态问题。不耻下问是美德，但是不是事无巨细都需要问的，我做完页面花了三天，修改以通过认证花了两天，总共五天的时间，在这五天内，我只问过一个问题，是关于不使用一个ID来定义一个区域的各种表现的问题，那个问题在我花了4个小时都没解决情况下才发帖询问，在发帖没效果后，我又花了2个小时，终于自己解决了。六个小时的时间只是解决了一个小问题，或许你会认为不值得，会认为我太固执了，六个小时的时间是什么概念，我很清楚，如果使用表格来还原这个页面，六个小时我可以完美完成两次，包括需要的网页特效。但我仍然将它花在了解决一个小问题上，为什么？因为对于一个问题而言，经验由两部分组成，一半是问题解决的直接经验，一半是问题周边的间接经验，如果别人帮助了我，我将得不到间接经验，而大多数情况下，间接经验更重于直接经验，因为它不是单一的，是多面的，它将对你以后考虑问题的宽度产生很大影响。如果你哪天像周星驰一样恍然大悟，一挥拳头：有道理有道理，我怎么没想到呢？那就表明你的间接经验不如对方了。尤其是当大家都站在同一起跑线上的时候，拼得就是间接经验。所以不要随便提问，首先全力的分析、查资料、看书，在万不得已的情况下才去选择提问，要相信自己不比别人笨。
说到这里多说两件事：
1、关于我提的问题，有人说不用ID，可以用CLASS呀。是的，我用过CLASS，没深究理论，不过实践中，如果将ID定义的样式换成CLASS来表现好像不行，会有部分失效，至于为什么，我没时间去研究，在特定情况下最后我换了一种角度解决了问题，在介绍修改获得认证过程中我会将这个问题详细告诉大家。
2、我说如果用表格还原，三个小时足以，而用DIV，我花了四、五十个小时，这里就有很明显的速度、效率差别，我想这是阻碍大家广泛使用DIV的很大原因，在获得认证的两天中，我也在犹豫，究竟值不值？我会在下篇小结中详细说明对此我得出的结论。
好，入题。
7月30日，经过上一天的打击，我安安静静的来到公司，开始继续制作。
分析：最初我是按照画表格的思路将这一块按左边蓝色和橙色之间分界为中、下两部分，所以命名为indexcontent_middle_XXX和indexcontent_botton_XXX，很快我发现应该是分为左、右两部分，因为左边四块样式完全一样，仅色彩不一样。不过正由于色彩的区别，不能对一个DIV使用一个ID（其实可以用ID定义布局，CLASS定义具体表现[
]， 只是当时我不知道，完全陷入ID的使用，忽略了CLASS），所以我还是按上下结构来制作。先是蓝色的一块，我直接给出代码了，没太多可讲的
这里有个问题，标题不能上下居中，我设置margin和padding，在IE和Opera中不听话，而Mozilla中正常。好，定义好一个，下一个只需要将页面中的
速度有点快了，又开始兴奋起来，接着做下面部分。
橙色部分和上面蓝色部分一样我就不多说了。
而这里的右边和上面布局思路也一样，只是样式不同，然后要多复制两个。^_^
这就是后来修改中我遇到的那个问题。大家可以看看这里。
http://www.blueidea.com/bbs/newsdetail.asp?id=1675224&posts=currentposts
下面是页脚，更简单了
好了我直接给出最后的文件，基本上兼容三大浏览器，差别很小，我用了三天，真的很开心很开心。网址：http://www.cngoldnet.com/index_webstands.aspx （这里还是有些错位，因为原始老文件丢失了，我懒得去调了，具体可见我第一篇给的截图）
大家可以去效验一下，看看是什么结果，看到这个结果你会怎么想？所以，我一开始就说过，代码没有借鉴的价值，几乎都是废的。但是抛开效验，这可是按照标准思路将表现与内容分离了的，而且通过调试完全兼容各浏览器，认证有必要吗？
后来接下来的几天，由于公司正好网络情况不好，于是我一直沉侵在一种骄傲中，三天的时间虽然没有最初我想的一天快，但还是很快了，我记得论坛上有人说过，对标准技术，需要2、3个月来熟悉，精通得一年半年吧，而现在我觉得我基本上已经掌握了标准。正好公司网络不好，我闲了下来，考虑许久，感激于阿捷，决定将学习及设计过程写下来，于是最初我带着骄傲，还有些许炫耀（呵呵）开始写下《重构之美－迎接网站标准化建设的来临》之文，8月3日，网络恢复正常，我将文章发布的同时，我满怀信心的登上W3去认证，认证的结果像一盆冷水从天而降，我才知道，事情原来远远没我想的那么简单。
好了，三天到此结束，下篇小结中我将总结如下几点个人心得或者说认识吧。
1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。
爆牙齿 2004 9 17
页面
样式表：因为是写在一起的，所以我同时也将橙色的列出，通过我的注释应该看得出是当时整理后的结果，现在看仍然很臃肿。/* ---左侧新闻---*//* ALL */#indexcontent_middle_newsleft{position: relative;float: left;width: 150px;height: auto;background: #FFF;}#indexcontent_middle_newsleft ul{margin: 0;padding: 0;width: 150px;height: 338px;LIST-STYLE-TYPE: none;background: #FFF;}#indexcontent_middle_newsleft li{float: left;text-align: left;margin: 0;padding: 0;}#indexcontent_middle_newsleft span{float: left;width: 138px;margin: 5px 5px 8px 5px;padding: 0;}#indexcontent_middle_newsleft span#img{height: 38px;border: 1px solid #FFF;background: #DDD;}#indexcontent_middle_newsleft span#contents{width: 125px;margin: 0 12px 1px 12px;}#indexcontent_middle_newsleft span#contents a{color: #FFF;}#indexcontent_middle_newsleft span#contents a:hover{color: #000;}/* blue */#indexcontent_middle_newsleft li#title_blue a{float: left;width: 133px;height: 17px;margin: 1px 0 1px 0;padding: 0 0 0 17px;color: #1F79D2;background: url(/Article/UploadFiles/200501/20050111101611552.gif) 5px no-repeat #BCD7F2;}#indexcontent_middle_newsleft li#title_blue a:hover{color: #FFF;font-weight : bold;background: url(/Article/UploadFiles/200501/20050111101611401.gif) 5px no-repeat #000;}#indexcontent_middle_newsleft li#contents_blue{width: 150px;height: 150px;background: #1F79D2;}/* orange */#indexcontent_middle_newsleft li#title_orange a{float: left;width: 133px;height: 17px;margin: 1px 0 1px 0;padding: 0 0 0 17px;color: #F60;background: url(/Article/UploadFiles/200501/20050111101611119.gif) 5px no-repeat #FFD1B3;}#indexcontent_middle_newsleft li#title_orange a:hover{color: #FFF;font-weight : bold;background: url(/Article/UploadFiles/200501/20050111101611296.gif) 5px no-repeat #000;}#indexcontent_middle_newsleft li#contents_orange{width: 150px;height: 150px;background: #F60;}#indexcontent_middle_newsleft li#line{width: 150px;height: 15px;background: #FC0;border-top:1px solid #FFF;}这里有个问题，标题不能上下居中，我设置margin和padding，在IE和Opera中不听话，而Mozilla中正常。好，定义好一个，下一个只需要将页面中的
- 标签结构复制一次。
然后是右边，类似indexcontent_top_adnewscontent这块的思路，只不过样式多一点，同样只需要还原一个，然后在XHTML中复制四次。5px的红线和虚线都是使用border实现。箭头和图片标题是表现，作为背景定位，小方块做成图片定位在背景，和文字对齐调了不少时间（其实现在知道可以用list-style-image来实现一句话前面的小图片），没什么了吧，看代码：
页面……
样式表/* --- 右侧新闻上 ---*/#indexcontent_middle_newsrightup{position: relative;float: left;width: 620px;height: auto;margin: 0;padding: 0;}#indexcontent_middle_newsrightup ul{text-align: left;display: block;margin: 0;padding: 0;width: 620px;height: 338px;LIST-STYLE-TYPE: none;background: url(/images/default/bg_12.jpg);}#indexcontent_middle_newsrightup li{float:left !important;float: right;margin: 0;padding: 0;width: 300px;height: 164px;}/*---IE 3px BUG! rightway:set li float:left.---#indexcontent_middle_newsrightup li#up{float:left: !important;margin: 5px 5px 0 5px;padding: 0;width: 300px;height: 159px;background: #000;}*/#indexcontent_middle_newsrightup li#up{margin: 5px 5px 0 5px !important;margin: 5px 4px 0 4px;padding: 0;width: 300px;height: 159px;}#indexcontent_middle_newsrightup span{float: left;margin: 0;padding: 0;width: 300px;}#indexcontent_middle_newsrightup span#title{float: left;margin: 0;padding: 7px 0 7px 0;width: 298px;height: 16px;text-align: right;border-bottom: 1px dashed #999;border-left: 1px dashed #999;border-right: 1px dashed #999;border-top: 5px solid #ED1C24;background: url(/images/default/bg_13.gif) no-repeat;}#indexcontent_middle_newsrightup span#title a{font-size: 0.8em;margin: 5px;padding: 0;color: #999;}#indexcontent_middle_newsrightup span#title a:hover{margin: 5px;padding: 0;color: #ED1C24;font-size: 1em;}#indexcontent_middle_newsrightup span#content{float: left;margin: 0;padding: 14px 0 0 0;width: 298px;height: 109px;text-align: left;border-bottom: 0;border-left: 1px dashed #999;border-right: 1px dashed #999;border-top: 0;background: url(/images/default/bg_14.gif) 10px 18px no-repeat;}#indexcontent_middle_newsrightup p{margin: 0;padding: 1px 0 0 27px;color: #ED1C24;font-size: 1em;}#indexcontent_middle_newsrightup p a{color: #006;}#indexcontent_middle_newsrightup p a:hover{color: #ED1C24;}速度有点快了，又开始兴奋起来，接着做下面部分。
橙色部分和上面蓝色部分一样我就不多说了。
而这里的右边和上面布局思路也一样，只是样式不同，然后要多复制两个。^_^
页面
样式表/* --- 右侧新闻下 ---*/#indexcontent_middle_newsrightdown{position: relative;float: right;width: 620px;height: 265PX;margin: 0;padding: 0;background: #FFF;}#indexcontent_middle_newsrightdown ul{text-align: left;display: block;margin: 0;padding: 15px 0 0 0;width: 620px;height: auto;LIST-STYLE-TYPE: none;background: url(/images/default/bg_12.jpg) repeat-x;}#indexcontent_middle_newsrightdown li{float: left;margin: 0 1px 5px 5px !important;margin: 0 2px 5px 3px;padding: 0;width: 198px;height: 118px;border: 1px solid #999;background: url(/images/default/bg_15.jpg) 1px 1px repeat-x;}#indexcontent_middle_newsrightdown span{float: left;margin: 0;padding: 0;width: 198px;}#indexcontent_middle_newsrightdown span#title{float: left;margin: 0;padding: 2px 0 0 7px;width: 191px;height: 17px;text-align: left;font-size: 9pt;font-weight: bold;border-bottom: 1px solid #999;}#indexcontent_middle_newsrightdown span#title a{color: #000;}#indexcontent_middle_newsrightdown span#title a:hover{color: #ED1C24;}#indexcontent_middle_newsrightdown p#img{float: left;margin: 5px !important;margin: 5px 5px 5px 3px;padding: 0;width: 60px;height: 33px;border: 1px solid #999;background: #9C0;}#indexcontent_middle_newsrightdown p#text{float: right;margin: 8px 5px 0 0 !important;margin: 8px 2px 0 0;padding: 0;width: 120px;}#indexcontent_middle_newsrightdown p#text a{color: #900;}#indexcontent_middle_newsrightdown p#text a:hover{color: #ED1C24;}#indexcontent_middle_newsrightdown span#content{float: left;margin: 5px;padding: 0;width: 188px;height: 48px;background: #9C0;background: url(/images/default/bg_14.gif) 1px 3px no-repeat;}#indexcontent_middle_newsrightdown p{margin: 0;padding: 1px 0 0 13px;font-size: 1em;}#indexcontent_middle_newsrightdown p a{color: #006;}#indexcontent_middle_newsrightdown p a:hover{color: #ED1C24;}这就是后来修改中我遇到的那个问题。大家可以看看这里。
http://www.blueidea.com/bbs/newsdetail.asp?id=1675224&posts=currentposts
下面是页脚，更简单了
好了我直接给出最后的文件，基本上兼容三大浏览器，差别很小，我用了三天，真的很开心很开心。网址：http://www.cngoldnet.com/index_webstands.aspx （这里还是有些错位，因为原始老文件丢失了，我懒得去调了，具体可见我第一篇给的截图）
大家可以去效验一下，看看是什么结果，看到这个结果你会怎么想？所以，我一开始就说过，代码没有借鉴的价值，几乎都是废的。但是抛开效验，这可是按照标准思路将表现与内容分离了的，而且通过调试完全兼容各浏览器，认证有必要吗？
后来接下来的几天，由于公司正好网络情况不好，于是我一直沉侵在一种骄傲中，三天的时间虽然没有最初我想的一天快，但还是很快了，我记得论坛上有人说过，对标准技术，需要2、3个月来熟悉，精通得一年半年吧，而现在我觉得我基本上已经掌握了标准。正好公司网络不好，我闲了下来，考虑许久，感激于阿捷，决定将学习及设计过程写下来，于是最初我带着骄傲，还有些许炫耀（呵呵）开始写下《重构之美－迎接网站标准化建设的来临》之文，8月3日，网络恢复正常，我将文章发布的同时，我满怀信心的登上W3去认证，认证的结果像一盆冷水从天而降，我才知道，事情原来远远没我想的那么简单。
好了，三天到此结束，下篇小结中我将总结如下几点个人心得或者说认识吧。
1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。
爆牙齿 2004 9 17