Home Esplora Aiuto
Registrati Accedi
YanaDH
/
edwin
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

edwin

YanaDH 8 anni fa
commit
fde556000b
71 ha cambiato i file con 1848 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 94 0
      album_article.html
  2. 99 0
      album_video.html
  3. 47 0
      article.html
  4. 111 0
      circle.html
  5. 63 0
      css/base.css
  6. 54 0
      css/fatie.css
  7. 55 0
      css/index.css
  8. 35 0
      css/oumei_circle.css
  9. 37 0
      fatie.html
  10. BIN
      imgs/banner-拷贝@2x.png
  11. 11 0
      imgs/icon_arrows.svg
  12. 21 0
      imgs/icon_circle_h.svg
  13. 25 0
      imgs/icon_circle_n.svg
  14. 12 0
      imgs/icon_collect_h.svg
  15. 12 0
      imgs/icon_collect_n.svg
  16. 12 0
      imgs/icon_comment.svg
  17. 20 0
      imgs/icon_home_h.svg
  18. 21 0
      imgs/icon_home_n.svg
  19. 17 0
      imgs/icon_mine_h.svg
  20. 23 0
      imgs/icon_mine_n.svg
  21. 24 0
      imgs/icon_photo.svg
  22. 14 0
      imgs/icon_play.svg
  23. 23 0
      imgs/icon_posting.svg
  24. 17 0
      imgs/icon_search.svg
  25. 22 0
      imgs/icon_show_h.svg
  26. 26 0
      imgs/icon_show_n.svg
  27. 12 0
      imgs/icon_support_h.svg
  28. 12 0
      imgs/icon_support_n.svg
  29. 12 0
      imgs/icon_views.svg
  30. BIN
      imgs/img_ video@2x.png
  31. BIN
      imgs/img_1.png
  32. BIN
      imgs/img_10@2x.png
  33. BIN
      imgs/img_11@2x.png
  34. BIN
      imgs/img_12@2x.png
  35. BIN
      imgs/img_1@2x.png
  36. BIN
      imgs/img_2.png
  37. BIN
      imgs/img_2@2x.png
  38. BIN
      imgs/img_3@2x.png
  39. BIN
      imgs/img_4@2x.png
  40. BIN
      imgs/img_5@2x.png
  41. BIN
      imgs/img_6@2x.png
  42. BIN
      imgs/img_7@2x.png
  43. BIN
      imgs/img_8@2x.png
  44. BIN
      imgs/img_9@2x.png
  45. BIN
      imgs/img_article1@2x.png
  46. BIN
      imgs/img_article2@2x.png
  47. BIN
      imgs/img_article3@2x.png
  48. BIN
      imgs/img_article@2x.png
  49. BIN
      imgs/img_articlebig1@2x.png
  50. BIN
      imgs/img_articlebig2@2x.png
  51. BIN
      imgs/img_avatar150@2x.png
  52. BIN
      imgs/img_avatar60@2x.png
  53. BIN
      imgs/img_avatar70@2x.png
  54. BIN
      imgs/img_banner_circle@2x.png
  55. BIN
      imgs/img_banner_home.png
  56. BIN
      imgs/img_collect1@2x.png
  57. BIN
      imgs/img_collect2@2x.png
  58. BIN
      imgs/img_collect3@2x.png
  59. BIN
      imgs/img_picture@2x.png
  60. BIN
      imgs/img_show@2x.png
  61. BIN
      imgs/img_video1@2x.png
  62. BIN
      imgs/img_video2@2x.png
  63. BIN
      imgs/img_video3@2x.png
  64. 111 0
      index.html
  65. 82 0
      mine.html
  66. 75 0
      my_collection.html
  67. 145 0
      my_tiezi.html
  68. 148 0
      oumei_circle.html
  69. 231 0
      oumei_comment.html
  70. 39 0
      replay.html
  71. 86 0
      show.html

+ 94 - 0
album_article.html
Vedi File

xqd 
@@ -0,0 +1,94 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div>
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div>
 
+        <img src="imgs/img_article1@2x.png">
 
+    </div>
 
+    <div class="content">
 
+        <p>永远闪耀如星，世界上最伟大的摇滚乐队你听过几个？</p>
 
+        <p>chester的离去，让所有喜爱他的歌迷震惊、心碎、惋惜。因为他的音乐，曾陪伴了我们整个青春。</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20px; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div>
 
+        <img src="imgs/img_article2@2x.png">
 
+    </div>
 
+    <div class="content">
 
+        <p>lana del rey新专辑《lust for life》火热发售</p>
 
+        <p>lana del rey无论是专辑名。如上一张《burn to die向死而生》，还是歌曲里很多表达出来的是人生苦短，及时行乐</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20px; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div>
 
+        <img src="imgs/img_article3@2x.png">
 
+    </div>
 
+    <div class="content">
 
+        <p>lana del rey新专辑《lust for life》火热发售</p>
 
+        <p>lana del rey无论是专辑名。如上一张《burn to die向死而生》，还是歌曲里很多表达出来的是人生苦短，及时行乐</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20%; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 99 - 0
album_video.html
Vedi File

xqd 
@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div>
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div style="width: 100%; height: 150px; line-height: 200px; text-align: center; background: url('imgs/img_video1@2x.png') no-repeat center; background-size: 100% 100%">
 
+        <!--<img src="imgs/img_video1@2x.png">-->
 
+        <img src="imgs/icon_play.svg" style="width: 70px; height: 70px;">
 
+    </div>
 
+    <div class="content">
 
+        <p>Just For Lady！女嘻哈歌手们的酷炫狂拽美炸天</p>
 
+        <p>嘻哈音乐一直都是男人们主导的音乐形式，但是仍然有许多女rapper在这个领域大放异彩。</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20px; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div style="clear:both"></div>
 
+    <div style="width: 100%; height: 150px; line-height: 200px; text-align: center; background: url('imgs/img_video2@2x.png') no-repeat center; background-size: 100% 100%">
 
+        <!--<img src="imgs/img_video1@2x.png">-->
 
+        <img src="imgs/icon_play.svg" style="width: 70px; height: 70px;">
 
+    </div>
 
+    <div class="content">
 
+        <p>《经典音乐欣赏》黛芙普拉美</p>
 
+        <p>每一首歌都是来自上天最美的祝福古老的梵语转达了人类最原始的祈祷</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20%; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div style="clear:both"></div>
 
+    <div style="width: 100%; height: 150px; line-height: 200px; text-align: center; background: url('imgs/img_video3@2x.png') no-repeat center; background-size: 100% 100%">
 
+        <!--<img src="imgs/img_video1@2x.png">-->
 
+        <img src="imgs/icon_play.svg" style="width: 70px; height: 70px;">
 
+    </div>
 
+    <div class="content">
 
+        <p>《经典音乐欣赏》黛芙普拉美</p>
 
+        <p>每一首歌都是来自上天最美的祝福古老的梵语转达了人类最原始的祈祷</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20%; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 47 - 0
article.html
Vedi File

xqd 
@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div>
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div style="border-bottom: 1px solid #E6E6E6; padding: 15px; color: #333333">
 
+        <p>永远闪耀如星，世界上最伟大的摇滚乐队你听过几个？</p>
 
+    </div>
 
+    <div style="padding: 15px">
 
+        <p style="color: #666666">
 
+            2017-07-22 &nbsp; edwin欧美音乐疯
 
+        </p>
 
+        <img src="imgs/img_articlebig1@2x.png" style="margin: 15px 0 10px 0">
 
+        <p style="text-align: center; color: #B3B3B3; margin-bottom: 10px">
 
+            Linkin Park（林肯公园）
 
+        </p>
 
+        <p style="color: #333333; letter-spacing: 0.1em; margin-bottom: 10px">
 
+            Chester的离去，让无数喜爱他的歌迷震惊、心碎、惋惜。因为他的音乐，曾陪伴了我们整个青春。那些迷惘的时刻，是他的歌声给我们温暖和力量，那些孤独挣扎的夜晚，是他的歌声告诉我们你并不孤单，那些愤懑的岁月，又是他在我们心里点亮了一道圣光去原谅去释怀。
 
+        </p>
 
+        <img src="imgs/img_articlebig2@2x.png" style="margin: 15px 0 10px 0">
 
+        <p style="text-align: center; color: #B3B3B3; margin-bottom: 10px">
 
+            Linkin Park（林肯公园）
 
+        </p>
 
+        <p style="color: #333333; letter-spacing: 0.1em; margin-bottom: 10px">
 
+            Chester的离去，让无数喜爱他的歌迷震惊、心碎、惋惜。因为他的音乐，曾陪伴了我们整个青春。那些迷惘的时刻，是他的歌声给我们温暖和力量，那些孤独挣扎的夜晚，是他的歌声告诉我们你并不孤单，那些愤懑的岁月，又是他在我们心里点亮了一道圣光去原谅去释怀。
 
+        </p>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 111 - 0
circle.html
Vedi File

xqd 
@@ -0,0 +1,111 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div class="wrapper">
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div>
 
+        <img src="imgs/img_banner_circle@2x.png">
 
+    </div>
 
+    <div style="background: #F2F2F2; color: #333333; margin-top: -5px; padding-left: 15px; height: 50px; line-height: 50px">
 
+        精选文章
 
+    </div>
 
+    <div>
 
+        <img src="imgs/img_article1@2x.png">
 
+    </div>
 
+    <div class="content">
 
+        <p>永远闪耀如星，世界上最伟大的摇滚乐队你听过几个？</p>
 
