CSS列表练习和背景

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="app">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>


#app {
    width: 297px;
    margin-left: 10px;
}

.title {
    font-size: 30px;
    background: #ec187b url("../images/d.gif") no-repeat 254px 22px;
    text-indent: 19px;
    line-height: 20px;
    padding: 20px 0px;
    margin-bottom: 10px;
    margin-top: 10px;

}

a {
    color: black;
    text-decoration: none;
    line-height: 31px;
}

a:hover {
    color: #da2ae7;
}

ul {
    background: darkgrey;
}

ul li {
    list-style: none;
    background: url("../images/r.gif") no-repeat 222px 12px;
}

CSS列表练习和背景

推荐阅读