代碼
1.HTML文件
<title>排行榜</title>
<link href="排行榜.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
<div class="first">暢銷書排行</div>
<ul class="second">
<li id="a"><a href="#">不抱怨的世界(暢...</a></li>
<li id="b"><a href="#">遇見未知的自己...</a></li>
<li id="c"><a href="#">活法（季羨林、...</a></li>
<li id="d"><a href="#">高效能人士的七個習(xí)慣</a></li>
<li id="e"><a href="#">被迫強大（北外女生香奈兒...</a></li>
<li id="f"><a href="#">遇見心想事成的自己（《遇...</a></li>
<li id="g"><a href="#">世界上最偉大的推銷員（插...</a></li>
<li id="h"><a href="#">我的成功可以復(fù)制（唐駿親...</a></li>
<li id="i"><a href="#">少有人走的路：心智成熟的...</a></li>
<li id="j"><a href="#">活出全新的自己——喚醒...</a></li>
</ul>
</div>
</body>
2.CSS文件
nav{
width:250px;}
.first{
font-size:16px;
line-height:30px;
text-indent:1em;
background:#518700 url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/bang.gif) 100px no-repeat;
color:#ffffff;}
.second{
background-color:#f3f4df;
font-size:12px;
line-height:28px;
color:#1a66b3;}
a{text-decoration: none}
a:hover{text-decoration: underline;}
#a{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no01.gif)}
#b{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no02.gif);
list-style-type:circle;}
#c{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no03.gif);
list-style-type:circle;}
#d{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no04.gif);
list-style-type:circle;}
#e{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no05.gif);
list-style-type:circle;}
#f{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no06.gif);
list-style-type:circle;}
#g{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no07.gif);
list-style-type:circle;}
#h{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no08.gif);}
#i{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no09.gif);}
#j{
list-style-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no10.gif);}
效果
