标签结构复制一次。
然后是右边,类似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