说实话，近期对CSS的关注还是蛮多的，不为别的，仅仅是由于自己喜欢，感觉写CSS就像画家绘画一样，使用热情和激情去探索，没有了那份功利心，反而感觉是一种享受。特别有成就感，好啦，今天就分享一期自己用CSS美化商品列表的步骤把。不喜勿喷奥。有建议请留言。
首先看一下做好之后的效果图把：
假设读者特别不喜欢这个样式。能够点击右上角的关闭，省的自己看了心烦意乱，好。我们首先新建一个HTML文件。内容书写例如以下：
<html>
<head>
<title>CSS新闻列表制作</title>
<link rel="stylesheet" type="text/css" href="an.css">
</head>
<body>
<div id = "news">
<ul class=list>
<li><strong>新闻专栏</strong><li>
<li><span>2014年7月23日</span><a href="#">辛星PHP</a></li>
<li><span>2014年7月23日</span><a href="#">辛星CSS</a></li>
<li><span>2014年7月23日</span><a href="#">辛星HTML</a></li>
<li><span>2014年7月23日</span><a href="#">辛星jQuery</a></li>
</ul>
<div>
</body>
</html>
然后我们新建一个an.css文件，我们要做的第一步，就是首先把列表的小圆点给干掉，我们书写例如以下代码：
#news ul{list-style-type: none;}
此时效果图例如以下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
下一步我们就让这个日期靠右显示，仅仅须要加一个浮动就能够了。例如以下：
#news ul{list-style-type: none;}
#news ul li span{float: right;}
此时效果图：
那么怎么让它到左边来呢，非常easy啦。仅仅须要给我们的news设定一个大小就能够了，然后加一个边框。我们加入例如以下代码：
#news{width: 300px;height: 100px;
border: 1px solid purple;
}
#news ul{list-style-type: none;}
#news ul li span{float: right;}
我们发现它溢出了。此时的效果图例如以下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
那么我们该怎么办呢？我们能够设置一下列表的边距啊，我们把它设置为0就能够了，此时代码变成以下这个样子：
#news{width: 300px;height: 100px;
border: 1px solid purple;
}
#news ul{list-style-type: none;
margin: 0px;
padding: 0px;}
#news ul li span{float: right;}
那么我们的效果就是这个样子啦：
然后我们先设置一下超链接的字体。我个人喜欢把字体的工作放到最后一步来做，由于我感觉它是影响最小的那部分。我们加入代码例如以下：
#news{width: 300px;height: 100px;
border: 1px solid purple;
}
#news ul{list-style-type: none;
margin: 0px;
padding: 0px;}
#news ul li span{float: right;}
.list li a{
color: #777777;
text-decoration: none;
}
.list li a:hover{
color: #336699;
text-decoration: none;
}
此时它的效果例如以下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
接下来，我们再改动一下字体，把我们的css文件美化一下格式，就打完收工了，最后的css文件：
#news{
width: 300px;height: 100px;
border: 1px solid purple;
}
#news ul{
list-style-type: none;
margin: 0px;
padding: 0px;}
#news ul li strong {
color: #777777;
}
#news ul li span{
float: right;
color:#777777;
}
.list li a{
color: #777777;
text-decoration: none;
}
.list li a:hover{
color: #336699;
text-decoration: none;
}
然后就是最后的效果图：
到这里就完毕了，不知道该说什么了，仅仅能说：我是辛星，传递温情。