精选音乐——练习

第一部分：html代码

MUSIC--精选音乐连播本页
Radio
音乐达人
随便听听>>
Song
音乐达人
最新歌曲>>
Album
音乐达人
音乐专辑>>
Mv
音乐达人
劲爆Mv>>
 

第二部分：css代码

* {padding: 0;margin: 0;box-sizing:border-box;}a {text-decoration: none;color: rgb(240, 247, 248);}/*box*/.box {display: inline-block;height: 157px;width: 687px;background-color: #f1f3f4;}.box .name{position: relative;margin-top: 7px; height: 35px;width: 687px;background: url(./images/iconh.png) 1% 8%/20px no-repeat;color: rgb(168, 72, 72);}.box .name b {position: absolute;left: 34px;top: 0;}.box .name .p1 {position: absolute;left: 587px;top: 2px;width: 19px;height: 20px;background-image: url(./images/play1.png);}.box .name span {float: right;margin-right: 12px;}.box .name span:hover {color: black;}.box .name .p1:hover {background-image: url(./images/play2.png);}/*内容*/.one,.two,.three,.four {float: left; height: 115px;width: 170px;transition: all .5s;}.one{margin-left: 3px;background: url(./images/icon1.png) 10% 20%/50px  no-repeat;background-color: rgb(82, 166, 182); }.two{background: url(./images/icon2.png) 10% 20%/50px no-repeat;background-color: rgb(85, 185, 182);}.three{background: url(./images/icon3.png) 10% 20%/50px no-repeat;background-color: rgb(85, 186, 124);}.four{background: url(./images/icon4.png) 10% 20%/50px no-repeat;background-color: rgb(161, 101, 128);}.one h2,.two h2,.three h2,.four h2{width: 120px;padding-top: 17px;padding-left: 70px;color: #fff;font-size: 26px;}.one dd,.two dd,.three dd,.four dd {padding-left: 70px;font-size: 12px;color: rgb(240, 247, 248);}.one:hover {background: url(./images/icon5.png) 10% 20%/50px no-repeat;}.two:hover {background: url(./images/icon6.png) 10% 20%/50px no-repeat;}.three:hover {background: url(./images/icon7.png) 10% 20%/50px no-repeat;}.four:hover {background: url(./images/icon8.png) 10% 20%/50px no-repeat;}.one:hover,.two:hover,.three:hover,.four:hover {transform: scale(80%);background-color: black;}.box dd a:hover {color: red;}/*音频*/audio {width: 687px;background-color: #f1f3f4;}

第三部分：实际效果展示

 第四部分：img部分+music部分

链接：https://pan.baidu.com/s/1q7B2hvxFkuQiRne_rg2-NA?pwd=1234 
提取码：1234

第五部分：

        成长就像走夜路一样，既没有灯也没啥人，但正因为黎明很美，所以你要酷酷的走下去。晚上好！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！