CSS_2 CSS实例-商品列表 #28
Description
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品列表</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
#list {
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
overflow: hidden;
}
#list dl {
position: relative;
float: left;
overflow: hidden;
border: 1px solid #ccc;
margin: 5px;
}
#list dd {
font-size: 12px;
line-height: 24px;
margin-left: 10px;
}
#list dd a {
display: block;
text-decoration: none;
}
.active {
width: 52px;
height: 52px;
background: url(https://github.com/FatliTalk/images/blob/master/xsqJavaT-shirt.png?raw=true) no-repeat;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="list">
<h3>商品列表</h3>
<dl>
<dt> <a href="#"><img src="https://github.com/FatliTalk/images/blob/master/html5T-shirt.jpg?raw=true" width="188" height="188" /></a> </dt>
<dd> <a href="#">HTML 5 T恤</a> <span >媛价：1024.00</span> </dd>
</dl>
<dl>
<dt> <a href="#"><img src="https://github.com/FatliTalk/images/blob/master/javaT-shirt.jpg?raw=true" width="188" height="188" /></a> </dt>
<div class="active"></div>
<dd> <a href="#">Java T恤</a> <span >猿价：1010.00</span> </dd>
</dl>
<dl>
<dt> <a href="#"><img src="https://github.com/FatliTalk/images/blob/master/phpT-shirt.jpg?raw=true" width="188" height="188" /></a> </dt>
<dd> <a href="#">PHP T恤</a> <span >猿价：256.00</span> </dd>
</dl>
<dl>
<dt> <a href="#"><img src="https://github.com/FatliTalk/images/blob/master/pythonT-shirt.jpg?raw=true" width="188" height="188" /></a> </dt>
<dd> <a href="#">Python T恤</a> <span >猿价：1970.00</span> </dd>
</dl>
</div>
</body>
</html>显示效果：