|
| 重构之美－第二天－几乎放弃 |
| 作者：爆牙齿 来源：蓝色理想 更新：2005-7-31 12:43:02 错误报告 我要投稿 |
|
从这篇开始，我每次都整理一下几个要点，希望大家不要在一些基础问题上重复发贴提问。好了，不说废话了，直接入题吧。
第一天学到的几个技术上的基础问题：
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(/Edu/uppic/200507/20050731123908342.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(/Edu/uppic/200507/20050731123908342.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(/Edu/uppic/200507/20050731124002396.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;
}
[1] [2] [3] 下一页
|
|
| 文章录入：skyuu 责任编辑：skyuu |
上一篇文章： 重构之美－第一天－轻松上路
下一篇文章： 重构之美－第三天－看见速度 |
|
| |
用户登录 
新用户注册
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）