first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/2022-6.2~6.4css网页/QQmusic.css

@@ -0,0 +1,127 @@
+.recommend{
+    margin: 0 auto;
+}
+.title{
+    font-size: 22px;
+    color: #000;
+    height: 40px;
+    font-weight: 500;
+    text-align: center;
+    background-color: #f3f3f3;
+    padding-top: 50px;
+    padding-bottom: 24px;
+}
+
+
+
+.menu{
+    text-align: center;
+    background-color: #f8f8f8;
+    height: 50px;
+}
+.menu li{
+    font-size: 12px;
+    color: #333;
+    font-weight: 400;
+    display: inline-block;
+    margin: 0 24px;
+}
+.menu .active{
+    color: #31c27c;
+}
+.menu li:hover{
+    color: #31c27c;
+}
+
+
+
+
+.icon ul{
+    overflow: hidden;
+    width: 898px;
+    margin: 0 auto;
+    background-color: #fdfdfd;
+}
+.icon li{
+    width: 170px;
+    float: left;
+    margin-right: 12px;
+}
+.icon li:last-child{
+    margin-right: 0;
+}
+.icon img{
+width: 100%;
+height: 170px;
+margin-bottom: 10px;
+}
+.icon p{
+font-size: 10px;
+}
+.icon p:nth-child(3){
+color: #999;
+font-size: 10px;
+}
+.icon p:nth-child(2){
+    width: 100%;
+    overflow: hidden;
+    /* //单行文本溢出显示省略号 */
+    text-overflow: ellipsis; 
+    /* //单行文本不会换行 */
+    white-space: nowrap; 
+}
+
+
+
+
+
+.more ul{
+    text-align: center;
+    margin-top: 40px;
+}
+.more li{
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgba(0,0,0,.1);
+    display: inline-block;
+    margin-left: 17px;
+}
+.more .active{
+    background-color: rgba(0,0,0,.3);
+}
+.more li:hover{
+    background-color: rgba(0,0,0,.3);
+}
+
+
+/* .icon .imgs{
+    width: 100%;
+    height: 170px;
+    background-image: url('https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1');
+    background-size: 100%;
+    padding: calc((100% - 50px)/2);
+    box-sizing: border-box;
+    transition: all ease 1s;
+}
+.icon .imgs .play_btn{
+    background: #ffffff;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    text-align: center;
+    opacity: 0;
+    transition: all ease 0.5s;
+}
+.icon .imgs:hover{
+    background-size: 110%;
+}
+.icon .imgs:hover .play_btn{
+    opacity: 1;
+}
+.icon .imgs .play_btn i{
+    font-size: 20px;
+    line-height: 50px;
+} */
+
+