页面<div id="indexcontent_middle_newsleft"><ul><li id="title_blue"><a href="#" title="">最新案例分析</a></li><li id="contents_blue"><span id="img"><img src="/images/default/ad_04.gif" width="138px" height="38px" /></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析例分析分</a></span></li><li id="title_blue"><a href="#" title="">最新技术文献</a></li><li id="contents_blue"><span id="img"><img src="/images/default/ad_04.gif" width="138px" height="38px" /></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析</a></span><span id="contents"><a href="#" title="">最新案例分析例分析分</a></span></li></ul>……</div>
样式表:因为是写在一起的,所以我同时也将橙色的列出,通过我的注释应该看得出是当时整理后的结果,现在看仍然很臃肿。/* ---左侧新闻---*//* 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(/Article/UploadFiles/200501/20050111101611552.gif) 5px no-repeat #BCD7F2;}#indexcontent_middle_newsleft li#title_blue a:hover{color: #FFF;font-weight : bold;background: url(/Article/UploadFiles/200501/20050111101611401.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(/Article/UploadFiles/200501/20050111101611119.gif) 5px no-repeat #FFD1B3;}#indexcontent_middle_newsleft li#title_orange a:hover{color: #FFF;font-weight : bold;background: url(/Article/UploadFiles/200501/20050111101611296.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;}
页面……<div id="indexcontent_middle_newsrightup"><ul><li id="up"><span id="title"><a href="#" title="">点击查看该专题更多文章</a></span><span id="content"><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p></span></li>……说明,这里复制三个LI</ul></div>
样式表/* --- 右侧新闻上 ---*/#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;}
页面<div id="indexcontent_middle_newsrightdown"><ul><li id="down"><span id="title"><a href="#" title="">部颁文件</a></span><span><p id="img"></p><p id="text"><a href="#" title="">重汽集团专用汽车公司科协技术专家组</a></p></span><span id="content"><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p><p><a href="#" title="">点击查看该专题更多文章</a></p></span></li>……这里复制六个LI</ul></div>
样式表/* --- 右侧新闻下 ---*/#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;}
联系客服