计算机毕业设计-仿QQ音乐--HTML+CSS

目录

作品展示

html部分代码

CSS部分代码

轮播部分

作品展示

html部分代码

        
 
     
  
        
    
     
  
      
   首页      
      
   专辑      
      
   歌手      
      
   排行榜      
      
   分类歌单      
      
   电台      
      
   MV      
      
   数字专辑      
      
   票务      
  
     
 
    
        
 
     
  
      歌 单 推 荐  
  
      
   
为你推荐   
   
欧美榜单   
   
国语   
   
粤语精选   
   
00年代   
   
纯音乐   
      
  
   
      
   
Live：林俊杰的那些神级现场播放量：2533万   
   
Ed sheeran | 冬日旋律播放量：541万   
     
2021年1月华语新歌推荐播放量：125.1万   
      
  
  
      
   
   
      
  
     
 
    
     
 
     
  
      新 歌 首 发  
  
    
     
 
     
  
      新 碟 首 发  
  
      
   
内地   
   
港台   
   
欧美   
  
  
  
      
   
   
   
   
     
   
      
  
  
   
      
   
   
      
  
     
 
    
    
 
     
     
         
 
    
        

CSS部分代码

* {    margin: 0;    padding: 0;}header {    width: 1200px;    height: 142px;    margin: 0 auto;}.first .logo {    float: left;}.first .logo a img {    display: block;    width: 170px;    height: 46px;    padding-top: 22px;}.first .navtop {    float: left;    overflow: hidden;}.first .navtop ul {    list-style: none;    margin-left: 30px;    height: 90px;}.first .navtop ul li .current:hover {    color: white;}.first .search {    float: left;    overflow: hidden;    margin: 26px 0 0 10px;    border: 1px solid #f2f2f2;    border-radius: 5px;    position: relative;}.songSheet_pics ul li:hover .cover_icon_play {    opacity: 0.9;    transform: scale(1) translateZ(0);    transition-property: opacity, transform;    transition-duration: 0.5s;    cursor: pointer;}.songSheet_pics ul li:hover .cover_icon_play,.cover_icon_play {    background-image: url(../pics/video.png);    background-repeat: no-repeat;}.}.content .songSheet .carrousel a {    display: block;    width: 20px;    height: 38px;    position: absolute;    top: 250px;    background-image: url(./img/t.png);    background-repeat: no-repeat;}.content .songSheet .carrousel .leftBtn {    left: -80px;    background-position: -20px -120px;}.content .songSheet .carrousel .rightBtn {    right: -80px;    background-position: 0 -120px;}.content .songSheet .area ul {    text-align: center;    width: 390px;    margin-top: 30px;}.content .songSheet .playall {    position: absolute;    left: 0;    top: initial;    border: 1px solid #c9c9c9;    color: #000;    margin-left: 10%;    margin-top: 20px;    border-radius: 2px;    font-size: 14px;    margi}.content .songSheet .newsongs ul li span {    display: block;    position: absolute;    right: 35px;    top: 45px;    color: #999;    font-family: "poppin";}footer .shang {    text-align: center;    margin: 0 auto;    width: 100%;    height: 250px;}footer .shang .right,.center,.left {    float: left;    margin-left: 290px;}footer .shang .right ul li {footer .shang .center ul li a {    text-decoration: none;    color: #999;}footer .shang .center ul li a :hover {    color: #31c27c;}footer .shang .left ul li {    list-style: none;    margin: 5px 0;}footer .shang .left ul li a {    text-decoration: none;

轮播部分

   #lunbo-box {     width: 100%;     overflow: hidden;     height: 232px }  #lunbo-con {     width: 500%;     float: left; }  #lunbo, #lunbo-1 {     float: left; }  .lunbo-img {     float: left;     height: 232px;     width: 186px;     margin-left: 16px }  header ul li .t {     left: 500px; }         window.onload = function() {     var marqueeBox = document.getElementById("lunbo-box");     var marquee = document.getElementById("lunbo");     var marqueeCopy = document.getElementById("lunbo-1");     marqueeCopy.innerHTML = marquee.innerHTML;     function fun() {  //从右向左  if (marqueeBox.scrollLeft >= 800) {      marqueeBox.scrollLeft = 0;  } else {      marqueeBox.scrollLeft++;  }  //从左向右  // if (marqueeBox.scrollLeft >= 0) {  //   marqueeBox.scrollLeft = 800;  // } else {  //   marqueeBox.scrollLeft -- ;  // }     }     var fun1 = setInterval(fun, 25);     marqueeBox.onmouseover = function() {  // 鼠标经过时  清除定时器  停止图片的滚动  clearInterval(fun1);     };     marqueeBox.onmouseout = function() {  //鼠标离开后  继续滚动图片  fun1 = setInterval(fun, 25);     }; };