模板无忧 > DivCss教程 > CSS布局实例 >

DIVCSS布局实例：DIV CSS新闻列表制作-CSS布局实例

来源:无忧整理作者:Internet 更新时间:2006-12-13 点击:

Source Code to Run [www.mb5u.com]

body {
	margin: 0;
	padding: 0; 
	font-size:12px;
}
#layout{
	background-color: #FFFFFF;
	border: 0;
	width: 400px;
	margin: 0 auto;
}
.list{
	margin: 0px 10px 20px;
	text-align: left;	
}

.list ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.list li{
	background: url(attachments/month_0612/j20061214102450.gif) repeat-x bottom; 
	/*列表底部的虚线*/
	width: 100%;	
}
.list li a{
	color: #777777;
	display: block;
	padding: 0px 0px 4px 15px;
	background: url(attachments/month_0612/q20061214102443.gif) no-repeat 0 6px;
	/*列表左边的箭头图片*/
}

.list li span{
	float: right;/*使span元素浮动到右面*/
	text-align: right;/*日期右对齐*/
}
.list li a:hover{
	color: #336699;
	background: url(attachments/month_0612/d20061214102457.gif) repeat-x bottom;
}

</style> 
</head>

[ 可先修改部分代码再运行查看效果 ]

CSS文件：

Example Source Code [www.mb5u.com]

.list{
margin: 0px 10px 20px;
text-align: left;
}

.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}

.list li{
background: url(attachments/month_0612/j20061214102450.gif) repeat-x bottom;
/*列表底部的虚线*/
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 0px 0px 4px 15px;
background: url(attachments/month_0612/q20061214102443.gif) no-repeat 0 6px;
/*列表左边的箭头图片*/
}

.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
background: url(attachments/month_0612/d20061214102457.gif) repeat-x bottom;
}

XHTML文件：

Example Source Code [www.mb5u.com]

DIVCSS布局实例：DIV CSS新闻列表制作-CSS布局实例

最新CSS布局实例

推荐CSS布局实例