html中的排名怎么写,html制作畅销书排行榜

效果图

3b55fbeb7b451a30c03cb32c438c3bec.png

html布局

畅销书排行榜

css样式

.main{

width:280px;

margin:0px auto;

background:linear-gradient(to bottom,lightyellow,yellow);

}

h2,ul,li{

margin:0px;

padding: 0px;

}

.main h2{

background:green url(../image/bang.gif) no-repeat 102px 2px;

color:#fff;

text-indent: 2em;

font:bold 14px/30px 宋体;

}

.main ul li{

list-style: none;

font:12px/25px 宋体;

margin-left:50px;

text-indent: 2em;

}

.main ul li a{

text-decoration: none;

}

.main ul li a:link{

color:royalblue;

}

.main ul li a:hover{

color:red;

}

.main ul li a:visited{

color:gray;

}

.main ul li:nth-of-type(1){

background:url(../image/book_no01.gif) no-repeat;

}

.main ul li:nth-of-type(2){

background:url(../image/book_no02.gif) no-repeat;

}

.main ul li:nth-of-type(3){

background:url(../image/book_no03.gif) no-repeat;

}

.main ul li:nth-of-type(4){

background:url(../image/book_no04.gif) no-repeat 4px 5px;

}

.main ul li:nth-of-type(5){

background:url(../image/book_no05.gif) no-repeat 4px 5px;

}

.main ul li:nth-of-type(6){

background:url(../image/book_no06.gif) no-repeat 4px 5px;

}

.main ul li:nth-of-type(7){

background:url(../image/book_no07.gif) no-repeat 4px 5px;

}

.main ul li:nth-of-type(8){

background:url(../image/book_no08.gif) no-repeat 4px 5px;

}

.main ul li:nth-of-type(9){

background:url(../image/book_no09.gif) no-repeat 4px 5px;

}

.main ul li:nth-of-type(10){

background:url(../image/book_no10.gif) no-repeat 4px 5px;

}

.main ul{

padding:25px 0px;

}

举报/反馈

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值