HTML练习--制作畅销书排行页面

最新推荐文章于 2024-08-06 14:46:01 发布

可爱的黄油手

最新推荐文章于 2024-08-06 14:46:01 发布

阅读量1.4w

点赞数 6

本文链接：https://blog.csdn.net/gengzhi1293443962/article/details/52830935

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.a {
	width:300px;
	background-color: #3C3;
	background-repeat: no-repeat;
	background-position: 95px; center;
	background-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/bang.gif);
	padding:10px;
}
.e {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no03.gif);
	list-style-type: none;
}
.m {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no10.gif);
	list-style-type: none;
}
.k {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no08.gif);
	list-style-type: none;
}
.g {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no05.gif);
	list-style-type: none;
}
.f {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no04.gif);
	list-style-type: none;
}
.j {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no07.gif);
	list-style-type: none;
}
.b {
	width:320px;
	height:500px;
	background-color: #CC3;
}
.c {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no01.gif);
	list-style-type: none;
}
.d {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no02.gif);
	list-style-type: none;
}
.d {
}
.d {
}
.tet {
	font-family: "Comic Sans MS", cursive;
	font-size: 12px;
	font-style: normal;
	line-height: 28px;
	font-weight: normal;
	font-variant: normal;
	color: #00F;
}
.h {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no06.gif);
	list-style-type: none;
}
.l {
	list-style-position: outside;
	list-style-image: url(../%E7%BB%83%E4%B9%A05%EF%BC%9A%E5%88%B6%E4%BD%9C%E7%95%85%E9%94%80%E4%B9%A6%E6%8E%92%E8%A1%8C%E6%A6%9C/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/book_no09.gif);
	list-style-type: none;
}
</style>
</head>
<body>
<div class="a">畅销书排行</div>
<div class="b">
<ul class="tet">
<li class="c"><a href="#"/>不抱怨的世界(畅...</a></li>
<li class="d"><a href="#"/>遇见未知的自己...</a></li>
<li class="e"><a href="#"/>活法（季羡林、...</a></li>
<li class="f"><a href="#"/>高效能人士的七个习惯</a></li>
<li class="g"><a href="#"/>被迫强大（北外女生香奈儿...</a></li>
<li class="h"><a href="#"/>遇见心想事成的自己（《遇...</a></li>
<li class="j"><a href="#"/>我的成功可以复制（唐骏亲...</a></li>
<li class="k"><a href="#"/>被迫强大（北外女生香奈儿...</a></li>
<li class="l"><a href="#"/>少有人走的路：心智成熟的...</a></li>
<li class="m"><a href="#"/>活出全新的自己——唤醒...</a></li>

</ul>


</div>
</body>
</html>