+        <p>chester的离去，让所有喜爱他的歌迷震惊、心碎、惋惜。因为他的音乐，曾陪伴了我们整个青春。</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20px; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div>
 
+        <img src="imgs/img_article2@2x.png">
 
+    </div>
 
+    <div class="content">
 
+        <p>永远闪耀如星，世界上最伟大的摇滚乐队你听过几个？</p>
 
+        <p>chester的离去，让所有喜爱他的歌迷震惊、心碎、惋惜。因为他的音乐，曾陪伴了我们整个青春。</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                1小时前
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+            <div class="fr" style="width: 25%;">
 
+                <div class="fl" style="width: 20%; margin: 2px 10% 0 0">
 
+                    <img src="imgs/icon_views.svg">
 
+                </div>
 
+                <div class="fl">
 
+                    3.5k
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+<div class="footer">
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_home_n.svg">
 
+        </div>
 
+        <div>
 
+            主页
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_circle_h.svg" style="width: 40px">
 
+        </div>
 
+        <div style="color: #32304A">
 
+            圈子
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_show_n.svg">
 
+        </div>
 
+        <div>
 
+            看演出
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_mine_n.svg" style="width: 28px">
 
+        </div>
 
+        <div>
 
+            我的
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 63 - 0
css/base.css
Vedi File

xqd 
@@ -0,0 +1,63 @@
 
+@charset "UTF-8";
 
