2. qq音乐练习 1 html + css

image.png

html
step1

      <div class="wrapper">
        <div class="song-img">
          <div class="img-box">
            <img src="" alt=""/>
          </div>
        </div>
        <div class="song-info">
          <div class="song-name"></div>
          <div class="singer-name"></div>
          <div class="album-name"></div>
        </div>
        <div class="pro">
          
        </div>
        <div class="control">
          
        </div>
        
      </div>

step2

      <div class="wrapper">
        <div class="song-img">
          <div class="img-box">
            <img src="" alt=""/>
          </div>
        </div>
        <div class="song-info">
          <div class="song-name">丑八怪</div>
          <div class="singer-name">薛之谦</div>
          <div class="album-name">意外</div>
        </div>
        <div class="pro">
          <div class="current-time"></div>
          <div class="pro-wrap">
            <div class="pro-bottom"></div>
            <div class="pro-top">
              <div class="slider"></div>
            </div>
          </div>
          <div class="all-time"></div>
        </div>
        <div class="control">
          <div class="btn like"></div>
          <div class="btn pre"></div>
          <div class="btn play"></div>
          <div class="btn next"></div>
          <div class="btn list"></div>
        </div>
        
      </div>

less
step 1

*{
    margin: 0;
    padding: 0;
    list-style: none;
    body{
        font-size: 12px;
        .wrapper{
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding-top: 60px;
            background-color: rgba(0,0,0,.2);
            .song-img{
                // 实现 自适应正方形
                width: 70%;
                height: 0;
                padding-top: 70%;
                border: 1px solid black;
            }
        }
    }
}

知识点, 如何实现一个自适应的正方形?
以及 子级如何实现 w100% h100% 效果?

                position : relative;
                width: 70%;
                height: 0;
                padding-top: 70%;
                    .son{
                        position : absolute;
                        left : 0;
                        right : 0;
                        top : 0;
                        bottom : 0; 
                    }

step2

*{
    margin: 0;
    padding: 0;
    list-style: none;
    body{
        font-size: 12px;
        .wrapper{
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding-top: 60px;
            background-color: rgba(0,0,0,.2);
            .song-img{
                // 实现 自适应正方形
                position: relative;
                width: 70%;
                height: 0;
                padding-top: 70%;
                border: 1px solid black;
                .img-box{
                    // 当父级 没有高度时,如何实现 
                    // width : 100%; height :100% 的效果 
                    background-color: black;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    border-radius: 50%;
                }
            }
        }
    }
}

step3

