ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

畅销书排行榜

2021-07-26 11:01:59  阅读:41  来源: 互联网

标签:repeat .. img ul 畅销书 li 排行榜 background


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>制作畅销书排行榜页面</title>
        <style type="text/css">
            h2 {
                width: 300px;
                text-indent: 1em;
                font-size: 16px;
                color: white;
                line-height: 30px;
                background: green url(../img/bang.gif) 100px 4px no-repeat;
            }
            
            body ul {
                width: 260px;
                text-indent: 2em;
                background: linear-gradient(#F9FBCB, #F8F8F3);
                font-size: 12px;
                line-height: 28px;
            }
            
            ul li {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            
            a:hover {
                text-decoration: underline;
            }
            
            ul li:first-child {
                background: url(../img/book_no01.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(2) {
                background: url(../img/book_no02.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(3) {
                background: url(../img/book_no03.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(4) {
                background: url(../img/book_no04.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(5) {
                background: url(../img/book_no05.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(6) {
                background: url(../img/book_no06.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(7) {
                background: url(../img/book_no07.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(8) {
                background: url(../img/book_no08.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:nth-child(9) {
                background: url(../img/book_no09.gif) 6px center;
                background-repeat: no-repeat;
            }
            
            ul li:last-child {
                background: url(../img/book_no10.gif) 6px center;
                background-repeat: no-repeat;
            }
        </style>
    </head>

    <body>
        <h2>畅销书排行</h2>
        <ul>
            <li>
                <a href="#">不抱怨的世界(畅...</a>
            </li>
            <li>
                <a href="#">遇见未知的自己...</a>
            </li>
            <li>
                <a href="#">活法(季羡林、...</a>
            </li>
            <li>
                <a href="#">高效能人士的七个习惯</a>
            </li>
            <li>
                <a href="#">被迫强大(北外女生香奈儿...</a>
            </li>
            <li>
                <a href="#">遇见心想事成的自己(《遇...</a>
            </li>
            <li>
                <a href="#">世界上最伟大的推销员(插...</a>
            </li>
            <li>
                <a href="#">我的成功可以复制(唐骏亲...</a>
            </li>
            <li>
                <a href="#">少有人走的路:心智成熟的...</a>
            </li>
            <li>
                <a href="#">活出全新的自己——唤醒...</a>
            </li>
        </ul>

    </body>

</html>

 

标签:repeat,..,img,ul,畅销书,li,排行榜,background
来源: https://www.cnblogs.com/Inati/p/15060485.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有