网易云静态页面html+css-----首页、热歌榜、搜索

毛毛淘气

已于 2024-06-19 13:47:45 修改

阅读量605

点赞数 1

文章标签： html css

于 2022-04-19 18:37:24 首次发布

本文链接：https://blog.csdn.net/weixin_59357486/article/details/124280498

版权

header.css

body {
           display: flex;
           justify-content: center;
       }
       .box {
           width: 600px;
           height: 100px;
           background-color:#D43C33;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .box1 {
           height: 50px;
           width: 150px;
           background-color: #D43C33;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .box2 {
           height: 50px;
           width: 150px;
           align-items: center;
           justify-content: center;
           background-color: ghostwhite;
           border-radius: 40px;
           display: flex;
           justify-content: center;
           align-items: center;
           margin-right: 10px;
       }

wangyiyun.css

           .box0 {
               width: 600px;
               height:200px;
               background-color: white;
           }

           .box3 {
               width: 600px;
               height: 80px;
               background-color: white;
               display: flex;
               justify-content: space-between;
               align-items: center;
               border-bottom: 3px solid whitesmoke;
           }

           .box11 {
               margin-right: 10px;
           }

           .box111 {
           }


           .you {
               font-size: 20px;
               background-color: whitesmoke;
               width: 600px;
               height: 30px;
               display: flex;
               align-items: center;
               border-left: 3px solid red;
           }

           .she {
               width: 600px;
               height: 400px;
               background-color: whitesmoke;
               display: flex;
               flex-wrap: wrap;
               align-content: space-between;
           }

           .she1 {
               width: 200px;
               height: 200px;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               position: relative;

           }
           .p{
               position:absolute;
               top: 0px;
               right: 0px;
           }
           .q{
               display: -webkit-box;
               -webkit-box-orient:vertical;
               -webkit-line-clamp: 1 ;
               overflow: hidden;
               padding: 6px 2px 0px 6px;
           }

daohanglan.css

.he {
           display: flex;
           justify-content: space-between;
           align-items: center;
           width: 600px;
           height: 50px;
           background-color: whitesmoke;
           font-size: 20px;
           border-bottom: 2px solid gray;
           list-style: none;
       }

       a:hover {
           color: #D43C33;
       }

       .he1 {
           margin-left: 20px;
       }

       .he2 {
           height: 50px;
           margin-left: 20px;
           border-bottom: 4px solid #D43C33;
           display: flex;
           align-items: center;
           margin-right: 20px;
       }

       .he3 {
           margin-right: 20px;
       }

       .he div:hover{
           cursor: pointer;
           color: #D43C33;
       }
a{
           color: #000000;
       }

热歌榜.css

.banner{
   width: 600px;
   height: 180px;
   background-image: url(./hot_music_bg_2x.jpg);
   background-size: cover;
   box-sizing: border-box;
   padding-left: 20px;
   display: flex;
   align-items: center;
}
.could{
       background: url('index_icon_2x.png') no-repeat -48px -60px;
       width: 283px;
       height: 133px;

}
.update{
   margin-top: 10px;
   font-size: 16px;
   color: hsla(0,0%,100%,.8);
}

.gedan{
width: 600px;
height: 600px;

}
.ge{
   width: 600px;
   height: 80px;
   display: flex;
   align-items: center;

   justify-content: space-between;
}
.player{
   width: 600px;
   height: 80px;
border-bottom: 1px solid gray;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.shuzi{
   width: 50px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: red;
}

.shuzi1{
   width: 50px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: gray;
}

.sq{
   background: url('index_icon_2x.png') no-repeat 0 0;
       width: 24px;
       height: 16px;
}
.SQ{
display: flex;
justify-content: space-between;
align-items: center;
}