first commit

历届学生/zheng-yuqing/项目练习/上课项目/千千音乐/css/clear.css

@@ -0,0 +1,19 @@
+/* 清楚浏览器默认样式 */
+
+ul,li,p,h1,h2,h3,h4,h5,h6,body {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+li {
+    list-style: none;
+}
+
+input {
+    outline: none;
+    border: none;
+}

历届学生/zheng-yuqing/项目练习/上课项目/千千音乐/css/index.css

@@ -0,0 +1,181 @@
+.header {
+    height: 80px;
+    box-shadow: 0 2px 10px 0 rgb(52 52 52 / 10%);
+    background: #fff;
+}
+.logo {
+    line-height: 80px;
+}
+.logo img {
+    margin-top: 20px;
+    margin-right: 40px;
+}
+.logo ul {}
+
+.logo .active {
+    border-bottom: 1px solid #000;
+}
+.logo .active a{
+    color: #000;
+    font-weight: 600;
+}
+.logo ul li {
+    float: left;
+    margin: 0 13px;
+    height: 79px;
+}
+.logo ul li:hover a {
+    color: #000;
+}
+.logo ul li a {
+    font-size: 16px;
+    color: #909399;
+}
+
+.search {}
+.search_wrap {
+    width: 320px;
+    height: 40px;
+    background: #f8f8f8;
+    margin-top: 20px;
+}
+.search_wrap input {
+    background: #f8f8f8;
+    width: 270px;
+    height: 100%;
+    padding-left: 15px;
+    box-sizing: border-box;
+    float: left;
+
+}
+.search_wrap i {
+    font-size: 30px;
+    color: #333;
+    margin-top: 5px;
+    float: left;
+}
+.login_text {
+    line-height: 80px;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #606266;
+}
+.banner {
+    height: 300px;
+    margin-top: 30px;
+}
+.icon-htmal5icon39,
+.icon-htmal5icon39-copy {
+    width: 65px;
+    height: 65px;
+    text-align: center;
+    line-height: 65px;
+    border-radius: 100%;
+    color: #fff;
+    font-size: 26px;
+    background: #00000030;
+    top: 50%;
+    margin-top: calc(-65px / 2);
+    display: none;
+}
+.icon-htmal5icon39 {
+    left: -80px;
+}
+
+.icon-htmal5icon39-copy {
+    right: -80px;
+}
+.center:hover .iconfont{
+    display: inline-block;
+}
+.l_img,
+.r_img {
+    height: 250px;
+    top: 50%;
+    margin-top: calc(-250px / 2);
+}
+.banner .l_img {
+    left: 0;
+}
+.banner .r_img {
+    right: 0;
+}
+.banner .c_img {
+    left: 50%;
+    margin-left: calc(-750px / 2);
+}
+
+.hot {
+    margin-top: 30px;
+}
+.hot ul {}
+.hot ul li {
+    float: left;
+    padding: 0 30px;
+    background: #f8f8f8;
+    height: 40px;
+    border-radius: 40px;
+    line-height: 40px;
+    margin-right: 10px;
+}
+.hot ul li a {
+    font-size: 14px;
+    color: #606266;
+}
+.more {
+    font-size: 14px;
+    color: #909399;
+    line-height: 40px;
+}
+
+.issue {
+    margin-top: 30px;
+}
+.issue .issue_title {
+    margin-bottom: 30px;
+}
+.issue .issue_title h2 {
+    color: #000;
+    font-size: 28px;
+    line-height: 28px;
+    font-weight: 400;
+}
+
+.issue_list {}
+.issue_list li {
+    width: 20%;
+    float: left;
+}
+.issue_list li .name{
+    font-size: 16px;
+    color: #303133;
+    line-height: 22px;
+    margin-bottom: 6px;
+}
+.issue_list li .text {
+    margin-bottom: 6px;
+}
+.issue_list li .text,
+.issue_list li .time{
+    font-size: 14px;
+    color: #909399;
+}
+
+.issue_list .top_img {
+    height: 192px;
+    position: relative;
+    margin-bottom: 18px;
+}
+
+.top_img .top {
+    width: 192px;
+    height: 192px;
+}
+.top_img .bottom {
+    width: 180px;
+    height: 180px;
+    z-index: -1;
+    top: 50%;
+    margin-top: -90px;
+    right: 22px;
+}

历届学生/zheng-yuqing/项目练习/上课项目/千千音乐/css/public.css

@@ -0,0 +1,26 @@
+/* 公共css */
+.center {
+    width: 1200px;
+    margin: 0 auto;
+    height: 100%;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.auto {
+    overflow: hidden;
+}
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}

历届学生/zheng-yuqing/项目练习/上课项目/千千音乐/index.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>千千音乐</title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3359132_0ieicnv9yoqi.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <div class="header">
+        <div class="center auto">
+            <div class="left logo">
+                <img class="left" src="./img/logo.svg" alt="">
+                <ul class="left">
+                    <li class="active">
+                        <a href="">首页</a>
+                    </li>
+                    <li>
+                        <a href="">歌单</a>
+                    </li>
+                    <li>
+                        <a href="">歌手</a>
+                    </li>
+                    <li>
+                        <a href="">VIP</a>
+                    </li>
+                    <li>
+                        <a href="">音乐盒</a>
+                    </li>
+                    <li>
+                        <a href="">客户端</a>
+                    </li>
+                    <li>
+                        <a href="">音乐人入驻</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="right search">
+                <div class="search_wrap left">
+                    <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
+                    <i class="iconfont icon-sousuo_o"></i>
+                </div>
+                <div class="login_text left">登录/注册</div>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div class="banner">
+            <div class="center relative">
+                <img class="l_img absolute"
+                    src="https://img01.dmhmusic.com/0103/M00/CD/5D/ChR45WJmMTGAAW_PAABdWQPgciI236.jpg" alt="">
+                <img class="r_img absolute"
+                    src="https://img01.dmhmusic.com/0102/M00/D4/5A/ChR45WJmPcWAWJzPAAD2fX_P6qI546.jpg" alt="">
+                <img class="c_img absolute"
+                    src="https://img01.dmhmusic.com/0105/M00/CE/E6/ChR45WJmCOaAUQeAAACKHRK5CEk845.jpg" alt="">
+                <i class="iconfont icon-htmal5icon39 absolute"></i>
+                <i class="iconfont icon-htmal5icon39-copy absolute"></i>
+            </div>
+        </div>
+
+        <div class="hot auto">
+            <div class="center">
+                <ul class="left">
+                    <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>
+
+                <a href="" class="more right">更多</a>
+            </div>
+        </div>
+
+        <div class="issue">
+            <div class="center relative">
+                <i class="iconfont icon-htmal5icon39 absolute"></i>
+                <i class="iconfont icon-htmal5icon39-copy absolute"></i>
+                <div class="issue_title auto">
+                    <h2 class="left">秀动发行</h2>
+                    <div class="more right">更多</div>
+                </div>
+
+                <ul class="issue_list auto">
+                    <li>
+                        <div class="top_img relative">
+                            <img class="top absolute"
+                                src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
+                                alt="">
+                            <img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
+                                alt="">
+                        </div>
+                        <div class="name">沐</div>
+                        <div class="text">杨茂源</div>
+                        <div class="time">发行时间：2022-04-12</div>
+                    </li>
+                    <li>
+                        <div class="top_img relative">
+                            <img class="top absolute"
+                                src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
+                                alt="">
+                            <img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
+                                alt="">
+                        </div>
+                        <div class="name">沐</div>
+                        <div class="text">杨茂源</div>
+                        <div class="time">发行时间：2022-04-12</div>
+                    </li>
+                    <li>
+                        <div class="top_img relative">
+                            <img class="top absolute"
+                                src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
+                                alt="">
+                            <img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
+                                alt="">
+                        </div>
+                        <div class="name">沐</div>
+                        <div class="text">杨茂源</div>
+                        <div class="time">发行时间：2022-04-12</div>
+                    </li>
+                    <li>
+                        <div class="top_img relative">
+                            <img class="top absolute"
+                                src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
+                                alt="">
+                            <img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
+                                alt="">
+                        </div>
+                        <div class="name">沐</div>
+                        <div class="text">杨茂源</div>
+                        <div class="time">发行时间：2022-04-12</div>
+                    </li>
+                    <li>
+                        <div class="top_img relative">
+                            <img class="top absolute"
+                                src="https://img01.dmhmusic.com/0101/M00/BB/F5/ChR45WIl422AeO5ZAApS8y8dWiU266.jpg@w_200,h_200"
+                                alt="">
+                            <img class="bottom absolute" src="https://static1-qianqian.91q.com/client/img/f412d65.png"
+                                alt="">
+                        </div>
+                        <div class="name">沐</div>
+                        <div class="text">杨茂源</div>
+                        <div class="time">发行时间：2022-04-12</div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+    </div>
+    <div class="footer"></div>
+</body>
+
+</html>