html css js

2. qq音乐练习 1 html + css

"Hello World, Hello Blog"

Posted by wudimingwo on December 15, 2018

image.png

html step1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

	  <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

	  <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

*{
    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% 效果?

1
2
3
4
5
6
7
8
9
10
11

                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%; } } } } }

1

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%; } } } } } }

1

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 ; } }

1

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; } }

1

step6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

        .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

1
2
3

在 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 获取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

@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

CATALOG
    FEATURED TAGS
    html css js
    FRIENDS