效果图
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(https://blog.csdn.net/weixin_31256263/article/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(https://blog.csdn.net/weixin_31256263/article/image/book_no01.gif) no-repeat;
}
.main ul li:nth-of-type(2){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no02.gif) no-repeat;
}
.main ul li:nth-of-type(3){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no03.gif) no-repeat;
}
.main ul li:nth-of-type(4){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no04.gif) no-repeat 4px 5px;
}
.main ul li:nth-of-type(5){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no05.gif) no-repeat 4px 5px;
}
.main ul li:nth-of-type(6){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no06.gif) no-repeat 4px 5px;
}
.main ul li:nth-of-type(7){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no07.gif) no-repeat 4px 5px;
}
.main ul li:nth-of-type(8){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no08.gif) no-repeat 4px 5px;
}
.main ul li:nth-of-type(9){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no09.gif) no-repeat 4px 5px;
}
.main ul li:nth-of-type(10){
background:url(https://blog.csdn.net/weixin_31256263/article/image/book_no10.gif) no-repeat 4px 5px;
}
.main ul{
padding:25px 0px;
}