CSS_2 CSS实例-商品列表

<!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>
显示效果： List of goods
Qingquan-Li / blog

CSS_2 CSS实例-商品列表 #28
