<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作畅销书排行榜页面</title>
<style type="text/css">
h2 {
300px;
text-indent: 1em;
font-size: 16px;
color: white;
line-height: 30px;
background: green url(../img/bang.gif) 100px 4px no-repeat;
}
body ul {
260px;
text-indent: 2em;
background: linear-gradient(#F9FBCB, #F8F8F3);
font-size: 12px;
line-height: 28px;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul li:first-child {
background: url(../img/book_no01.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(2) {
background: url(../img/book_no02.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(3) {
background: url(../img/book_no03.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(4) {
background: url(../img/book_no04.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(5) {
background: url(../img/book_no05.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(6) {
background: url(../img/book_no06.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(7) {
background: url(../img/book_no07.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(8) {
background: url(../img/book_no08.gif) 6px center;
background-repeat: no-repeat;
}
ul li:nth-child(9) {
background: url(../img/book_no09.gif) 6px center;
background-repeat: no-repeat;
}
ul li:last-child {
background: url(../img/book_no10.gif) 6px center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>畅销书排行</h2>
<ul>
<li>
<a href="#">不抱怨的世界(畅...</a>
</li>
<li>
<a href="#">遇见未知的自己...</a>
</li>
<li>
<a href="#">活法（季羡林、...</a>
</li>
<li>
<a href="#">高效能人士的七个习惯</a>
</li>
<li>
<a href="#">被迫强大（北外女生香奈儿...</a>
</li>
<li>
<a href="#">遇见心想事成的自己（《遇...</a>
</li>
<li>
<a href="#">世界上最伟大的推销员（插...</a>
</li>
<li>
<a href="#">我的成功可以复制（唐骏亲...</a>
</li>
<li>
<a href="#">少有人走的路：心智成熟的...</a>
</li>
<li>
<a href="#">活出全新的自己——唤醒...</a>
</li>
</ul>
</body>
</html>