+*{
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+em{
 
+    font-style: normal;
 
+}
 
+input:focus{
 
+    outline: none;
 
+    background:url("../imgs/icon_search.svg") no-repeat 40%;
 
+    background-size: 26px 26px;
 
+}
 
+.wrapper{
 
+    width: 100%;
 
+    margin-bottom: 80px;
 
+}
 
+.top{
 
+    background: #32304A;
 
+    height: 50px;
 
+    line-height: 50px;
 
+    color: #fff;
 
+    padding: 0 3%;
 
+    font-size: 16px;
 
+}
 
+.top .icon{
 
+    font-size: 30px;
 
+}
 
+.top .title{
 
+    width: 85%;
 
+}
 
+img{
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+.fl{
 
+    float: left;
 
+}
 
+.fr{
 
+    float: right;
 
+}
 
+.footer{
 
+    position: fixed;
 
+    bottom: 0;
 
+    height: 60px;
 
+    font-size: 15px;
 
+    width: 100%;
 
+    background: #fff;
 
+}
 
+.footer .bottom{
 
+    width: 25%;
 
+    border-top: 1px solid #ACACB3;
 
+    text-align: center;
 
+    color: #ACACB3;
 
+}
 
+.footer .bottom .icon{
 
+    text-align: center;
 
+    margin-top: 5px;
 
+}
 
+.footer .bottom .icon img{
 
+    width: 25px;
 
+    height: 25px;
 
+}

+ 54 - 0
css/fatie.css
Vedi File

xqd 
@@ -0,0 +1,54 @@
 
+.content{
 
+    margin: 0 5%;
 
+}
 
+.content .title{
 
+    color: #333333;
 
+    font-size: 1.2em;
 
+    line-height: 3em;
 
+}
 
+.content textarea{
 
+    width: 97%;
 
+    height: 120px;
 
+    padding: 5px;
 
+    margin-bottom: 5px;
 
+    border: 1px solid #cccccc;
 
+    font-size: 1.2em;
 
+}
 
+.content textarea:-moz-placeholder{
 
+    color: #cccccc;
 
+}
 
+.content textarea::-webkit-input-placeholder{
 
+    color: #cccccc;
 
+}
 
+.content textarea:-ms-input-placeholder{
 
+    color: #cccccc;
 
+}
 
+.content textarea:focus{
 
+    outline: none;
 
+}
 
+.content .addpic{
 
+    color: #666666;
 
+    line-height: 4em;
 
+}
 
+.content .pic{
 
+    border: 1px solid #C7C7C7;
 
+    width: 100px;
 
+    height: 100px;
 
+    color: #cccccc;
 
+    text-align: center;
 
+}
 
+.content .pic img{
 
+    width: 50%;
 
+    height: 50%;
 
+    margin-top: 10px;
 
+}
 
+.content .send{
 
+    color: #fff;
 
+    background: #8D8CC8;
 
+    width: 85%;
 
+    margin: 20% 7%;
 
+    height: 40px;
 
+    border-radius: 40px;
 
+    text-align: center;
 
+    line-height: 40px;
 
+}

+ 55 - 0
css/index.css
Vedi File

xqd 
@@ -0,0 +1,55 @@
 
+@charset "UTF-8";
 
+.search{
 
+    background: #F2F2F2;
 
+    height: 70px;
 
+    line-height: 70px;
 
+    margin-top: -5px;
 
+    text-align: center;
 
+}
 
+.search input{
 
+    width: 80%;
 
+    text-align: center;
 
+    height: 35px;
 
+    font-size: 15px;
 
+    border: 2px solid #E6E6E6;
 
+    border-radius: 40px;
 
+}
 
+.search input::-webkit-input-placeholder{
 
+    outline: none;
 
+    background:url("../imgs/icon_search.svg") no-repeat 40%;
 
+    background-size: 26px 26px;
 
+}
 
+.search input::-moz-placeholder{
 
+    outline: none;
 
+    background:url("../imgs/icon_search.svg") no-repeat 40%;
 
+    background-size: 26px 26px;
 
+}
 
+.search input:-ms-input-placeholder{
 
+    outline: none;
 
+    background:url("../imgs/icon_search.svg") no-repeat 40%;
 
+    background-size: 26px 26px;
 
+}
 
+.search input:focus{
 
+    outline: none;
 
+    background:url("../imgs/icon_search.svg") no-repeat 40%;
 
+    background-size: 26px 26px;
 
+}
 
+.content{
 
+    padding: 0 4%;
 
+    color: #8A8A8A;
 
+}
 
+.content p:nth-child(1){
 
+    color: #333333;
 
+    font-size: 1.1em;
 
+    line-height: 1.5em;
 
+    letter-spacing: 0.04em;
 
+}
 
+.content p:nth-child(2){
 
+    /*font-size: 0.8em;*/
 
+    line-height: 1.4em;
 
+    letter-spacing: 0.05em;
 
+}
 
+.content .bottom{
 
+    height: 60px;
 
+    line-height: 60px;
 
+}

+ 35 - 0
css/oumei_circle.css
Vedi File

xqd 
@@ -0,0 +1,35 @@
 
+@charset "UTF-8";
 
+.circle_top{
 
+    padding: 5% 3%;
 
+    height: auto;
 
+}
 
+.circle_top .posting{
 
+    height: 25px;
 
+    width: 25px;
 
+    float: right;
 
+    padding-bottom: 20px;
 
+}
 
+.circle_top .avatar{
 
+    width: 13%;
 
+    height: 13%;
 
+    clear: both;
 
+    margin-right: 2%;
 
+}
 
+.showImg{
 
+    margin-left: 15%;
 
+}
 
+.showImg img{
 
+    width: 30%;
 
+    height: 30%;
 
+    margin-top: 5%;
 
+    float: left;
 
+    margin-right: 3%;
 
+}
 
+.collect{
 
+    clear: both;
 
+    height: 40px;
 
+    padding-top: 15px;
 
+}
 
+.collect img{
 
+    width: 60%;
 
+}

+ 37 - 0
fatie.html
Vedi File

xqd 
@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/fatie.css">
 
+</head>
 
+<body>
 
+    <div>
 
+        <div class="top">
 
+            <div class="fl icon">
 
+                &lt;
 
+            </div>
 
+            <div class="fl title" style="text-align: center">
 
+                edwin欧美音乐疯
 
+            </div>
 
+            <div class="fr icon">
 
+                ···
 
+            </div>
 
+        </div>
 
+        <div class="content">
 
+            <p class="title">我的帖子</p>
 
+            <textarea placeholder="添加帖子信息"></textarea>
 
+            <p class="addpic">上传图片，让别人更好的了解你</p>
 
+            <div class="pic">
 
+                <img src="imgs/icon_photo.svg"><br>
 
+                添加图片
 
+            </div>
 
+            <div class="send">
 
+                发帖
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

BIN
imgs/banner-拷贝@2x.png
Vedi File


+ 11 - 0
imgs/icon_arrows.svg
Vedi File

xqd 
@@ -0,0 +1,11 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #999;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <path id="圆角矩形_4" data-name="圆角矩形 4" class="cls-1" d="M21.711,15.2L8.74,27.721a1.045,1.045,0,0,1-1.441,0,0.96,0.96,0,0,1,0-1.392L19.549,14.5,7.3,2.671a0.96,0.96,0,0,1,0-1.392,1.045,1.045,0,0,1,1.441,0L21.711,13.8A0.96,0.96,0,0,1,21.711,15.2Z"/>
 
+</svg>

+ 21 - 0
imgs/icon_circle_h.svg
Vedi File

xqd 
@@ -0,0 +1,21 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="56.88" height="42" viewBox="0 0 56.88 42">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-2 {
 
+        fill: #32304a;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_circle_h</title>
 
+  <ellipse class="cls-1" cx="30.37" cy="32.82" rx="24.96" ry="9.64" transform="translate(-8.53 0.26) rotate(-15.32)"/>
 
+  <g>
 
+    <path class="cls-2" d="M30.37,50.93a21,21,0,1,1,21-21,21,21,0,0,1-21,21Zm0-40a19,19,0,1,0,19,19,19,19,0,0,0-19-19Z" transform="translate(-0.94 -8.93)"/>
 
+    <path class="cls-2" d="M20.2,34.57a4.42,4.42,0,1,1,4.42-4.42,4.43,4.43,0,0,1-4.42,4.42Zm0-6.85a2.43,2.43,0,1,0,2.43,2.43,2.43,2.43,0,0,0-2.43-2.43Zm12-8.62a2.87,2.87,0,1,1,2.87-2.87,2.88,2.88,0,0,1-2.87,2.87Zm0-3.76a.88.88,0,1,0,.88.88.89.89,0,0,0-.88-.88ZM38,29.49a2.1,2.1,0,1,1,2.1-2.1,2.1,2.1,0,0,1-2.1,2.1Zm0-2.21a.11.11,0,1,0,.11.11.11.11,0,0,0-.11-.11Z" transform="translate(-0.94 -8.93)"/>
 
+    <path class="cls-2" d="M16.24,42.34a40.06,40.06,0,0,1-4.33-.22c-6.12-.67-9.95-2.81-10.79-6-.75-2.84.9-6,4.76-9.26a1,1,0,1,1,1.27,1.53C4,31,2.51,33.58,3,35.59c.61,2.33,3.92,4,9.09,4.55,5.56.61,12.57-.1,19.75-2C47.64,34,56.93,26.33,55.73,21.75c-.47-1.77-2.55-3.2-5.87-4a1,1,0,0,1,.47-1.93c4.12,1,6.65,2.88,7.32,5.43,1.68,6.4-9.42,14.68-25.27,18.84a64.9,64.9,0,0,1-16.14,2.26Z" transform="translate(-0.94 -8.93)"/>
 
+  </g>
 
+</svg>

+ 25 - 0
imgs/icon_circle_n.svg
Vedi File

xqd 
@@ -0,0 +1,25 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="56.88" height="42" viewBox="0 0 56.88 42">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-1, .cls-2 {
 
+        opacity: 0.5;
 
+      }
 
+
 
+      .cls-3 {
 
+        fill: #32304a;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_circle_n</title>
 
+  <ellipse class="cls-1" cx="30.37" cy="32.82" rx="24.96" ry="9.64" transform="translate(-8.53 0.26) rotate(-15.32)"/>
 
+  <g class="cls-2">
 
+    <path class="cls-3" d="M30.37,50.93a21,21,0,1,1,21-21,21,21,0,0,1-21,21Zm0-40a19,19,0,1,0,19,19,19,19,0,0,0-19-19Z" transform="translate(-0.94 -8.93)"/>
 
+    <path class="cls-3" d="M20.2,34.57a4.42,4.42,0,1,1,4.42-4.42,4.43,4.43,0,0,1-4.42,4.42Zm0-6.85a2.43,2.43,0,1,0,2.43,2.43,2.43,2.43,0,0,0-2.43-2.43Zm12-8.62a2.87,2.87,0,1,1,2.87-2.87,2.88,2.88,0,0,1-2.87,2.87Zm0-3.76a.88.88,0,1,0,.88.88.89.89,0,0,0-.88-.88ZM38,29.49a2.1,2.1,0,1,1,2.1-2.1,2.1,2.1,0,0,1-2.1,2.1Zm0-2.21a.11.11,0,1,0,.11.11.11.11,0,0,0-.11-.11Z" transform="translate(-0.94 -8.93)"/>
 
+    <path class="cls-3" d="M16.24,42.34a40.06,40.06,0,0,1-4.33-.22c-6.12-.67-9.95-2.81-10.79-6-.75-2.84.9-6,4.76-9.26a1,1,0,1,1,1.27,1.53C4,31,2.51,33.58,3,35.59c.61,2.33,3.92,4,9.09,4.55,5.56.61,12.57-.1,19.75-2C47.64,34,56.93,26.33,55.73,21.75c-.47-1.77-2.55-3.2-5.87-4a1,1,0,0,1,.47-1.93c4.12,1,6.65,2.88,7.32,5.43,1.68,6.4-9.42,14.68-25.27,18.84a64.9,64.9,0,0,1-16.14,2.26Z" transform="translate(-0.94 -8.93)"/>
 
+  </g>
 
+</svg>

+ 12 - 0
imgs/icon_collect_h.svg
Vedi File

xqd 
@@ -0,0 +1,12 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="30" height="28.69" viewBox="0 0 30 28.69">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #ff6a6a;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_collect_h</title>
 
+  <path class="cls-1" d="M29.34,26.35l.06.3a1.21,1.21,0,0,0,.67.28,1.71,1.71,0,0,0,.73-.17L36,21.67A2.56,2.56,0,0,0,36.63,19a2.69,2.69,0,0,0-2.17-1.76l-7.12-1.06L24.25,9.82a2.76,2.76,0,0,0-4.92,0l-3.11,6.32-7.13,1a2.68,2.68,0,0,0-2.18,1.75,2.56,2.56,0,0,0,.64,2.69l5.21,5.15-1.22,7.13a2.63,2.63,0,0,0,1.12,2.6,2.85,2.85,0,0,0,2.87.16l6.21-3.27,6.2,3.31a2.78,2.78,0,0,0,1.3.33,2.81,2.81,0,0,0,1.57-.48,2.63,2.63,0,0,0,1.13-2.59l-.69-4.12s0-.46-.67-.48-.68.37-.68.37l.75,4.44a1.29,1.29,0,0,1-.57,1.3,1.5,1.5,0,0,1-1.53.08l-6.8-3.63-6.82,3.6a1.54,1.54,0,0,1-1.53-.08,1.29,1.29,0,0,1-.57-1.3l1.34-7.8-5.7-5.63a1.26,1.26,0,0,1-.32-1.34,1.39,1.39,0,0,1,1.13-.9l7.8-1.13,3.42-6.93a1.42,1.42,0,0,1,1.29-.77,1.43,1.43,0,0,1,1.29.78l3.38,6.95,7.8,1.16a1.41,1.41,0,0,1,1.13.91,1.3,1.3,0,0,1-.33,1.34l-5.73,5.59Z" transform="translate(-6.77 -8.31)"/>
 
+</svg>

+ 12 - 0
imgs/icon_collect_n.svg
Vedi File

xqd 
@@ -0,0 +1,12 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="30" height="28.69" viewBox="0 0 30 28.69">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #b2b2b2;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_collect_n</title>
 
+  <path class="cls-1" d="M29.34,26.35l.06.3a1.21,1.21,0,0,0,.67.28,1.71,1.71,0,0,0,.73-.17L36,21.67A2.56,2.56,0,0,0,36.63,19a2.69,2.69,0,0,0-2.17-1.76l-7.12-1.06L24.25,9.82a2.76,2.76,0,0,0-4.92,0l-3.11,6.32-7.13,1a2.68,2.68,0,0,0-2.18,1.75,2.56,2.56,0,0,0,.64,2.69l5.21,5.15-1.22,7.13a2.63,2.63,0,0,0,1.12,2.6,2.85,2.85,0,0,0,2.87.16l6.21-3.27,6.2,3.31a2.78,2.78,0,0,0,1.3.33,2.81,2.81,0,0,0,1.57-.48,2.63,2.63,0,0,0,1.13-2.59l-.69-4.12s0-.46-.67-.48-.68.37-.68.37l.75,4.44a1.29,1.29,0,0,1-.57,1.3,1.5,1.5,0,0,1-1.53.08l-6.8-3.63-6.82,3.6a1.54,1.54,0,0,1-1.53-.08,1.29,1.29,0,0,1-.57-1.3l1.34-7.8-5.7-5.63a1.26,1.26,0,0,1-.32-1.34,1.39,1.39,0,0,1,1.13-.9l7.8-1.13,3.42-6.93a1.42,1.42,0,0,1,1.29-.77,1.43,1.43,0,0,1,1.29.78l3.38,6.95,7.8,1.16a1.41,1.41,0,0,1,1.13.91,1.3,1.3,0,0,1-.33,1.34l-5.73,5.59Z" transform="translate(-6.77 -8.31)"/>
 
+</svg>

+ 12 - 0
imgs/icon_comment.svg
Vedi File

xqd 
@@ -0,0 +1,12 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="30" height="30.45" viewBox="0 0 30 30.45">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #b2b2b2;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_comment</title>
 
+  <path class="cls-1" d="M35.75,15a13.11,13.11,0,0,0-3.23-4.16,15.24,15.24,0,0,0-4.76-2.79,17.1,17.1,0,0,0-11.62,0,15.24,15.24,0,0,0-4.76,2.79A13.11,13.11,0,0,0,8.13,15a11.63,11.63,0,0,0,.43,11.06,13.76,13.76,0,0,0,4,4.3l-.42,6.48a.6.6,0,0,0,1,.5l5.63-4.65a.6.6,0,0,0-.77-.93l-4.56,3.76.36-5.43s0,0,0,0,0,0,0,0v-.21l0-.05v0l0,0,0,0,0,0,0,0,0,0,0,0,0,0h0l0,0h0a11.32,11.32,0,0,1-5.4-9.43c0-6.55,6.19-11.88,13.79-11.88s13.79,5.33,13.79,11.88S29.55,32,21.94,32a.6.6,0,1,0,0,1.21,16.82,16.82,0,0,0,5.81-1,15.24,15.24,0,0,0,4.76-2.79,13.11,13.11,0,0,0,3.23-4.16,11.61,11.61,0,0,0,0-10.25Z" transform="translate(-6.94 -7.04)"/>
 
+</svg>

+ 20 - 0
imgs/icon_home_h.svg
Vedi File

xqd 
@@ -0,0 +1,20 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-1, .cls-2 {
 
+        fill-rule: evenodd;
 
+      }
 
+
 
+      .cls-2 {
 
+        fill: #32304a;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_home_h</title>
 
+  <path class="cls-1" d="M22.47,10.84a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45Z" transform="translate(-9.22 -8.22)"/>
 
+  <path class="cls-2" d="M41.77,10a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7Zm-23.1,0a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7Zm23.1,23.1a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7Zm-23.1,0a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7ZM41.77,8.22a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45m-23.1,0a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45m23.1,23.1a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45m-23.1,0a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45" transform="translate(-9.22 -8.22)"/>
 
+</svg>

+ 21 - 0
imgs/icon_home_n.svg
Vedi File

xqd 
@@ -0,0 +1,21 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-1, .cls-2 {
 
+        fill-rule: evenodd;
 
+        opacity: 0.5;
 
+      }
 
+
 
+      .cls-2 {
 
+        fill: #32304a;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_home_n</title>
 
+  <path class="cls-1" d="M22.47,10.84a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45Z" transform="translate(-9.22 -8.22)"/>
 
+  <path class="cls-2" d="M41.77,10a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7Zm-23.1,0a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7Zm23.1,23.1a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7Zm-23.1,0a7.7,7.7,0,1,1-7.7,7.7,7.71,7.71,0,0,1,7.7-7.7ZM41.77,8.22a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45m-23.1,0a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45m23.1,23.1a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45m-23.1,0a9.45,9.45,0,1,0,9.45,9.45,9.47,9.47,0,0,0-9.45-9.45" transform="translate(-9.22 -8.22)"/>
 
+</svg>

+ 17 - 0
imgs/icon_mine_h.svg
Vedi File

xqd 
@@ -0,0 +1,17 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="40" height="45.06" viewBox="0 0 40 45.06">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-2 {
 
+        fill: #29283e;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_mine_h</title>
 
+  <circle class="cls-1" cx="23.51" cy="14.94" r="11.6"/>
 
+  <path class="cls-2" d="M42.39,19.44A12.71,12.71,0,1,0,24.53,31.19,20.23,20.23,0,0,0,9.68,50.74a.89.89,0,1,0,1.78,0A18.35,18.35,0,0,1,29.68,32.3,12.8,12.8,0,0,0,42.39,19.44ZM29.68,30.5A11.06,11.06,0,1,1,40.61,19.44,11,11,0,0,1,29.68,30.5Zm9.94,2.67a.88.88,0,0,0-1.21.33.9.9,0,0,0,.33,1.23,18.54,18.54,0,0,1,9.17,16,.89.89,0,1,0,1.78,0A20.35,20.35,0,0,0,39.63,33.18Z" transform="translate(-9.68 -6.58)"/>
 
+</svg>

+ 23 - 0
imgs/icon_mine_n.svg
Vedi File

xqd 
@@ -0,0 +1,23 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="40" height="45.06" viewBox="0 0 40 45.06">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-1, .cls-2 {
 
+        opacity: 0.5;
 
+      }
 
+
 
+      .cls-3 {
 
+        fill: #29283e;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_mine_n</title>
 
+  <circle class="cls-1" cx="23.51" cy="14.94" r="11.6"/>
 
+  <g class="cls-2">
 
+    <path class="cls-3" d="M42.39,19.44A12.71,12.71,0,1,0,24.53,31.19,20.23,20.23,0,0,0,9.68,50.74a.89.89,0,1,0,1.78,0A18.35,18.35,0,0,1,29.68,32.3,12.8,12.8,0,0,0,42.39,19.44ZM29.68,30.5A11.06,11.06,0,1,1,40.61,19.44,11,11,0,0,1,29.68,30.5Zm9.94,2.67a.88.88,0,0,0-1.21.33.9.9,0,0,0,.33,1.23,18.54,18.54,0,0,1,9.17,16,.89.89,0,1,0,1.78,0A20.35,20.35,0,0,0,39.63,33.18Z" transform="translate(-9.68 -6.58)"/>
 
+  </g>
 
+</svg>

+ 24 - 0
imgs/icon_photo.svg
Vedi File

xqd 
@@ -0,0 +1,24 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="58.52" height="50.16" viewBox="0 0 58.52 50.16">
 
+  <defs>
 
+    <style>
 
+      .cls-1, .cls-2 {
 
+        fill: #c7c7c7;
 
+      }
 
+
 
+      .cls-1 {
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_photo</title>
 
+  <g>
 
+    <path class="cls-1" d="M38.75,32.34H37a3.56,3.56,0,0,0-3.52-3.59V27a5.33,5.33,0,0,1,5.28,5.39Z" transform="translate(-3.12 -7.2)"/>
 
+    <path class="cls-1" d="M33.47,19.77A12.45,12.45,0,0,0,21.14,32.34c0,.07,0,.15,0,.22a12.59,12.59,0,0,0,7.08,11.16,12.08,12.08,0,0,0,5.24,1.19,12.57,12.57,0,0,0,0-25.14Zm-6,20.88a10.39,10.39,0,0,1-4.1-8.06q0-.13,0-.25A10.14,10.14,0,1,1,33.47,42.68a10,10,0,0,1-6-2Z" transform="translate(-3.12 -7.2)"/>
 
+    <g>
 
+      <path class="cls-1" d="M6.29,23.52V18.77c0-3,1.37-4.39,4.28-4.39h8.8v-1.8A5.34,5.34,0,0,1,24.66,7.2H42.27a5.34,5.34,0,0,1,5.28,5.39v1.8h8.8a5.33,5.33,0,0,1,5.28,5.39V47.5a5.34,5.34,0,0,1-5.28,5.39H28.23c-1.33,0-2.42-.12-2.42-1.45S26.89,50,28.23,50h28a2.5,2.5,0,0,0,2.49-2.51V19.32a2.51,2.51,0,0,0-2.49-2.51H44.44V12.61a2.51,2.51,0,0,0-2.49-2.51H25a2.5,2.5,0,0,0-2.49,2.51V16.8H11.69a2.5,2.5,0,0,0-2.49,2.51h0V32.56h0c-.08,1.28-.15,2.3-1.46,2.3s-1.47-1.1-1.47-2.45v-8.5a2.36,2.36,0,0,1,0-.39Z" transform="translate(-3.12 -7.2)"/>
 
+      <rect class="cls-2" x="12.63" y="35.33" width="2.33" height="22.02" rx="1.17" ry="1.17" transform="translate(24.47 85.49) rotate(-180)"/>
 
+      <rect class="cls-2" x="12.96" y="34.92" width="2.33" height="22.02" rx="1.17" ry="1.17" transform="translate(56.94 24.61) rotate(90)"/>
 
+    </g>
 
+    <rect class="cls-2" x="21.67" y="42.8" width="8" height="2.89" rx="1.44" ry="1.44"/>
 
+  </g>
 
+</svg>

+ 14 - 0
imgs/icon_play.svg
Vedi File

xqd 
@@ -0,0 +1,14 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="149.99" height="150" viewBox="0 0 149.99 150">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #fff;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_play</title>
 
+  <path class="cls-1" d="M79.94,5A75,75,0,0,0,12.3,112.4v0h0a.33.33,0,0,0,.05.11h0c.51.72,2,.6,3.36-.11s2.07-2,1.66-2.92a69.2,69.2,0,1,1,29,30.93.44.44,0,0,0-.06-.07c-.77-.59-2.19,0-3.18,1.25s-.91,2.91-.2,3.55c0,0,0,0,0,0A75,75,0,1,0,79.94,5Z" transform="translate(-4.94 -4.97)"/>
 
+  <path class="cls-1" d="M22.33,128.26a4,4,0,1,0,2-3.5,4,4,0,0,0-2,3.5Z" transform="translate(-4.94 -4.97)"/>
 
+  <path class="cls-1" d="M58.85,111.53a2.22,2.22,0,0,0,2.29,2.16,2.34,2.34,0,0,0,1.32-.4l53.67-31A2.44,2.44,0,0,0,117.77,80a2.4,2.4,0,0,0-1.68-2.32L62.65,46.81a2.37,2.37,0,0,0-1.52-.55,2.23,2.23,0,0,0-2.29,2.16,2.9,2.9,0,0,0,.06.49V111a3,3,0,0,0-.06.5m5.86-52.84a1.5,1.5,0,0,1,1.54-1.46,1.54,1.54,0,0,1,1,.37l36,20.81a1.65,1.65,0,0,1,0,3.13l-36.2,20.93a1.63,1.63,0,0,1-.88.23,1.5,1.5,0,0,1-1.54-1.46,1.21,1.21,0,0,1,0-.32V59a1.09,1.09,0,0,1,0-.32Z" transform="translate(-4.94 -4.97)"/>
 
+</svg>

+ 23 - 0
imgs/icon_posting.svg
Vedi File

xqd 
@@ -0,0 +1,23 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+        opacity: 0.5;
 
+      }
 
+
 
+      .cls-2 {
 
+        fill: #32304a;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_posting_n</title>
 
+  <rect class="cls-1" x="4.51" y="4.01" width="33.92" height="33.92" rx="4.08" ry="4.08"/>
 
+  <g>
 
+    <path class="cls-2" d="M45.59,20.25A.85.85,0,0,1,45,20l-5.86-5.86A.84.84,0,0,1,40.32,13l5.86,5.86a.84.84,0,0,1-.59,1.43Z" transform="translate(-9.57 -9.57)"/>
 
+    <path class="cls-2" d="M17.11,42.87a.84.84,0,0,1-.59-.24.83.83,0,0,1-.25-.61c0-.31.15-7.59,3.35-10.8l19.5-19.5c2.32-2.32,5.44-2.84,7.1-1.18l2.37,2.37c1.66,1.66,1.14,4.78-1.18,7.11L27.92,39.51c-3.16,3.16-10.48,3.35-10.79,3.35ZM43.73,11.25a5.22,5.22,0,0,0-3.42,1.66L20.81,32.4c-2.14,2.14-2.68,6.78-2.82,8.74,2-.15,6.64-.72,8.74-2.81l19.5-19.5c1.61-1.61,2.15-3.78,1.18-4.74L45,11.72a1.82,1.82,0,0,0-1.31-.47Z" transform="translate(-9.57 -9.57)"/>
 
+    <path class="cls-2" d="M43.92,49.57H13.76a4.2,4.2,0,0,1-4.19-4.19V15.22A4.2,4.2,0,0,1,13.76,11h20.1a.84.84,0,0,1,0,1.67H13.76a2.52,2.52,0,0,0-2.51,2.51V45.37a2.52,2.52,0,0,0,2.51,2.51H43.91a2.52,2.52,0,0,0,2.51-2.51V27a.84.84,0,0,1,1.67,0V45.38a4.18,4.18,0,0,1-4.18,4.19Z" transform="translate(-9.57 -9.57)"/>
 
+    <path class="cls-2" d="M23.39,36.58a.43.43,0,0,1-.3-.12.42.42,0,0,1,0-.59l.84-.84a.42.42,0,1,1,.59.59l-.84.84a.41.41,0,0,1-.3.12Zm4.11-4.16a.43.43,0,0,1-.29-.11.42.42,0,0,1,0-.59L39,19.12a.42.42,0,0,1,.59,0,.42.42,0,0,1,0,.59L27.81,32.29a.42.42,0,0,1-.31.13Z" transform="translate(-9.57 -9.57)"/>
 
+  </g>
 
+</svg>

+ 17 - 0
imgs/icon_search.svg
Vedi File

xqd 
@@ -0,0 +1,17 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="45" viewBox="0 0 45 45">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: gray;
 
+        fill-rule: evenodd;
 
+        filter: url(#filter);
 
+      }
 
+    </style>
 
+    <filter id="filter" x="7" y="7" width="30.031" height="30.031" filterUnits="userSpaceOnUse">
 
+      <feFlood result="flood" flood-color="#c7c7c7"/>
 
+      <feComposite result="composite" operator="in" in2="SourceGraphic"/>
 
+      <feBlend result="blend" in2="SourceGraphic"/>
 
+    </filter>
 
+  </defs>
 
+  <path id="圆角矩形_1" data-name="圆角矩形 1" class="cls-1" d="M19.609,7A12.609,12.609,0,1,1,7,19.609,12.609,12.609,0,0,1,19.609,7Zm0,2.875a9.734,9.734,0,1,1-9.734,9.734A9.734,9.734,0,0,1,19.609,9.875Zm7.5,17.239a1.44,1.44,0,0,1,2.037,0l7.428,7.428a1.44,1.44,0,0,1-2.037,2.037l-7.428-7.428A1.44,1.44,0,0,1,27.114,27.114Z"/>
 
+</svg>

+ 22 - 0
imgs/icon_show_h.svg
Vedi File

xqd 
@@ -0,0 +1,22 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-2 {
 
+        fill: #29283e;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_show</title>
 
+  <circle class="cls-1" cx="31.1" cy="26.14" r="7.17"/>
 
+  <g>
 
+    <path class="cls-2" d="M52.83,28.83a.89.89,0,0,0-.89.89A22.22,22.22,0,1,1,29.72,7.49a.89.89,0,1,0,0-1.77,24,24,0,1,0,24,24,.89.89,0,0,0-.89-.89Z" transform="translate(-5.72 -5.72)"/>
 
+    <path class="cls-2" d="M35.05,7.49m-.89,0a.89.89,0,1,0,.89-.89.89.89,0,0,0-.89.89" transform="translate(-5.72 -5.72)"/>
 
+    <path class="cls-2" d="M51.94,24.39m-.89,0a.89.89,0,1,0,.89-.89.89.89,0,0,0-.89.89" transform="translate(-5.72 -5.72)"/>
 
+    <path class="cls-2" d="M51.35,19.3c-.32-.65-.66-1.29-1-1.91A23.94,23.94,0,0,0,40.18,8.12.85.85,0,0,0,39.89,8a.93.93,0,0,0-.39-.09.89.89,0,0,0-.89.89V25a7.11,7.11,0,1,0,1.77,4.7c0-.11,0-.22,0-.33a.8.8,0,0,0,0-.11V10.22a22.51,22.51,0,0,1,8.4,8.08c.34.57.65,1.15.94,1.74a.89.89,0,0,0,1.62-.75ZM33.27,35a5.33,5.33,0,1,1,5.33-5.33A5.34,5.34,0,0,1,33.27,35Zm-4.44,6.22a8,8,0,0,1-8-8,.89.89,0,1,0-1.77,0A9.79,9.79,0,0,0,28.83,43a.89.89,0,1,0,0-1.77Z" transform="translate(-5.72 -5.72)"/>
 
+  </g>
 
+</svg>

+ 26 - 0
imgs/icon_show_n.svg
Vedi File

xqd 
@@ -0,0 +1,26 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #a3a1f7;
 
+      }
 
+
 
+      .cls-1, .cls-2 {
 
+        opacity: 0.5;
 
+      }
 
+
 
+      .cls-3 {
 
+        fill: #29283e;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_show_n</title>
 
+  <circle class="cls-1" cx="31.1" cy="26.14" r="7.17"/>
 
+  <g class="cls-2">
 
+    <path class="cls-3" d="M52.83,28.83a.89.89,0,0,0-.89.89A22.22,22.22,0,1,1,29.72,7.49a.89.89,0,1,0,0-1.77,24,24,0,1,0,24,24,.89.89,0,0,0-.89-.89Z" transform="translate(-5.72 -5.72)"/>
 
+    <path class="cls-3" d="M35.05,7.49m-.89,0a.89.89,0,1,0,.89-.89.89.89,0,0,0-.89.89" transform="translate(-5.72 -5.72)"/>
 
+    <path class="cls-3" d="M51.94,24.39m-.89,0a.89.89,0,1,0,.89-.89.89.89,0,0,0-.89.89" transform="translate(-5.72 -5.72)"/>
 
+    <path class="cls-3" d="M51.35,19.3c-.32-.65-.66-1.29-1-1.91A23.94,23.94,0,0,0,40.18,8.12.85.85,0,0,0,39.89,8a.93.93,0,0,0-.39-.09.89.89,0,0,0-.89.89V25a7.11,7.11,0,1,0,1.77,4.7c0-.11,0-.22,0-.33a.8.8,0,0,0,0-.11V10.22a22.51,22.51,0,0,1,8.4,8.08c.34.57.65,1.15.94,1.74a.89.89,0,0,0,1.62-.75ZM33.27,35a5.33,5.33,0,1,1,5.33-5.33A5.34,5.34,0,0,1,33.27,35Zm-4.44,6.22a8,8,0,0,1-8-8,.89.89,0,1,0-1.77,0A9.79,9.79,0,0,0,28.83,43a.89.89,0,1,0,0-1.77Z" transform="translate(-5.72 -5.72)"/>
 
+  </g>
 
+</svg>

+ 12 - 0
imgs/icon_support_h.svg
Vedi File

xqd 
@@ -0,0 +1,12 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #ff6a6a;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_support_h</title>
 
+  <path class="cls-1" d="M32.11,18.43H27.05a12.7,12.7,0,0,0,.29-2.72h0V13.31a4.43,4.43,0,1,0-8.86,0V15.7c0,2.81-2.24,4.77-5.45,4.77H10.3a3.41,3.41,0,0,0-3.41,3.41V35.47a3.41,3.41,0,0,0,3.41,3.41H13v-17c3.95,0,6.82-2.58,6.82-6.14V13.31a3.07,3.07,0,1,1,6.14,0V15.7a11.62,11.62,0,0,1-.45,3.22l-.25.87h6.84a3.41,3.41,0,0,1,3.41,3.41,17.66,17.66,0,0,1-1.28,5.11l0,.13c-3,9.08-3.48,9.08-6.17,9.08H17.8a.68.68,0,0,0,0,1.36H28c3.74,0,4.5-1,7.47-10l0-.1a21.2,21.2,0,0,0,1.36-5.56,4.78,4.78,0,0,0-4.77-4.77ZM11.66,37.52H10.29a2,2,0,0,1-2-2V23.88a2,2,0,0,1,2-2h1.36V37.52Z" transform="translate(-6.89 -8.88)"/>
 
+</svg>

+ 12 - 0
imgs/icon_support_n.svg
Vedi File

xqd 
@@ -0,0 +1,12 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #b2b2b2;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_support_n</title>
 
+  <path class="cls-1" d="M32.11,18.43H27.05a12.7,12.7,0,0,0,.29-2.72h0V13.31a4.43,4.43,0,1,0-8.86,0V15.7c0,2.81-2.24,4.77-5.45,4.77H10.3a3.41,3.41,0,0,0-3.41,3.41V35.47a3.41,3.41,0,0,0,3.41,3.41H13v-17c3.95,0,6.82-2.58,6.82-6.14V13.31a3.07,3.07,0,1,1,6.14,0V15.7a11.62,11.62,0,0,1-.45,3.22l-.25.87h6.84a3.41,3.41,0,0,1,3.41,3.41,17.66,17.66,0,0,1-1.28,5.11l0,.13c-3,9.08-3.48,9.08-6.17,9.08H17.8a.68.68,0,0,0,0,1.36H28c3.74,0,4.5-1,7.47-10l0-.1a21.2,21.2,0,0,0,1.36-5.56,4.78,4.78,0,0,0-4.77-4.77ZM11.66,37.52H10.29a2,2,0,0,1-2-2V23.88a2,2,0,0,1,2-2h1.36V37.52Z" transform="translate(-6.89 -8.88)"/>
 
+</svg>

+ 12 - 0
imgs/icon_views.svg
Vedi File

xqd 
@@ -0,0 +1,12 @@
 
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="30" height="25.45" viewBox="0 0 30 25.45">
 
+  <defs>
 
+    <style>
 
+      .cls-1 {
 
+        fill: #b2b2b2;
 
+        fill-rule: evenodd;
 
+      }
 
+    </style>
 
+  </defs>
 
+  <title>icon_views</title>
 
+  <path class="cls-1" d="M22.06,17.6a5.95,5.95,0,1,0,6.15,5.95,6.05,6.05,0,0,0-6.15-5.95Zm0,10.49a4.55,4.55,0,1,1,4.7-4.55,4.63,4.63,0,0,1-4.7,4.55Zm15-6.84A15.74,15.74,0,0,0,22,10.77,15.75,15.75,0,0,0,7.13,21a.67.67,0,0,0-.1.35.72.72,0,0,0,.73.71.73.73,0,0,0,.69-.49h0A14.28,14.28,0,0,1,22,12.19,14.29,14.29,0,0,1,35.6,21.58.73.73,0,0,0,37,21.4a.64.64,0,0,0,0-.14Zm0,4.49a.66.66,0,0,0,0-.14.72.72,0,0,0-.73-.71.73.73,0,0,0-.71.53A14.28,14.28,0,0,1,22,34.81,14.28,14.28,0,0,1,8.47,25.38h0a.73.73,0,0,0-.69-.49A.72.72,0,0,0,7,25.6a.68.68,0,0,0,.1.35A15.75,15.75,0,0,0,22,36.23,15.74,15.74,0,0,0,37,25.75Z" transform="translate(-7.03 -10.77)"/>
 
+</svg>

BIN
imgs/img_ video@2x.png
Vedi File


BIN
imgs/img_1.png
Vedi File


BIN
imgs/img_10@2x.png
Vedi File


BIN
imgs/img_11@2x.png
Vedi File


BIN
imgs/img_12@2x.png
Vedi File


BIN
imgs/img_1@2x.png
Vedi File


BIN
imgs/img_2.png
Vedi File


BIN
imgs/img_2@2x.png
Vedi File


BIN
imgs/img_3@2x.png
Vedi File


BIN
imgs/img_4@2x.png
Vedi File


BIN
imgs/img_5@2x.png
Vedi File


BIN
imgs/img_6@2x.png
Vedi File


BIN
imgs/img_7@2x.png
Vedi File


BIN
imgs/img_8@2x.png
Vedi File


BIN
imgs/img_9@2x.png
Vedi File


BIN
imgs/img_article1@2x.png
Vedi File


BIN
imgs/img_article2@2x.png
Vedi File


BIN
imgs/img_article3@2x.png
Vedi File


BIN
imgs/img_article@2x.png
Vedi File


BIN
imgs/img_articlebig1@2x.png
Vedi File


BIN
imgs/img_articlebig2@2x.png
Vedi File


BIN
imgs/img_avatar150@2x.png
Vedi File


BIN
imgs/img_avatar60@2x.png
Vedi File


BIN
imgs/img_avatar70@2x.png
Vedi File


BIN
imgs/img_banner_circle@2x.png
Vedi File


BIN
imgs/img_banner_home.png
Vedi File


BIN
imgs/img_collect1@2x.png
Vedi File


BIN
imgs/img_collect2@2x.png
Vedi File


BIN
imgs/img_collect3@2x.png
Vedi File


BIN
imgs/img_picture@2x.png
Vedi File


BIN
imgs/img_show@2x.png
Vedi File


BIN
imgs/img_video1@2x.png
Vedi File


BIN
imgs/img_video2@2x.png
Vedi File


BIN
imgs/img_video3@2x.png
Vedi File


+ 111 - 0
index.html
Vedi File

xqd 
@@ -0,0 +1,111 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+    <div class="wrapper">
 
+        <div class="top">
 
+            <div class="fl icon">
 
+                &lt;
 
+            </div>
 
+            <div class="fl title" style="text-align: center">
 
+                edwin欧美音乐疯
 
+            </div>
 
+            <div class="fr icon">
 
+                ···
 
+            </div>
 
+        </div>
 
+        <div>
 
+            <img src="imgs/img_banner_home.png">
 
+        </div>
 
+        <div class="search">
 
+            <input type="text" placeholder="搜索">
 
+        </div>
 
+        <div>
 
+            <img src="imgs/img_1.png">
 
+        </div>
 
+        <div class="content">
 
+            <p>舒缓中的节奏感</p>
 
+            <p>精选的安静歌曲配上恰到火候的节奏，不骄不躁，有韵有味，好好享受你的音乐时光吧！</p>
 
+            <div class="bottom">
 
+                <div class="fl">
 
+                    1小时前
 
+                </div>
 
+                <div class="fr" style="width: 20px; padding-top: 2px">
 
+                    <img src="imgs/icon_collect_h.svg">
 
+                </div>
 
+                <div class="fr" style="width: 25%;">
 
+                    <div class="fl" style="width: 20px; margin: 2px 10% 0 0">
 
+                        <img src="imgs/icon_views.svg">
 
+                    </div>
 
+                    <div class="fl">
 
+                        3.5k
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div>
 
+            <img src="imgs/img_2.png">
 
+        </div>
 
+        <div class="content">
 
+            <p>舒缓中的节奏感</p>
 
+            <p>精选的安静歌曲配上恰到火候的节奏，不骄不躁，有韵有味，好好享受你的音乐时光吧！</p>
 
+            <div class="bottom">
 
+                <div class="fl">
 
+                    1小时前
 
+                </div>
 
+                <div class="fr" style="width: 20px; padding-top: 2px">
 
+                    <img src="imgs/icon_collect_h.svg">
 
+                </div>
 
+                <div class="fr" style="width: 25%;">
 
+                    <div class="fl" style="width: 20%; margin: 2px 10% 0 0">
 
+                        <img src="imgs/icon_views.svg">
 
+                    </div>
 
+                    <div class="fl">
 
+                        3.5k
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div class="footer">
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_home_h.svg">
 
+            </div>
 
+            <div style="color: #32304A">
 
+                主页
 
+            </div>
 
+        </div>
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_circle_n.svg" style="width: 40px">
 
+            </div>
 
+            <div>
 
+                圈子
 
+            </div>
 
+        </div>
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_show_n.svg">
 
+            </div>
 
+            <div>
 
+                看演出
 
+            </div>
 
+        </div>
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_mine_n.svg" style="width: 28px">
 
+            </div>
 
+            <div>
 
+                我的
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 82 - 0
mine.html
Vedi File

xqd 
@@ -0,0 +1,82 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div>
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div style="background: #32304A; text-align: center; color: #FEFEFE">
 
+        <img src="imgs/img_avatar150@2x.png" style="width: 20%; height: 20%; margin: 30px 0 10px 0">
 
+        <p>
 
+            光影
 
+        </p>
 
+        <p>获得288个赞</p>
 
+        <div style="padding: 30px 0 20px 0; font-size: 15px">
 
+            <div class="fl" style="text-align: center; width: 33%;">
 
+                28<br>
 
+                <p style="margin-top: 5px">
 
+                    帖子
 
+                </p>
 
+            </div>
 
+            <div class="fl" style="text-align: center; width: 33%; border-left: 1px solid #FEFEFE; border-right: 1px solid #FEFEFE;">
 
+                64<br>
 
+                <p style="margin-top: 5px">
 
+                    评论
 
+                </p>
 
+            </div>
 
+            <div class="fr" style="text-align: center; width: 33%;">
 
+                52<br>
 
+                <p style="margin-top: 5px">
 
+                    收藏
 
+                </p>
 
+            </div>
 
+            <div style="clear:both;"></div>
 
+        </div>
 
+    </div>
 
+    <div style="padding: 0 10px; color: #808080; font-size: 15px">
 
+        <div style="padding: 20px 2px; border-bottom: 1px solid #808080">
 
+            <div class="fl">
 
+                我的帖子
 
+            </div>
 
+            <div class="fr" style="text-align: right">
 
+                <img src="imgs/icon_arrows.svg" style="width: 60%; height: 60%;">
 
+            </div>
 
+            <div style="clear:both;"></div>
 
+        </div>
 
+        <div style="padding: 20px 2px; border-bottom: 1px solid #808080">
 
+            <div class="fl">
 
+                收到的回复
 
+            </div>
 
+            <div class="fr" style="text-align: right">
 
+                <img src="imgs/icon_arrows.svg" style="width: 60%; height: 60%;">
 
+            </div>
 
+            <div style="clear:both;"></div>
 
+        </div>
 
+        <div style="padding: 20px 2px; border-bottom: 1px solid #808080">
 
+            <div class="fl">
 
+                我的收藏
 
+            </div>
 
+            <div class="fr" style="text-align: right">
 
+                <img src="imgs/icon_arrows.svg" style="width: 60%; height: 60%;">
 
+            </div>
 
+            <div style="clear:both;"></div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 75 - 0
my_collection.html
Vedi File

xqd 
@@ -0,0 +1,75 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div>
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div style="width: 100%; height: 150px; line-height: 200px; text-align: center; background: url('imgs/img_collect1@2x.png') no-repeat center; background-size: 100% 100%">
 
+        <!--<img src="imgs/img_video1@2x.png">-->
 
+        <img src="imgs/icon_play.svg" style="width: 70px; height: 70px;">
 
+    </div>
 
+    <div class="content">
 
+        <p>英伦复古风：巴哥Jake Bugg强势新单</p>
 
+        <p>Jake Bugg以根源民谣出道，又有一把另人惊艳的烟熏嗓，一开口就把听众一脚蹬到六七十年代。</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                7月28日
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div style="clear:both"></div>
 
+    <div style="width: 100%; height: 150px; line-height: 200px; text-align: center; background: url('imgs/img_collect2@2x.png') no-repeat center; background-size: 100% 100%">
 
+        <!--<img src="imgs/img_video1@2x.png">-->
 
+        <img src="imgs/icon_play.svg" style="width: 70px; height: 70px;">
 
+    </div>
 
+    <div class="content">
 
+        <p>战狼2中感人插曲奇异恩典Amazing Grace</p>
 
+        <p>amazing grace,how sweet the sound that saved a wretch like me奇异恩典 何等甘甜 我罪以得赦免</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                7月28日
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div style="clear:both"></div>
 
+    <div style="width: 100%; height: 150px; line-height: 200px; text-align: center; background: url('imgs/img_collect3@2x.png') no-repeat center; background-size: 100% 100%">
 
+        <!--<img src="imgs/img_video1@2x.png">-->
 
+        <img src="imgs/icon_play.svg" style="width: 70px; height: 70px;">
 
+    </div>
 
+    <div class="content">
 
+        <p>战狼2中感人插曲奇异恩典Amazing Grace</p>
 
+        <p>amazing grace,how sweet the sound that saved a wretch like me奇异恩典 何等甘甜 我罪以得赦免</p>
 
+        <div class="bottom">
 
+            <div class="fl">
 
+                7月28日
 
+            </div>
 
+            <div class="fr" style="width: 20px; padding-top: 2px">
 
+                <img src="imgs/icon_collect_h.svg">
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 145 - 0
my_tiezi.html
Vedi File

xqd 
@@ -0,0 +1,145 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/oumei_circle.css">
 
+</head>
 
+<body>
 
+<div class="wrapper">
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div class="circle_top">
 
+        <div class="avatar fl">
 
+            <img src="imgs/img_avatar70@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    光影
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.9em">
 
+                    2017-07-21
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 1em; clear:both; color: #333333">
 
+                你，这未走完的路...
 
+            </div>
 
+        </div>
 
+        <div style="clear:both;"></div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_1@2x.png">
 
+            <img src="imgs/img_2@2x.png">
 
+            <img src="imgs/img_3@2x.png">
 
+        </div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_4@2x.png">
 
+            <img src="imgs/img_5@2x.png">
 
+            <img src="imgs/img_6@2x.png">
 
+        </div>
 
+        <div class="collect">
 
+            <div class="fr" style="color: #B3B3B3; margin-left: -2%;">
 
+                189
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_support_h.svg">
 
+            </div>
 
+            <div class="fr" style="color: #B3B3B3; margin-right: 5%; margin-left: -2%;">
 
+                56
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_comment.svg">
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div class="circle_top">
 
+        <div class="avatar fl">
 
+            <img src="imgs/img_avatar70@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    光影
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.9em">
 
+                    2017-07-21
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 1em; clear:both; color: #333333">
 
+                在巴黎的天空下人们唱起他们热爱的歌
 
+            </div>
 
+        </div>
 
+        <div style="clear:both;"></div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_7@2x.png">
 
+            <img src="imgs/img_8@2x.png">
 
+            <img src="imgs/img_9@2x.png">
 
+        </div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_11@2x.png">
 
+            <img src="imgs/img_12@2x.png">
 
+            <img src="imgs/img_10@2x.png">
 
+        </div>
 
+        <div class="collect">
 
+            <div class="fr" style="color: #B3B3B3; margin-left: -2%;">
 
+                189
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_support_h.svg">
 
+            </div>
 
+            <div class="fr" style="color: #B3B3B3; margin-right: 5%; margin-left: -2%;">
 
+                56
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_comment.svg">
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+<div class="footer">
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_home_n.svg">
 
+        </div>
 
+        <div>
 
+            主页
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_circle_h.svg" style="width: 40px">
 
+        </div>
 
+        <div style="color: #32304A">
 
+            圈子
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_show_n.svg">
 
+        </div>
 
+        <div>
 
+            看演出
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_mine_n.svg" style="width: 28px">
 
+        </div>
 
+        <div>
 
+            我的
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 148 - 0
oumei_circle.html
Vedi File

xqd 
@@ -0,0 +1,148 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/oumei_circle.css">
 
+</head>
 
+<body>
 
+    <div class="wrapper">
 
+        <div class="top">
 
+            <div class="fl icon">
 
+                &lt;
 
+            </div>
 
+            <div class="fl title" style="text-align: center">
 
+                edwin欧美音乐疯
 
+            </div>
 
+            <div class="fr icon">
 
+                ···
 
+            </div>
 
+        </div>
 
+        <div class="circle_top">
 
+            <div class="posting">
 
+                <img src="imgs/icon_posting.svg">
 
+            </div>
 
+            <div class="avatar fl">
 
+                <img src="imgs/img_avatar70@2x.png">
 
+            </div>
 
+            <div class="fl" style="width: 85%">
 
+                <div style="width: 100%">
 
+                    <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                        光影
 
+                    </div>
 
+                    <div class="fr" style="color: #B3B3B3; font-size: 0.9em">
 
+                        2017-07-21
 
+                    </div>
 
+                </div>
 
+                <div style="font-size: 1em; clear:both; color: #333333">
 
+                    你，这未走完的路...
 
+                </div>
 
+            </div>
 
+            <div style="clear:both;"></div>
 
+            <div class="showImg">
 
+                <img src="imgs/img_1@2x.png">
 
+                <img src="imgs/img_2@2x.png">
 
+                <img src="imgs/img_3@2x.png">
 
+            </div>
 
+            <div class="showImg">
 
+                <img src="imgs/img_4@2x.png">
 
+                <img src="imgs/img_5@2x.png">
 
+                <img src="imgs/img_6@2x.png">
 
+            </div>
 
+            <div class="collect">
 
+                <div class="fr" style="color: #B3B3B3; margin-left: -2%;">
 
+                    189
 
+                </div>
 
+                <div class="fr">
 
+                    <img src="imgs/icon_support_h.svg">
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; margin-right: 5%; margin-left: -2%;">
 
+                    56
 
+                </div>
 
+                <div class="fr">
 
+                    <img src="imgs/icon_comment.svg">
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="circle_top">
 
+            <div class="avatar fl">
 
+                <img src="imgs/img_avatar70@2x.png">
 
+            </div>
 
+            <div class="fl" style="width: 85%">
 
+                <div style="width: 100%">
 
+                    <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                        光影
 
+                    </div>
 
+                    <div class="fr" style="color: #B3B3B3; font-size: 0.9em">
 
+                        2017-07-21
 
+                    </div>
 
+                </div>
 
+                <div style="font-size: 1em; clear:both; color: #333333">
 
+                    在巴黎的天空下人们唱起他们热爱的歌
 
+                </div>
 
+            </div>
 
+            <div style="clear:both;"></div>
 
+            <div class="showImg">
 
+                <img src="imgs/img_7@2x.png">
 
+                <img src="imgs/img_8@2x.png">
 
+                <img src="imgs/img_9@2x.png">
 
+            </div>
 
+            <div class="showImg">
 
+                <img src="imgs/img_11@2x.png">
 
+                <img src="imgs/img_12@2x.png">
 
+                <img src="imgs/img_10@2x.png">
 
+            </div>
 
+            <div class="collect">
 
+                <div class="fr" style="color: #B3B3B3; margin-left: -2%;">
 
+                    189
 
+                </div>
 
+                <div class="fr">
 
+                    <img src="imgs/icon_support_h.svg">
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; margin-right: 5%; margin-left: -2%;">
 
+                    56
 
+                </div>
 
+                <div class="fr">
 
+                    <img src="imgs/icon_comment.svg">
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div class="footer">
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_home_n.svg">
 
+            </div>
 
+            <div>
 
+                主页
 
+            </div>
 
+        </div>
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_circle_h.svg" style="width: 40px">
 
+            </div>
 
+            <div style="color: #32304A">
 
+                圈子
 
+            </div>
 
+        </div>
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_show_n.svg">
 
+            </div>
 
+            <div>
 
+                看演出
 
+            </div>
 
+        </div>
 
+        <div class="bottom fl">
 
+            <div class="icon">
 
+                <img src="imgs/icon_mine_n.svg" style="width: 28px">
 
+            </div>
 
+            <div>
 
+                我的
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 231 - 0
oumei_comment.html
Vedi File

xqd 
@@ -0,0 +1,231 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/oumei_circle.css">
 
+</head>
 
+<body>
 
+<div class="wrapper" style="margin-bottom: 200px">
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div class="circle_top">
 
+        <div class="posting">
 
+            <img src="imgs/icon_posting.svg">
 
+        </div>
 
+        <div class="avatar fl">
 
+            <img src="imgs/img_avatar70@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    光影
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.9em">
 
+                    2017-07-21
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 1em; clear:both; color: #333333">
 
+                你，这未走完的路...
 
+            </div>
 
+        </div>
 
+        <div style="clear:both;"></div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_1@2x.png">
 
+            <img src="imgs/img_2@2x.png">
 
+            <img src="imgs/img_3@2x.png">
 
+        </div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_4@2x.png">
 
+            <img src="imgs/img_5@2x.png">
 
+            <img src="imgs/img_6@2x.png">
 
+        </div>
 
+        <div class="collect">
 
+            <div class="fr" style="color: #B3B3B3; margin-left: -2%;">
 
+                189
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_support_h.svg">
 
+            </div>
 
+            <div class="fr" style="color: #B3B3B3; margin-right: 5%; margin-left: -2%;">
 
+                56
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_comment.svg">
 
+            </div>
 
+        </div>
 
+        <div style="height: 60px">
 
+            <div class="fl" style="margin-left: 15%; width: 65%;">
 
+                <input type="text" style="border-radius: 30px; border: none; height: 35px; width: 90%; padding: 0 5%; background: #F2F2F2">
 
+            </div>
 
+            <div class="fl" style="color: #999999; height: 36px; width: 18%; line-height: 36px; text-align: center;">
 
+                评论
 
+            </div>
 
+        </div>
 
+        <div class="avatar fl" style="width: 12%; height: 12%">
 
+            <img src="imgs/img_avatar60@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    Splistinge
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.8em">
 
+                    2017-07-21 19:50
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 0.9em; clear:both; color: #333333">
 
+                这就是一首比较悲伤的歌
 
+            </div>
 
+        </div>
 
+        <div class="avatar fl" style="width: 12%; height: 12%; margin-top: 20px">
 
+            <img src="imgs/img_avatar70@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%; margin-top: 20px">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    光影
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.8em">
 
+                    2017-07-21 21:50
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 0.9em; clear:both; color: #333333">
 
+                回复Splistinge：听着有些难过
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <div style="background: #FAFAFA; color: #ADACE5; margin-top: 120px; text-align: center; padding: 7px 0">
 
+        查看更多评论
 
+    </div>
 
+    <div class="circle_top">
 
+        <div class="avatar fl">
 
+            <img src="imgs/img_avatar70@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    光影
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.9em">
 
+                    2017-07-21
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 1em; clear:both; color: #333333">
 
+                你，这未走完的路...
 
+            </div>
 
+        </div>
 
+        <div style="clear:both;"></div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_1@2x.png">
 
+            <img src="imgs/img_2@2x.png">
 
+            <img src="imgs/img_3@2x.png">
 
+        </div>
 
+        <div class="showImg">
 
+            <img src="imgs/img_4@2x.png">
 
+            <img src="imgs/img_5@2x.png">
 
+            <img src="imgs/img_6@2x.png">
 
+        </div>
 
+        <div class="collect">
 
+            <div class="fr" style="color: #B3B3B3; margin-left: -2%;">
 
+                189
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_support_h.svg">
 
+            </div>
 
+            <div class="fr" style="color: #B3B3B3; margin-right: 5%; margin-left: -2%;">
 
+                56
 
+            </div>
 
+            <div class="fr">
 
+                <img src="imgs/icon_comment.svg">
 
+            </div>
 
+        </div>
 
+        <div style="height: 60px">
 
+            <div class="fl" style="margin-left: 15%; width: 65%;">
 
+                <input type="text" style="border-radius: 30px; border: none; height: 35px; width: 90%; padding: 0 5%; background: #F2F2F2">
 
+            </div>
 
+            <div class="fl" style="color: #999999; height: 36px; width: 18%; line-height: 36px; text-align: center;">
 
+                评论
 
+            </div>
 
+        </div>
 
+        <div class="avatar fl" style="width: 12%; height: 12%">
 
+            <img src="imgs/img_avatar60@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    Splistinge
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.8em">
 
+                    2017-07-21 19:50
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 0.9em; clear:both; color: #333333">
 
+                这就是一首比较悲伤的歌
 
+            </div>
 
+        </div>
 
+        <div class="avatar fl" style="width: 12%; height: 12%; margin-top: 20px">
 
+            <img src="imgs/img_avatar70@2x.png">
 
+        </div>
 
+        <div class="fl" style="width: 85%; margin-top: 20px">
 
+            <div style="width: 100%">
 
+                <div class="fl" style="color: #666666; font-size: 1.1em;">
 
+                    光影
 
+                </div>
 
+                <div class="fr" style="color: #B3B3B3; font-size: 0.8em">
 
+                    2017-07-21 21:50
 
+                </div>
 
+            </div>
 
+            <div style="font-size: 0.9em; clear:both; color: #333333">
 
+                回复Splistinge：听着有些难过
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+<div class="footer">
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_home_n.svg">
 
+        </div>
 
+        <div>
 
+            主页
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_circle_h.svg" style="width: 40px">
 
+        </div>
 
+        <div style="color: #32304A">
 
+            圈子
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_show_n.svg">
 
+        </div>
 
+        <div>
 
+            看演出
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_mine_n.svg" style="width: 28px">
 
+        </div>
 
+        <div>
 
+            我的
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 39 - 0
replay.html
Vedi File

xqd 
@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+<div>
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div style="padding: 0 10px">
 
+        <div style="padding: 20px 0; border-bottom: 1px solid #808080; font-size: 15px">
 
+            <p style="color: #808080">来自<em style="font-size: 16px; color: #666666">Splistinge</em>的回复</p>
 
+            <p style="color: #333333; margin-top: 5px">现在来听，确实伤心啊</p>
 
+        </div>
 
+        <div style="padding: 20px 0; border-bottom: 1px solid #808080; font-size: 15px">
 
+            <p style="color: #808080">来自<em style="font-size: 16px; color: #666666">天使爱上啤酒</em>的回复</p>
 
+            <p style="color: #333333; margin-top: 5px">封面以为这破茧重生，歌词恍惚中是查斯特·贝宁顿已经知道了自己的落幕。有没有感受出来呢？</p>
 
+        </div>
 
+        <div style="padding: 20px 0; border-bottom: 1px solid #808080; font-size: 15px">
 
+            <p style="color: #808080">来自<em style="font-size: 16px; color: #666666">Splistinge</em>的回复</p>
 
+            <p style="color: #333333; margin-top: 5px">前奏听的我整个身体感受恍恍惚惚的，大脑在两耳之间摇动的感觉</p>
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>

+ 86 - 0
show.html
Vedi File

xqd 
@@ -0,0 +1,86 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 
+    <title>edwin欧美音乐疯</title>
 
+    <link rel="stylesheet" href="css/base.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body style="background: #F2F2F2">
 
+<div class="wrapper">
 
+    <div class="top">
 
+        <div class="fl icon">
 
+            &lt;
 
+        </div>
 
+        <div class="fl title" style="text-align: center">
 
+            edwin欧美音乐疯
 
+        </div>
 
+        <div class="fr icon">
 
+            ···
 
+        </div>
 
+    </div>
 
+    <div style="padding: 15px;">
 
+        <div class="fl" style="width: 48%; background: #ffffff; margin-bottom: 15px">
 
+            <img src="imgs/img_ video@2x.png">
 
+            <div style="text-align: center; color: #333333; padding: 30px 0; font-size: 0.9em">
 
+                - 专辑视频 -
 
+            </div>
 
+        </div>
 
+        <div class="fr" style="width: 48%; background: #ffffff; margin-bottom: 15px">
 
+            <img src="imgs/img_article@2x.png">
 
+            <div style="text-align: center; color: #333333; padding: 30px 0; font-size: 0.9em">
 
+                - 精彩文章 -
 
+            </div>
 
+        </div>
 
+        <div class="fl" style="width: 48%; background: #ffffff; margin-bottom: 15px">
 
+            <img src="imgs/img_show@2x.png">
 
+            <div style="text-align: center; color: #333333; padding: 30px 0; font-size: 0.9em">
 
+                - 热门演出 -
 
+            </div>
 
+        </div>
 
+        <div class="fr" style="width: 48%; background: #ffffff; margin-bottom: 15px">
 
+            <img src="imgs/img_picture@2x.png">
 
+            <div style="text-align: center; color: #333333; padding: 30px 0; font-size: 0.9em">
 
+                - 图片 -
 
+            </div>
 
+        </div>
 
+        <div style="clear:both;"></div>
 
+    </div>
 
+</div>
 
+<div class="footer">
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_home_n.svg">
 
+        </div>
 
+        <div>
 
+            主页
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_circle_n.svg" style="width: 40px">
 
+        </div>
 
+        <div>
 
+            圈子
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_show_h.svg">
 
+        </div>
 
+        <div style="color: #32304A">
 
+            看演出
 
+        </div>
 
+    </div>
 
+    <div class="bottom fl">
 
+        <div class="icon">
 
+            <img src="imgs/icon_mine_n.svg" style="width: 28px">
 
+        </div>
 
+        <div>
 
+            我的
 
+        </div>
 
+    </div>
 
+</div>
 
+</body>
 
+</html>