跟着辛星一起用CSS美化商品列表

     说实话,最近对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;}
此时效果图如下:



下一步我们就让这个日期靠右显示,只需要加一个浮动就可以了,如下:

#news ul{list-style-type: none;}
#news ul li span{float: right;}

此时效果图:


那么怎么让它到左边来呢,很简单啦,只需要给我们的news设定一个大小就可以了,然后加一个边框,我们添加如下代码:


#news{width: 300px;height: 100px;
    border: 1px solid purple;
}

#news ul{list-style-type: none;}
#news ul li span{float: right;}

  我们发现它溢出了,此时的效果图如下:


  那么我们该怎么办呢?我们可以设置一下列表的边距啊,我们把它设置为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;
}

此时它的效果如下:


接下来,我们再修改一下字体,把我们的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;
}
然后就是最后的效果图:



到这里就完成了,不知道该说什么了,只能说:我是辛星,传递温情。




跟着辛星一起用CSS美化商品列表,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。