歌单列表

最新推荐文章于 2022-11-17 19:37:55 发布

moonlight201868

最新推荐文章于 2022-11-17 19:37:55 发布

阅读量636

点赞数

本文链接：https://blog.csdn.net/moonlight201868/article/details/80695941

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;

            background-color: gray;
            margin:300px auto;
        }
        #title{
            width: 360px;
            padding-left:40px;
            padding-top: 5px;
            font-size:20px;
            background-color: #D2D6DA;
        }
        #list {
            margin-top: 2px;
            list-style: none;
            display: none;
            font-size: 20px;
            background-color: #E9EDF3;
            padding-left: 0;
        }
        li{padding-left: 40px}
        #tri
        {
            width: 0;
            height:0;
            border-top:o;
            border-bottom:6px solid black;
            border-left:6px solid transparent;
            border-right:6px solid transparent;
            float: right;
            margin-top:9px;

}

    </style>
</head>
<body>
   <script>
       window.οnlοad=function () {
           var title1=document.getElementById("title")
           var tri1=document.getElementById("tri")
           var list1=document.getElementById("list")
           title1.οnclick=run;
           tri1.οnclick=run;
           function run(){
               if(list1.style.display=="block")
               {list1.style.display="none";
                   tri1.style.transform="rotate(180deg)";
               }
               else
               {
                   list1.style.display="block";
                   tri1.style.transform="rotate(0deg)";
               }
           }

           var items=document.getElementsByTagName("li")
           for(var i=0;i<items.length;i++) {
               items[i].onmouseover = function () {
                   this.style.background = "white";
                   this.style.textDecoration = "underline";
               }
               items[i].onmouseout = function () {
                   this.style.background = "#e9edf3";
                   this.style.textDecoration = "none";
               }

           }
           }
   </script>
<div id="box">
    <div id="title">播放列表<div id="tri"></div></div>
<ul id="list">
    <li>玩爱之徒-蔡依林</li>
    <li>原谅我就是这样的女生-戴佩妮</li>
    <li>猜不透-丁当</li>
    <li>自导自演-周杰伦</li>
    <li>浪漫窝-弦子</li>
    <li>流年-王菲</li>
</ul>
</div>

</body>
</html>

moonlight201868

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
歌单列表

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #box{ width: 400px;
复制链接

扫一扫