首页 > 代码库 > 跟着辛星一起用CSS美化商品列表

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

2024-07-13 22:50:53   225人阅读

     说实话，最近对CSS的关注还是蛮多的，不为别的，只是因为自己喜欢，感觉写CSS就像画家绘画一样，使用热情和激情去探索，没有了那份功利心，反而感觉是一种享受，特别有成就感，好啦，今天就分享一期自己用CSS美化商品列表的步骤把，不喜勿喷奥，有建议请留言。

      首先看一下做好之后的效果图把：


       如果读者特别不喜欢这个样式，可以点击右上角的关闭，省的自己看了心烦意乱，好，我们首先新建一个HTML文件，内容书写如下：

<html>
<head>
<title>CSS新闻列表制作</title>
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"an.css">>然后我们新建一个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;
}
然后就是最后的效果图：


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


联系
我们