DIVCSS布局實例：DIV CSS新聞列表制作_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

代碼調(diào)試框 [www.hl5o.cn]

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文件：

示例代碼 [www.hl5o.cn]

.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文件：

示例代碼 [www.hl5o.cn]