制作网络畅销排行榜 HTML 关键代码

最新推荐文章于 2023-05-24 10:39:43 发布

qq_36074362

最新推荐文章于 2023-05-24 10:39:43 发布

阅读量7.3k

点赞数 3

本文链接：https://blog.csdn.net/qq_36074362/article/details/52831480

版权

<span style="font-size:24px;"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>畅销书排行榜</title>
		<style type="text/css">
			.q{
				width: 230px;
			}
			.c{
				font-size: 16px;
				color: white;
				text-indent: 1em;
				line-height: 30px;
				background-color:#518700;
				background-image:url(images/bang.gif);
				background-repeat:no-repeat;
				background-position:100px 3px;
				height:30px;
			}
			.f{
				
				background-color: #F3F4DF;
				background-repeat:no-repeat;
			    width:230px;
				height: 300px;
			}
			.f ul li a{
				
				color:#1A66B3;
			    text-decoration:none;
				font-size: 12px;
				line-height: 28px;
			}
			.f ul li a:hover{
				 text-decoration:underline;
			}
			.f ul li.one{
			 	background-position:5px 4px;
				list-style-type:none;
				background-image:url(images/book_no01.gif);
				background-repeat:no-repeat;
			    text-indent: 2em;
			}
			.f ul li.two{
				background-position:5px 5px;
				list-style-type:none;
				background-image:url(images/book_no02.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.three{
				background-position:5px 6px;
				list-style-type:none;
				background-image:url(images/book_no03.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.four{
				background-position:5px 7px;
				list-style-type:none;
				background-image:url(images/book_no04.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.five{
				background-position:5px 8px;
				list-style-type:none;
				background-image:url(images/book_no05.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.six{
				background-position:5px 9px;
				list-style-type:none;
				background-image:url(images/book_no06.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.seven{
				background-position:5px 10px;
				list-style-type:none;
				background-image:url(images/book_no07.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.eight{
				background-position:5px 11px;
				list-style-type:none;
				background-image:url(images/book_no08.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.nine{
				background-position:5px 12px;
				list-style-type:none;
				background-image:url(images/book_no09.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			.f ul li.ten{
				background-position:5px 13px;
				list-style-type:none;
				background-image:url(images/book_no10.gif);
				background-repeat:no-repeat;
				 text-indent: 2em;
			}
			
			.f ul {margin-top:0px;}
            </style>
</head>
<body>
<div class="q">
<div class="c">畅销书排行</div>
<div class="f">
<ul>
<li class="one"><a href="#">不抱怨的世界(畅...</a></li>
<li class="two"><a href="#">遇见未知的自己...</a></li>
<li class="three"> <a href="#">活法（季羡林、...</a></li>
<li class="four"><a href="#">高效能人士的七个习惯</a></li>
<li class="five"><a href="#">被迫强大（北外女生香奈儿...</a></li>
<li class="six"><a href="#">遇见心想事成的自己（《遇...</a></li>
<li class="seven"><a href="#">世界上最伟大的推销员（插...</a></li>
<li class="eight"><a href="#">我的成功可以复制（唐骏亲...</a></li>
<li class="nine"><a href="#">少有人走的路：心智成熟的...</a></li>
<li class="ten"><a href="#">活出全新的自己——唤醒...</a></li>					
</ul>
</div>
</div>
</body>
</html>
</span>

qq_36074362

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
制作网络畅销排行榜 HTML 关键代码

畅销书排行榜 .q{ width: 230px; } .c{ font-size: 16px; color: white; text-indent: 1em; line-height: 30px; background-color:#518700; background-image:url(ima
复制链接

扫一扫