偶看新闻挂车培训中心:重构之美（三）
来源：百度文库 编辑：偶看新闻 时间：2024/05/04 18:48:25
第一天学到的几个技术上的基础问题：
1、使用ID将#开头的表现样式赋予DIV，UL，LI，P，SPAN等元素。
2、使用margin: 0 auto;语句将DIV等元素页内或嵌套居中。
3、使用body{margin: 0; padding: 0;}样式将页面在3大浏览器中贴边。
4、使用margin、padding、border进行间距的控制。（非常有用）
5、背景图片可平铺-repeat，可精确定位-position。
6、通过设置a:与a:hover的样式实现链接翻转的各种样式效果，背景，边框，字体等等。
7、理解display: block;的用法。（不愧为一种布局元素，在布局上作用很大，我一直在使用，但直到第三天才有所领悟。不仅仅是做多行多列的导航，不夸张的说，整个页面就是用它来布局的。）
8、position: relative; 与 position: absolute; 的区别，理解float的使用。
9、通过!important 调节IE浏览器的兼容性。
10、了解样式可继承，并由此可以减少很多重复的样式代码，优化样式表。
通过一些讨论，关于div等IE 15px高度BUG问题，感谢No3和cloudchen各给出了一个很好的解决办法：
1、设置line-height，例：XX{line-height: 1px; }
2、设置overflow，例：XX{overflow: hidden; height: 1px}
个人感觉，line-height很直观简单，overflow稍需理解。
和，于是看了看其他网站代码，发现可以使用 ，所以对于每个图片旁边的三行标题，正好我刚使用了
7月29日，挂着笑容，我走进公司。我这个‘自大狂’免不了在徒弟面前炫耀一下昨天的战果：看看，NO TABLE!今天我就搞完它。
孤芳自赏完毕，马上集中精神，进入工作状态，毕竟昨天一天我只完成了页头，话放出去了，要实现，还得抓点紧，不是于是呼我就找了一个位子，坐了下去……汗……
先攻左边登陆区域表单，在这个时候我的概念中只有 div/ul/li 三个元素，并且不是很清楚具体的含义。反正当成类似 table/tr/td 的关系来用。在用table的时候，我的习惯是不到万不得已，绝对不嵌套表格，尽量通过页面分析和熟练的表格技巧，充分切分表格，物尽所用，所以再复杂的页面，我的table布局都很少嵌套3层。延续这个思路，能够用li解决的就尽量不多用ul，能够用ul解决，尽量不嵌套div，后来包括ul和li的嵌套，能不嵌套尽量不嵌套。我不知道这种做法对不对，因为至今我都不是很清楚这三个标记的准确含义及使用方法。但是至少我觉得应该物尽所用，而且代码可读行好像也比较强。我见过一些朋友的页面，真的是纯div+css，代码中除了div就没了，且不说div嵌套是否会影响速度，光代码也很难分清层次结构，可读性差。
后来我发现，几个元素，div/ul/li/p/span等的应用是否合理十分影响去掉样式表后文本页面的主次结构。很多时候我们完全可以通过不同的样式表使不同的页面结构代码获得完全相同的表现，但是一旦去掉样式表，那么哪种结构更能体现文本页面的主次之分，就值得考虑了。目前我正在摸索这方面，准确说就是调试表现的兼容性同时，调试文本页面的可读性。
越说越远了，回头看页面代码，用户注册和忘记密码两块的做法和导航一致，这里说说border的使用，记得对table使用边框样式的时候我们是无法设置某一边为0px的，如果我们只需要3个边框，另外一边就得设置为1px相应背景色，但是一些情况下会出现断点，比如目前这两块的边框，不使用背景图片是无法用table完美还原的。而div则避免这种情况，0px可以用在任何一边。虽然这只是一个小细节，但对完美还原的帮助却不小。
另外过程中，我发现其他页面代码中背景的样式可以一气呵成，于是我简单的将背景色background-color: #000; 中的色彩代码加到背景图片语句中变成：background-image: url(XXX) #000; 奇怪，怎么没变化，再加上no-repeat，还是没变化，郁闷，算了，不多想了，还是老老实实使用分开写吧。页面…………
样式表.botton_01{width: 50px;height: 20px;border: 1px solid #360;background-color: #FFF;}.textbox_01{width: 93px;height: 15px;margin: 5px;padding: 1px;background:url(/Article/UploadFiles/200501/20050111101525617.gif) repeat-x;border: 1px solid #360;font-size: 9pt;vertical-align: middle;}.select_01{width: 95px;width: 93px !important;height: 20px;margin: 5px;padding: 1px;background:url(/Article/UploadFiles/200501/20050111101525617.gif) repeat-x;border: 1px solid #360;font-size: 9pt;vertical-align: middle;}……#indexcontent_top_form li#name{padding: 5px 0 0 7px;height: 24px;}#indexcontent_top_form li#pw{padding: 0 0 0 7px;height: 23px;}#indexcontent_top_form li#select{padding: 0 0 0 7px;}#indexcontent_top_form li#submit{float: right;padding: 0 6px 0 0;width:50px;height:20px;}#indexcontent_top_form li{FLOAT: left;DISPLAY: block;TEXT-ALIGN: center;margin: 0;padding: 0;}#indexcontent_top_form li a{margin: 4px 0 0 0;padding: 2px 0 0 2px;width:71px;height:15px;border: 1px dashed #360;color: #666;DISPLAY: block;TEXT-ALIGN: center;text-decoration: none;}#indexcontent_top_form li#text_01 a:hover{color: #ED1C24;background-color: #E5F2BF;}#indexcontent_top_form li#text_02 a{border-top: 1px dashed #360;border-right: 1px dashed #360;border-bottom: 1px dashed #360;border-left: 0;}#indexcontent_top_form li#text_02 a:hover{color: #ED1C24;border-top: 1px dashed #360;border-right: 1px dashed #360;border-bottom: 1px dashed #360;border-left: 0;background-color: #E5F2BF;}……
代码出来后，就是反复的调节padding和margin，然而失败的是我调了近一上午都调不好，完成不了对设计稿的完美还原，我试了一次又一次，方法用了一种又一种都不行，总是有地方宽，有地方窄，上下不居中，左右不居中等等，另外IE的BUG又跑出来了，对于贴边的px设置总是不能准确的体现，经过一上午的奋斗，依旧无法成功，有兴趣可以查看设计稿和页面截图，差别很大。这让我很不愉快！这让我无比怀恋表格，那可只需要几分钟就可以完美还原！信心倍受打击，一上午时间无法还原一个简单表单，还号称今天要完成设计，还完得了啥？中午吃完饭，休息一下，决定先不管表单了，继续向下做。
第一件事，还是先分析。
右边内容新闻这一块，显然是动态的，要和后台配合，如果顺序做下来到没什么，但这部分很明显结构是一样的，我希望能用repeater重复显示，显然只需要设置一块的样式，我还不知道可行否，但觉得应该这么去考虑。不过通过设计稿可以看出由于有3条白色分界线的存在，所以只做一个样式来完美还原不可能，这时我想到了另外一个办法，我我只定义一块的上和左边界，这样虽然右边界会少一条线，但不是很明显，为了repeater，忍了。至于排版，display: block;，和导航一个手法。但是，但是，我注意到中间2px的黑色分界，这个，这个，想了半天，最后放弃了前面repeater的想法，算了，还是做成4块吧。内容下一步考虑，先布局。于是代码如下：
为了大家看清嵌套，我把上下div也给出来了。页面
样式表/* ---内容新闻区域---*/#indexcontent_top_adnewscontent{float: right;margin:0;padding:0;width:620px;height:auto;}#indexcontent_top_adnewscontent ul{float: left;margin:0;padding:0;width:620px;height:auto;LIST-STYLE-TYPE: none;background: #000;}#indexcontent_top_adnewscontent li{float: left;DISPLAY: block;TEXT-ALIGN: left;width: 302px;height: 142px;padding: 3px;background:url(/Article/UploadFiles/200501/20050111101527952.jpg) 1px 1px repeat-x #FFF;line-height : 17px;}#indexcontent_top_adnewscontent li#adnews_01{margin: 0 0 5px 1px;}#indexcontent_top_adnewscontent li#adnews_02{width: 303px;margin: 0 0 5px 0;}#indexcontent_top_adnewscontent li#adnews_03{height: 143px;margin: 0 0 0 1px;}#indexcontent_top_adnewscontent li#adnews_04{height: 143px;width: 303px;margin: 0 0 0 0;}
反复调啊调，还是padding和margin，一个下午快过去了，IE对贴边距离不能准确体现的问题又冒出来了，我简直无计可施，相比opera和mozilla就很听话，但是我能放弃IE吗？不可能，宁愿迁就IE，!important似乎作用不大，有时候似乎IE也认可!improtant，没时间去研究到底!improtant出了什么问题了。几个小时就是乏味的调调调，又始终调不好，伴随着拳头在键盘上落下，鼠标在天空中飞扬，时不时还得出去走走，抽几支烟，怀恋一下表格。最终我实在没办法做到完美还原了，只好换了一种表现形式，先凑合着。我把对比图给出，大家可以看到，差别很大的。可能有人会觉得在这里过分的注重细节了，但我不觉得，我觉得所有的表现设计应该在设计稿里体现，做页面的部分只是一个还原过程，尽量不在制作过程中去进行版面设计。如果制作不能准确还原，那么就会对设计加以限制。
设计稿：
还原页面
另外，说一个我的经验，算经验吧：做网页设计的时候不是天马行空、随心所欲的，应该充分考虑到制作。对于我一般而言，单个页面的制作时间几乎忽略不计，根本不用考虑太多，也没什么难度，因为我在做设计的时候，就充分考虑进了制作的合理和限制，所以当设计稿完成之时，页面的制作也就在心中完成了。表格的切分，嵌套，切割图片时gif和jpg的分界，甚至高度宽度间距，样式表的使用等等全部心中有数，制作自然轻轻松松。
出现无法还原的情况，我只好归于我的div技术还不好，毕竟表格我用了4年，而div从接触到运用才不到2天，另外设计稿也不是基于div来设计的，这么一想，稍稍释然。下班了，徒弟伸过头来，我哭丧着脸，很沮丧的告诉她：唉，今天做不完了。她走了，我留下，继续向下做。
突然发现background的正确表达，于是回头回头，将所有的background属性精简，也算郁闷中一大快事。
对于内容，分成3块，标题、内容、更多，这时我依旧不清楚/
/
，代码如下：
页面我只给出一个li的定义，其他都是复制粘贴了。页面
◆ 青岛市2001-2002年度金桥工程科技咨询先进集体
1、青岛捷能汽轮机股份有限公司科协技术专家组
2、铁道部南车四方机车股份有限公司科协技术专家组
3、青岛海晶化工集团有限公司科协技术专家组
4、重汽集团专用汽车公司科协技术专家组
5、青岛钢铁集团公司科协技术专家组
6、海军四八零八厂科协技术专家组| 详细内容|
样式表#indexcontent_top_adnewscontent li#adnews_01{margin: 0 0 5px 1px;}#indexcontent_top_adnewscontent li#adnews_02{width: 303px;margin: 0 0 5px 0;}#indexcontent_top_adnewscontent li#adnews_03{height: 143px;margin: 0 0 0 1px;}#indexcontent_top_adnewscontent li#adnews_04{height: 143px;width: 303px;margin: 0 0 0 0;}h3{margin: 0;padding: 0;font-size : 9pt;font-weight : bold;font-family : 宋体;}h3 a{text-decoration: none;}h3 a:link{color: #000;}h3 a:visited{color: #000;}h3 a:hover{color: #ED1C24;}h4{margin: 4px 10px 0 10px;padding: 0;color: #006;font-size : 9pt;font-weight : normal;font-family : 宋体;}h5{color: #900;margin: 0;padding: 0;text-align : right;font-size : 9pt;font-weight : bold;font-family : 宋体;}h5 a{text-decoration: none;}h5 a:link{font-weight : normal;color: #900;}h5 a:visited{font-weight : normal;color: #900;}h5 a:hover{font-weight : normal;color: #ED1C24;}
剩下又是padding，margin的调整，不过调了一天的padding，margin，现在调整速度也较快了。做完这部分就赶快扔掉，不再想，再想就要发疯了。继续向下做。
这一块最初我看作是中间一块，命名div为indexcontent_middle。先解决这一块的上部分，左边广告，右边专题区域。难度依然是上下两条2px的黑色分界，IE会不听话的贴边。对于广告那块，我最终的办法是设置为背景图，虽然这样不好，假如使用FLASH就不行了，但是折腾了一天，没心力了。对于右边，调了一下，可以使用margin和!important解决。中间有个插曲，我依旧不知道有用，其他两个没用，纳闷，一查样式表手册，哦，原来
显然不合理。但是，但是，我再也不想去动那一块了，先不管了。对于专题区域的布局，display: block;，好，代码如下：
页面
样式表/* -----------正文中----------- */#indexcontent_middle{position: relative;width: 770px;height: 750px;margin: 0 auto;padding: 0;background: #FC0;}/* ---广告区域---*/#indexcontent_middle_ad{float: left;width: 150px;height: 54px;background-color: #ED1C24;}#indexcontent_middle_ad ul{margin: 0;padding: 0;width: 150px;height: 54px;LIST-STYLE-TYPE: none;background: url(/Article/UploadFiles/200501/20050111101528973.jpg) 0px 2px no-repeat;}/* ---专题区域---*/#indexcontent_middle_subject{float: right;width: 620px;height: 54px;background-color: #000;}#indexcontent_middle_subject ul{margin: 0;margin-top: 3px;margin-top: 2px !important;padding: 0;width: 620px;height: 50px;display: block;LIST-STYLE-TYPE: none;background: url(/Article/UploadFiles/200501/20050111101528769.jpg);}#indexcontent_middle_subject li{float: left;margin: 0;padding: 0;}#indexcontent_middle_subject li#img{margin: 4px 6px 3px 7px;border: 1px #ED1C24 solid;padding: 0;width: 78px;height: 40px;background: #ED1C24;}#indexcontent_middle_subject li#text{text-align: left !important;margin: 5px 0 3px 0;padding: 0;}h6{color: #900;margin: 0;padding: 0;text-align : left;font-size : 9pt;font-family : 宋体;line-height : 14px;}h6 a{text-decoration: none;}h6 a:link{font-weight : normal;color: #900;}h6 a:visited{font-weight : normal;color: #900;}h6 a:hover{font-weight : normal;color: #ED1C24;}
调完这个，天色很暗了，不能再做了，再晚就没车回家了，两脚一蹬，椅子向后一滑，我远远的，歪着头，斜斜的望着今天的成绩。真是悲哀，还叫嚷着今天就要做完，看看，这才做了多少，还有多少没做，即便做了的不少也是勉强完成，我太狂妄了。
不再嚣张，我就像一个战败的将军一样，灰溜溜的离开空荡的公司，灰溜溜的搭上车，灰溜溜的回到家，灰溜溜的钻进被窝，灰溜溜的睡。
后来回想，虽然这一天我并没有完成多少，但是坚持不懈的反复调试和思考摸索实践，让我对标准有了更深入的理解，在一些属性的使用上也开始熟练起来，这些一堆积，终于，速度在第三天出来了。
爆牙齿 2004 8 19
因为这一整天，我做的最多的就是无穷尽的调调调，所以我没办法很详细的写出来，尽力了。
最后和上次一样，给一个这一天的全部代码，没重新调，大概也许差不多吧：
