Acasă Explorează Ajutor
Autentificare
lovecoding
/
VIP32
10
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

移动端

e 1 an în urmă
părinte
2736425fe0
comite
04ad23ac8b
6 a modificat fișierele cu 224 adăugiri și 0 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 145 0
      移动端/10.案例.css
  2. 79 0
      移动端/10.案例.html
  3. BIN
      移动端/images/4.jpg
  4. BIN
      移动端/images/card_vip1.png
  5. BIN
      移动端/images/icon_kugou1.png
  6. BIN
      移动端/images/icon_search_black.png

+ 145 - 0
移动端/10.案例.css
Vizualizați fișierul 

@@ -0,0 +1,145 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+#box {
 
+    width: 100%;
 
+    display: flex;
 
+    flex-direction: column;
 
+}
 
+#header {
 
+    width: 100%;
 
+    height: 1.3rem;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    background-color: #fff;
 
+    position: sticky;
 
+    top: 0;
 
+    left: 0;
 
+}
 
+#header .logo {
 
+    width: 2rem;
 
+    height: 0.5rem;
 
+    background: url('./images/icon_kugou1.png');
 
+    background-position: center;
 
+    background-size: cover;
 
+    margin-left: 16px;
 
+
 
+}
 
+#header .content {
 
+    width: 3.4rem;
 
+    height: 0.5rem;
 
+    margin-right: 16px;
 
+    display: flex;
 
+    justify-content: space-between;
 
+}
 
+#header .content div {
 
+    width: 1.5rem;
 
+    height: 0.5rem;
 
+    font-size: 0.25rem;
 
+    border-radius: 0.35rem;
 
+    text-align: center;
 
+    line-height: 0.5rem;
 
+    color: #fff;
 
+}
 
+#header .content .down {
 
+    background: #00BAFF;
 
+}
 
+#header .content .load {
 
+    background: linear-gradient(90deg, #F5CE79 0%, #E5BD61 100%);
 
+}
 
+#main {
 
+    width: 100%;
 
+    flex: 1;
 
+}
 
+#main .nav {
 
+    width: 100%;
 
+    height: 1.2rem;
 
+    padding: 0 0.35rem;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    font-size: 0.32rem;
 
+    position: sticky;
 
+    top: 1.3rem;
 
+    left: 0;
 
+    z-index: 99;
 
+    background: linear-gradient(180deg, #F9FAFD 0%, #FFFFFF 100%);
 
+}
 
+#main .nav ul {
 
+    width: 5.6rem;
 
+    height: 0.6rem;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+#main .nav ul li a{
 
+    color: #818894;
 
+}
 
+.active{
 
+    font-size: 0.42rem;
 
+    font-weight: 600;
 
+    color: #000 !important;
 
+}
 
+#main .nav .search {
 
+    width: 0.35rem;
 
+    height: 0.35rem;
 
+}
 
+#main .container {
 
+    width: 100%;
 
+    height: 18rem;
 
+    padding: 0 0.35rem;
 
+}
 
+#main .container .pictures {
 
+    width: 100%;
 
+    height: 2rem;
 
+}
 
+#main .container .pictures img {
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+#main .news {
 
+    width: 100%;
 
+    margin-top: 0.4rem;
 
+}
 
+
 
+#main .news .tips {
 
+    width: 100%;
 
+    height: 1rem;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+#main .news .tips .sing {
 
+    font-size: 0.32rem;
 
+    font-weight: 600;
 
+}
 
+#main .news .tips .more {
 
+    font-size: 0.22rem;
 
+    color: #818894;
 
+}
 
+#main .news .music {
 
+    width: 100%;
 
+    height: 6rem;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    justify-content: space-between;
 
+}
 
+#main .music .part {
 
+    width: 2rem;
 
+    height: 2.7rem;
 
+    color: #000;
 
+    font-size: 0.24rem;
 
+}
 
+#main .music .part img {
 
+    width: 2rem;
 
+    height: 2rem;
 
+    border-radius: 0.15rem;
 
+}
 
+#main .music .part .names {
 
+    color: #818894;
 
+}

+ 79 - 0
移动端/10.案例.html
Vizualizați fișierul 

@@ -0,0 +1,79 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="./10.案例.css">
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="header">
 
+            <div class="logo">
 
+            </div>
 
+            <div class="content">
 
+                <div class="down">下载酷狗</div>
 
+                <div class="load">成为会员</div>
 
+            </div>
 
+        </div>
 
+        <div id="main">
 
+            <div class="nav">
 
+                <ul>
 
+                    <li><a href="" class="active">音乐</a></li>
 
+                    <li><a href="">新歌</a></li>
 
+                    <li><a href="">排行</a></li>
 
+                    <li><a href="">歌单</a></li>
 
+                    <li><a href="">歌手</a></li>
 
+                    <li><a href="">听书</a></li>
 
+                </ul>
 
+                <img class="search" src="./images/icon_search_black.png" alt="">
 
+            </div>
 
+            <div class="container">
 
+                <div class="pictures">
 
+                    <img src="./images/card_vip1.png" alt="">
 
+                </div>
 
+                <div class="news">
 
+                    <div class="tips">
 
+                        <div class="sing">新歌首发</div>
 
+                        <div class="more">更多 ></div>
 
+                    </div>
 
+                    <div class="music">
 
+                        <div class="part">
 
+                            <img src="./images/4.jpg" alt="">
 
+                            <p class="person">非我不可</p>
 
+                            <div class="names">时代少年团</div>
 
+                        </div>
 
+                        <div class="part">
 
+                            <img src="./images/4.jpg" alt="">
 
+                            <p class="person">非我不可</p>
 
+                            <div class="names">时代少年团</div>
 
+                        </div>
 
+                        <div class="part">
 
+                            <img src="./images/4.jpg" alt="">
 
+                            <p class="person">非我不可</p>
 
+                            <div class="names">时代少年团</div>
 
+                        </div>
 
+                        <div class="part">
 
+                            <img src="./images/4.jpg" alt="">
 
+                            <p class="person">非我不可</p>
 
+                            <div class="names">时代少年团</div>
 
+                        </div>
 
+                        <div class="part">
 
+                            <img src="./images/4.jpg" alt="">
 
+                            <p class="person">非我不可</p>
 
+                            <div class="names">时代少年团</div>
 
+                        </div>
 
+                        <div class="part">
 
+                            <img src="./images/4.jpg" alt="">
 
+                            <p class="person">非我不可</p>
 
+                            <div class="names">时代少年团</div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div id="footer"></div>
 
+    </div>
 
+    <script src="./rem.js"></script>
 
+</body>
 
+</html>

BIN
移动端/images/4.jpg
Vizualizați fișierul


BIN
移动端/images/card_vip1.png
Vizualizați fișierul


BIN
移动端/images/icon_kugou1.png
Vizualizați fișierul


BIN
移动端/images/icon_search_black.png
Vizualizați fișierul