HTML第五章上机练习5

最新推荐文章于 2021-06-18 23:17:27 发布

原创最新推荐文章于 2021-06-18 23:17:27 发布 · 5.6k 阅读

9 ·

CC 4.0 BY-SA版权

这是一个HTML5代码示例，展示了如何使用CSS样式创建一个畅销书排行榜的布局。包含10本书的列表，每本书的列表项使用不同的背景图片进行装饰。

摘要生成于 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>无标题文档</title>
<style type="text/css">
.p {width:270px;
    height:25px;
	background-color: #0C3;
	font-size: 24px;
	color: #FFF;
	text-indent: 1em;
	background-image:url( bang.gif);
	background-repeat:no-repeat;
	vertical-align:bottom;
	background-position:6em center;
	text-align:left;
	
}
.h {
	width:270px;
    height:350px;
	background-color: #0C3;
	
	
	
}
.6 {list-style-image:url(book_no06.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.9 {list-style-image:url(book_no09.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.4 {list-style-image:url(book_no04.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.10 {list-style-image:url(book_no10.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.8 {list-style-image:url(book_no08.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.2 {list-style-image:url(book_no02.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
	
}




.1 {
	list-style-image:url(book_no01.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
	
}
.7 {list-style-image:url(book_no07.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.5 {list-style-image:url(book_no05.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
.3 {list-style-image:url(book_no03.gif);
	
	background-repeat:no-repeat;
	width:150px;
	height:10px;
}
</style>
</head>


<body>


<div class="p">
<p class="p">
 畅销书排行
 </p>
  
<div class="h">
<ul>
 <li class="1"> 不抱怨的世界(畅...</li>
 <li class="2">
 <li class="3">遇见未知的自己...</li>
 <li class="4">活法（季羡林、...</li>
 <li class="5">高效能人士的七个习惯</li>
 <li class="6">被迫强大（北外女生香奈儿...</li>
 <li class="7">遇见心想事成的自己（《遇...</li>
 <li class="8">世界上最伟大的推销员（插...</li>
 <li class="9">我的成功可以复制（唐骏亲...</li>
 <li class="9">少有人走的路：心智成熟的...</li>
 <li class="10">活出全新的自己——唤醒...</li>

</ul>
</div>

</body>
</html>