1. 商品列表页样式
2. 案例说明
<!DOCTYPE html>
<html>
<head>
<title>商品列表</title>
<meta charset="utf-8">
<style>
*{
font-family: '宋体',
font-size:12px;
}
#main {
width: 950px;
border: 1px solid gray;
}
img {
width: 160px;
height: 160px;
}
.img {
border: 1px solid gray;
margin-left: 5px;
margin-right: 5px;
}
.market-price,.member-price {
color: gray;
}
.market-price i {
color: orange;
text-decoration: line-through;
}
.member-price i {
color: orange;
}
ul {
list-style: none;
overflow: hidden;
}
ul li {
float: left;
}
a {
text-decoration: none;
}
a:link {
color: black;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
<li>
<div class="img"><img src="002.jpg"></div>
<div><a href="#">iphone7plus</a></div>
<div class="market-price">市场价：<i>￥5000</i></div>
<div class="member-price">会员价：<i>￥5000</i></div>
</li>
</ul>
</div>
</body>
</html>
