第二本第五章上机5畅销书排行页面

最新推荐文章于 2021-06-10 03:11:54 发布

苏哲阿

最新推荐文章于 2021-06-10 03:11:54 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_36074073/article/details/52831312

版权

这是一个HTML页面示例，展示了一个畅销书排行榜的布局设计。页面包含三本畅销书的条目，分别是《不抱怨的世界》、《遇见未知的自己》和《活法》。每个书名都是链接，点击后可以跳转到更多详情。页面使用了CSS进行样式设计，包括背景图片和文字样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>上机5</title>
<style tyle="text/css">
#image {
	　　　　vertical-align: middle;
　　
}
.aaa {
	font-size: 16px;
	color: #FFF;
	background-color: #518700;
	line-height: 30px;
	text-indent: 1em;
	background: #518700 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) 100px 5px no-repeat;
}
ul {
	line-height: 30px;
	text-indent: 2em;
	list-style-type: none;
	width: 500px;
	height: 500px;
	background-color: #F3F4DF;
}
.pp {
	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/book_no01.gif);
	background-repeat: no-repeat;
}
.qq {
	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/book_no02.gif);
	background-repeat: no-repeat;
}
.ww {
	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/book_no03.gif);
	background-repeat: no-repeat;
}
a {
	text-decoration: none
}
a:hover {
	text-decoration: underline
}
</style>
</head>
<body>
<ul>
<p div class="aaa" >畅销书排行 </p>

  <li class="pp"><a href="#">不抱怨的世界(畅...</a></li>
  <li class="qq"><a href="#">遇见未知的自己...</a></li>
  <li class="ww"><a href="#">活法（季羡林、...</a></li>
</ul>
</body>
</html>