|
| 重构之美－第三天－看见速度 |
| 作者：爆牙齿 来源：蓝色理想 更新：2005-7-31 12:46:22 错误报告 我要投稿 |
|
和上次一样，整理学习要点，其实第二天主要还是在对第一天的知识熟悉和运用：
第二天学到的几个技术基础问题。
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），所以我还是按上下结构来制作。先是蓝色的一块，我直接给出代码了，没太多可讲的
样式表：因为是写在一起的，所以我同时也将橙色的列出，通过我的注释应该看得出是当时整理后的结果，现在看仍然很臃肿。
/* ---左侧新闻---*/
/* 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(/Edu/uppic/200507/20050731124604431.gif) 5px no-repeat #BCD7F2;
}
#indexcontent_middle_newsleft li#title_blue a:hover
{
color: #FFF;
font-weight : bold;
background: url(/Edu/uppic/200507/20050731124605688.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(/Edu/uppic/200507/20050731124605967.gif) 5px no-repeat #FFD1B3;
}
#indexcontent_middle_newsleft li#title_orange a:hover
{
color: #FFF;
font-weight : bold;
background: url(/Edu/uppic/200507/20050731124605415.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中正常。好，定义好一个，下一个只需要将页面中的
|
|
| 文章录入：skyuu 责任编辑：skyuu |
上一篇文章： 重构之美－第二天－几乎放弃
下一篇文章： 重构之美－第二天－总结一 |
|
| |
用户登录 
新用户注册
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）