*{
    margin: 0;
    padding: 0;
    list-style: none;
    body{
        font-size: 12px;
        .wrapper{
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding-top: 60px;
            background-color: rgba(0,0,0,.2);
            .song-img{
                // 实现 自适应正方形
                position: relative;
                width: 70%;
                height: 0;
                padding-top: 70%;
                margin: 0 auto;
                border: 1px solid black;
                .img-box{
                    // 当父级 没有高度时,如何实现 
                    // width : 100%; height :100% 的效果 
                    background-color: black;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 75%;
                        height: 75%;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}

step4

...
.song-info{
                margin-top: 20px;
                width: 100%;
                text-align: center;
                height: 126px;
                border: 1px solid black;
                color: #fff;
                .song-name{
                    font-size: 24px;
                    line-height: 36px;
                    margin-bottom: 8px ;
                }
            }

step5

.pro{
                display: flex;
                .current-time,.all-time{
                    width: 60px;
                    height: 40px;
                    border: 1px solid black;
                    color: white;
                    line-height: 40px;
                }
                .pro-wrap{
                    flex: 1;
                }
            }

step6

            .control{
                width: 100%;
                height: 100px;
                position: absolute;
                bottom: 0;
                background-color: rgba(0,0,0,.6);
                display: flex;
                .btn{
                    flex: 1;
                    height: 100%;
                    font-size: 50px;
                    line-height: 100px;
                    text-align: center;
                    color: white;
                    font-weight: bold;
                }
                .like{
                    &.liking{
                        color: palevioletred;
                    }
                }
                .play{
                    font-size: 80px;
                }
            }

---

js
step1

在 index.html中引入 zepto 和index.js
<script src="../js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/index.js" type="text/javascript" charset="utf-8"></script>

step2
index.js
获取数据

function getData (url) {
    $.ajax({
        type:"GET",
        url:url,
        async:true,
        success : function (data) {
            console.log(data);
        },
        error : function () {
            console.log("error");
        }
    });
}

getData("../mock/data.json");

---

第一节
跟老师的没能百分百相同,

1. control部分 老师用的是背景图片, 我用的是 iconfont
   2.发现,百分比效果相似,但px效果不同,
   所以只能改一下px 数值.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>dddd</title>
        <style type="text/css">
            
        </style>
        <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    </head>
   <body>
    
    <div class="wrapper">
      <div class="song-img">
        <div class="img-box">
          <img src="../img/2test.jpg" alt=""/>
        </div>
      </div>
      <div class="song-info">
        <div class="song-name">丑八怪</div>
        <div class="singer-name">薛之谦</div>
        <div class="album-name">意外</div>
      </div>
      <div class="pro">
        <div class="current-time">00:00</div>
        <div class="pro-wrap">
          <div class="pro-bottom"></div>
          <div class="pro-top">
            <div class="slider"></div>
          </div>
        </div>
        <div class="all-time">04:32</div>
      </div>
      <div class="control">
        <div class="btn like iconfont icon-like"></div>
        <div class="btn pre iconfont icon-prev1"></div>
        <div class="btn play iconfont icon-PLAY"></div>
        <div class="btn next iconfont icon-next"></div>
        <div class="btn list iconfont icon-iconfonticon-shousu"></div>
      </div>
      
    </div>
    
    
    
    
    
    
    
    
    
    
    
    <script src="../js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
  </body>

</html>

index.less

@import "iconfont.css";
*{
    margin: 0;
    padding: 0;
    list-style: none;
    body{
        font-size: 12px;
        .wrapper{
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            padding-top: 300px;
            background-color: rgba(0,0,0,.2);
            .song-img{
                // 实现 自适应正方形
                position: relative;
                width: 70%;
                height: 0;
                padding-top: 70%;
                margin: 0 auto;
                .img-box{
                    // 当父级 没有高度时,如何实现 
                    // width : 100%; height :100% 的效果 
                    background-color: black;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 75%;
                        height: 75%;
                        border-radius: 50%;
                    }
                }
            }
            .song-info{
                margin-top: 150px;
                width: 100%;
                text-align: center;
                height: 300px;
                color: #fff;
                .song-name{
                    font-size: 80px;
                    line-height: 100px;
                    margin-bottom: 20px ;
                }
                .singer-name{
                    font-size: 50px;
                    line-height: 70px;
                    margin-bottom: 8px ;
                }
                .album-name{
                    font-size: 30px;
                    line-height: 70px;
                    margin-bottom: 8px ;
                }
            }
            .pro{
                display: flex;
                overflow: hidden;
                .current-time,.all-time{
                    text-align: center;
                    width: 100px;
                    height: 80px;
                    color: white;
                    line-height: 80px;
                    font-size: 32px;
                }
                .pro-wrap{
                    flex: 1;
                    border: 1px solid black;
                }
            }
            .control{
                width: 100%;
                height: 100px;
                position: absolute;
                bottom: 0;
                background-color: rgba(0,0,0,.6);
                display: flex;
                .btn{
                    flex: 1;
                    height: 100%;
                    font-size: 50px;
                    line-height: 100px;
                    text-align: center;
                    color: white;
                    font-weight: bold;
                }
                .like{
                    &.liking{
                        color: palevioletred;
                    }
                }
                .play{
                    font-size: 80px;
                }
            }
        }
    }
}

image.png