重构之美－迎接网站设计的来临

然后是右边，类似indexcontent_top_adnewscontent这块的思路，只不过样式多一点，同样只需要还原一个，然后在XHTML中复制四次。5px的红线和虚线都是使用border实现。箭头和图片标题是表现，作为背景定位，小方块做成图片定位在背景，和文字对齐调了不少时间（其实现在知道可以用list-style-image来实现一句话前面的小图片），没什么了吧，看代码：

页面

	……
	<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;}

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

 << 上一页  [11] [12] [13] 下一页