web网页-优快云博客

本文链接：https://blog.youkuaiyun.com/W111115_/article/details/143215970

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wyy</title>
    <!-- 引入重置样式 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./wyy.css">
</head>
<body>
    <div class="list">
        <div class="top-box">
            <div class="top">
                <img class="img" src="./image/top.jpg" title="飙升榜"> 
                <a href="#" title="飙升榜"></a>
             </div>
             <div class="tit">
                <a href="#" title="飙升榜">
                    <h3 class="bsb">飙升榜</h3>
                </a>
                <div class="icon1">
                    <a href="#" title="播放"></a>
                </div>
                <div class="icon2">
                    <a href="#" title="收藏"></a>
                </div>
             </div>
        </div>
        <div class="song">
            <ol class="song-list">
                
                <li >
                    <span class="no no-top" style="color:#c10d0c;">1</span>
                    <a class="nm" href="#">APT.</a>
                </li>
                <li>
                    <span class="no no-top"style="color:#c10d0c;">2</span>
                    <a class="nm" href="#">我愿</a>
                </li>
                <li>
                    <span class="no no-top" style="color:#c10d0c;">3</span>
                    <a class="nm" href="#">我只能离开</a>
                </li>
                <li>
                    <span class="no no-top">4</span>
                    <a class="nm" href="#">于是</a>
                </li>
                <li>
                    <span class="no no-top">5</span>
                    <a class="nm" href="#">孤独患者</a>
                </li>
                <li>
                    <span class="no no-top">6</span>
                    <a class="nm" href="#">绽放</a>
                </li>
                <li>
                    <span class="no no-top">7</span>
                    <a  class="nm" href="#">孤独患者</a>
                </li>
                <li>
                    <span class="no no-top">8</span>
                    <a class="nm" href="#">麦恩莉</a>
                </li>
                <li>
                    <span class="no no-top">9</span>
                    <a class="nm" href="#">不懂他</a>
                </li>
                <li>
                    <span class="no no-top">10</span>
                    <a class="nm" href="#">米奇GO</a>
                </li>
                <div class="more">
                    <a class="more" href="#">查看全部>></a>
                </div>
            </ol>

        </div>

    </div>
</body>
</html>

CSS代码：

ol li{
    list-style: none;
}
.list{
    width: 230px;
    height: 472px;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
    background: url(./image/index_bill.png);
    

}
.top-box{
    width: 230px;
    height: 100px;
    padding: 20px 0 0 19px;
    
    
}
.top {
    float: left;    
    display: inline;
    height: 80px;
    width: 80px;
   
}
.top .img{
    display: block;
    width: 100%;
    height: 100%;
}
.tit{
    float: left;
    width: 116px;
    height: 50px;
    float: left;
    margin: 6px 0px 0px 10px;
    position: absolute;
    top:0px;
    right: 3px;
    
}
.bsb{
    text-decoration: none;
    color: #333;
}
 .tit a:link{
    text-decoration: none;
    color: #333;
    margin-top: 10px;
}
 .tit a :hover{
    text-decoration: underline;
    color: #333;
 }
 
.icon1{
    float: left;
    width: 22px;
    height: 22px;
    display: block;
    float: left;
    background-image: url(./image/icon1.1.png);
    background-size: 22px;
    background-position: -308.5px -221px;
    margin-right: 3px;
    margin-top: -5.2px;
}
.icon1:hover{
    background-image: url(./image/icon1.2.png);
    cursor: pointer;
}
.icon2{
    width: 22px;
    height: 22px;
    display: inline-block;
    background-image: url(./image/icon2.1.png);
    background-size: 22px;
    background-position: -310px -283.4px;
    margin-left: 3px;
    margin-right: 12px;
    margin-top: -16px;
}
.icon2:hover{
    background-image: url(./image/icon2.2.png);
    cursor: pointer;
    background-size: 22px;
    background-position: -310px -292px;
}

.song{
    width: 230px;
    height: 352px;
    display: block;
    margin-top: -16px;
}

.song-list  li{
    height: 32px;
    margin-left: -20px;
    line-height: 32px;
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
}
.no{
    float: left;
    position: relative;
    width: 35px;
    height: 32px;
    text-align: center;
    color: #666;
    font-size: 16px;
}

.nm{
    float: left;
    width: 170px;
    height: 32px;
    color: #000;
    cursor: pointer;
    text-decoration: none;
}
li a:hover{
    text-decoration: underline;
    color: #000;
}
.more{
    width: 170px;
    height: 32px;
    text-align: right;
}
.more a{
    color: #000;
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
    line-height:32px ; 
}
.more a:hover{
    text-decoration: underline;
    color: #000;
}