| 首页 | 新闻 | 网页 | 设计 | 色彩 | 原创 | 视觉 | 素材 | 动漫 | 酷站 | 策划 | 文案 | 访谈 | 运营 | 编程 | 数据库 | 服务器 | 下载 | 图库 | 
您的位置: 幽幽天空 > 网页 > 网页制作 > HTMLCSS教程 > 文章正文 用户登录 新用户注册
          
重构之美-第三天-看见速度
作者:爆牙齿 来源:蓝色理想 更新:2005-7-31 12:46:22 错误报告 我要投稿
 
    标签结构复制一次。

    然后是右边,类似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;}
    


    速度有点快了,又开始兴奋起来,接着做下面部分。
    橙色部分和上面蓝色部分一样我就不多说了。
    而这里的右边和上面布局思路也一样,只是样式不同,然后要多复制两个。^_^

    click for full size

    页面
    
    	
    

    样式表
    
    /* --- 右侧新闻下 ---*/
    #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

    下面是页脚,更简单了

    click for full size

    好了我直接给出最后的文件,基本上兼容三大浏览器,差别很小,我用了三天,真的很开心很开心。网址:http://www.cngoldnet.com/index_webstands.aspx (这里还是有些错位,因为原始老文件丢失了,我懒得去调了,具体可见我第一篇给的截图)

    大家可以去效验一下,看看是什么结果,看到这个结果你会怎么想?所以,我一开始就说过,代码没有借鉴的价值,几乎都是废的。但是抛开效验,这可是按照标准思路将表现与内容分离了的,而且通过调试完全兼容各浏览器,认证有必要吗?

    后来接下来的几天,由于公司正好网络情况不好,于是我一直沉侵在一种骄傲中,三天的时间虽然没有最初我想的一天快,但还是很快了,我记得论坛上有人说过,对标准技术,需要2、3个月来熟悉,精通得一年半年吧,而现在我觉得我基本上已经掌握了标准。正好公司网络不好,我闲了下来,考虑许久,感激于阿捷,决定将学习及设计过程写下来,于是最初我带着骄傲,还有些许炫耀(呵呵)开始写下《重构之美-迎接网站标准化建设的来临》之文,8月3日,网络恢复正常,我将文章发布的同时,我满怀信心的登上W3去认证,认证的结果像一盆冷水从天而降,我才知道,事情原来远远没我想的那么简单。

    好了,三天到此结束,下篇小结中我将总结如下几点个人心得或者说认识吧。
    1、关于对验证的认识。
    2、关于对web标准的重新认识。
    3、关于速度和效率的问题。

    爆牙齿 2004 9 17

上一页  [1] [2] 

文章录入:skyuu    责任编辑:skyuu 
  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    JBuilder2005实现重构之重命
    Eclipse中自动重构实现探索
    JBuilder2005实现重构之杂项
    JBuilder2005实现重构之升级
    JBuilder2005实现重构之对重
    从豆瓣网站设计谈网站重构
    重构:CSDN网站未来内容Tag架
    重构之美-第二天-总结一
    重构之美-第二天-几乎放弃
    重构之美-第一天-轻松上路
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)