HTML的-CSDN博客

本文链接：https://blog.csdn.net/2301_77161151/article/details/135476755

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .box{
               width: 100%;
               height: 800px;
               /* background-color:skyblue; */
               font-family:"Microsoft YaHei";
           }
           .box1 a{
               width: 95px;
               height: 60px;
               border-bottom: 3px solid pink;
               margin:10px 10px;
               text-decoration: none;
               line-height: 60px;
           }
           .box2 a{
               width: 100px;
               height: 60px;
               text-decoration: none;
               margin: 0px 8px;
               line-height: 60px;
           }
           .box3 a{
               width: 100px;
               height: 60px;
               text-decoration: none;
               line-height: 60px;
               margin: 0px -8px;
           }
           .box3 span{
               margin: 0px 10px;
           }
           .box3 input{
               border-radius:50px;
               position: relative;
               float: right;
               top: 20px;
           }
       </style>
   </head>
   <body>
       <div class="box">
           <div class="box1">
               <a href="">下载管理</a>
               <a href="">本地音乐</a>
           </div>
           <div class="box2">
               <a href="">已下载单曲</a>
               <a href="">已下载声音</a>
               <a href="">已下载mv</a>
               <a href="">正在下载</a>
           </div>
           <div class="box3">
               <img style="width: 20px;height: 20px;margin: -5px 7px;line-height: 60px;" src="./68174194774a0ecbb8215cd0f99626a.png" alt="">
               <a href="">
                   播放全部
               </a>
               <img style="width: 20px;height: 20px;margin: -5px 16px;line-height: 60px;" src="./62f6b6cb40840eea0f4b075d644e7ad.png">
               <span>存储目录:</span>
               <a href="">打开目录</a>
               <input style="line-height:20px;" placeholder=" 搜索我下载的音乐" >
               <img style="width: 20px;height: 20px ;position: relative;top: 10px;" src="./搜索.png" alt="">

           </div>；
       </div>

   </body>
</html>