first commit

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/css/clear.css

@@ -0,0 +1,8 @@
+body ,ul ,li ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/css/public.css

@@ -0,0 +1,122 @@
+.active{
+    color: #d0302c !important;
+}
+.margin_left{
+    margin-left: 0.23rem;
+}
+.line{
+    width: 100%;
+	height: 0.01rem;
+    background-color: #e5e5e5;
+    margin-bottom: 0.32rem;
+}
+
+.header{
+    width: 100%;
+	height: 1rem;
+	background-color: #000000;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.24rem;
+    padding-right: 0.4rem;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+}
+.header img{
+    height: 0.65rem;
+}
+.header .botton{
+    width: 1.44rem;
+    height: 0.52rem;
+    line-height: 0.52rem;
+	background-color: #d0302c;
+    border-radius: 0.08rem;
+    text-align: center;
+	font-size: 0.24rem;
+	color: #ffffff;
+}
+.top_img{
+    margin-top: 1rem;
+    width: 7.5rem;
+    height: 4.22rem;
+    margin-bottom: 0.49rem;
+}
+.recom_t{
+	font-size: 0.32rem;
+    color: #333333;
+    margin-bottom: 0.37rem;
+}
+
+.infm{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+   }
+   .infm_l{
+       display: flex;
+       align-items: flex-start;
+   }
+   .in_text{
+   
+       font-size: 0.2rem;
+       color: #999999;
+   }
+   .infm .infm_l img{
+       width: 0.7rem;
+       height: 0.7rem;
+       margin-right: 0.18rem;
+   }
+   .name{
+       font-weight: 600;
+       font-size: 0.28rem;
+       color: #333333;
+   }
+   .infm_r{
+       display: flex;
+       align-items: center;
+       padding-right: 0.24rem;
+       box-sizing: border-box;
+   }
+   .infm_r img{
+       width: 0.26rem;
+       height: 0.27rem;
+   }
+   .infm_r p{
+       font-size: 0.24rem;
+       color: #999999;
+   }
+   .comm_con{
+       width: 6.37rem;
+       font-size: 0.28rem;
+       letter-spacing: 0.006rem;
+       color: #333333;
+       padding-right: 0.39rem;
+       box-sizing: border-box;
+       margin-top: 0.38rem;
+       margin-left: 0.9rem;
+       margin-bottom: 0.61rem;
+   }
+   
+
+.footer{
+    width: 7.02rem;
+	height: 0.88rem;
+	border-radius: 0.08rem;
+    border: solid 0.02rem #d0302c;
+    position: fixed;
+    bottom: 0.4rem;
+    margin-left: 50%;
+    left: calc(-7.02rem/2);
+    text-align: center;
+    
+	
+	font-size: 0.28rem;
+	line-height: 0.88rem;
+	color: #d0302c;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/css/video3.css

@@ -0,0 +1,89 @@
+
+.content{
+    font-size: 0;
+    margin-bottom: 1.68rem;
+}
+
+.top_text_title{
+	font-size: 0.36rem;
+	line-height: 0.57rem;
+    color: #333333;
+    padding-right: 0.52rem;
+    box-sizing: border-box;
+}
+.top_text{
+    margin-bottom: 0.51rem;
+}
+.data{
+	font-size: 0.24rem;
+    color: #999999;
+    margin-top: 0.3rem;
+    margin-bottom: 0.25rem;
+}
+.data span{
+    margin-right: 0.1rem;
+}
+.top_text_b{
+    display: flex;
+    justify-content: flex-start;
+}
+.top_text_b li{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 0.24rem;
+    color: #999999;
+    text-align: center;
+}
+.top_text_b li img{
+    width: 0.26rem;
+    height: 0.27rem;
+    margin-right:0.1rem;
+}
+.text_first{
+    padding-right: 0.6rem;
+    box-sizing: border-box;
+} 
+.text_last{
+    flex: 1;
+
+}
+.top_text_b li ul {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+}
+.xiangxia{
+    width: 0.17rem;
+    height: 0.1rem;
+    transform: scale(0.5,0.4);
+}
+.recom{
+    
+    box-sizing: border-box;
+    margin-bottom: 0.4rem;
+}
+
+.recom_con{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    overflow: scroll;
+    
+}
+.recom_con li{
+    flex-shrink: 1;
+   
+	font-size: 0.28rem;
+	color: #333333;
+    margin-right: 0.11rem;
+}
+
+.recom_con li img{
+    width: 2.74rem;
+	height: 1.56rem;
+	border-radius: 0.04rem;
+	opacity: 0.7;
+}
+

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/css/video5.css

@@ -0,0 +1,90 @@
+.top{
+    position: relative;
+}
+.content{
+    position: relative;
+    font-size: 0;
+}
+.top_text{
+	font-size: 0.28rem;
+    padding-right: 0.33rem;
+    color: #ffffff;
+    box-sizing: border-box;
+}
+.top_time{
+	font-size: 0.57rem;
+	color: #ffffff;
+}
+.top_posi{
+    position: absolute;
+    top: 1rem;
+    width: 7.5rem;
+    height: 4.22rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.title{
+	font-size: 0.36rem;
+    color: #333333;
+    font-weight: 600;
+}
+.title_b{
+        font-size: 0.23rem;
+        color: #999999;
+        margin-bottom: 0.49rem;
+}
+.like{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.66rem;
+}
+.like li{
+    display: flex;
+    align-items: center;
+    padding-right: 0.24rem;
+    box-sizing: border-box;
+}
+.like p{
+	font-size: 0.24rem;
+    color: #999999;
+    
+}
+.redzan{
+    width: 0.26rem;
+	height: 0.27rem;
+}
+.xiangxia{
+    width: 0.17rem;
+	height: 0.1rem;
+}
+.date{
+    display: flex;
+    justify-content: space-between;
+	font-size: 0.28rem;
+    color: #333333;
+    margin-bottom: 0.33rem;
+}
+.date li:last-child{
+
+    display: flex;
+    width: 1.5rem;
+	height: 0.56rem;
+	border-radius: 0.08rem;
+    border: solid 0.01rem #1783fe;
+    justify-content: center;
+    align-items: center;
+
+	font-size: 0.24rem;
+    color: #1783fe;
+    margin-right: 0.24rem;
+    
+}
+.date li img{
+    width: 0.24rem;
+    height: 0.26rem;
+    margin-right: 0.1rem;
+}
+.comm{
+    margin-bottom:1.73rem ;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/js/index.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/page/video3.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/video3.css">
+    <script src="../js/index.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <div class="header">
+        <img src="../img/video3_logo.png" alt="">
+        <div class="botton">
+            打开
+        </div>
+    </div>
+    <div class="content">
+        <img src="../img/video3_titleimg.png" alt="" class="top_img">
+        <div class="top_text margin_left">
+            
+                <div class="top_text_title">香港24小时 | 8月25日发生了什么？暴力局面再次升级</div>
+            
+           
+                <p class="data"><span>2019-04-30</span><span>10:45</span></p>
+            
+            <ul class="top_text_b">
+                <li class="text_first">
+                    <img src="../img/video3_xx.png" alt="">
+                    <p>收藏</p>
+                </li>
+                <li class="text_last">
+                    <ul>
+                        <li>
+                            <img src="../img/video3_zan.png" alt="">
+                            <p>12</p>
+                        </li>
+                        <li>
+                            <p>简介</p>
+                            <img src="../img/video3_xiangxia.png" alt="" class="xiangxia">
+                            
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+        <div class="line"></div>
+        <div class="recom margin_left">
+            <p class="recom_t">相关推荐</p>
+            <ul class="recom_con ">
+                <li>
+                    <img src="../img/video3_more.png" alt="">
+                    <p class="active">一生中总要有个夏天
+                        给海岛，我的9天8夜</p>
+                </li>
+                <li>
+                    <img src="../img/video3_more.png" alt="">
+                    <p>一生中总要有个夏天
+                        给海岛，我的9天8夜</p>
+                </li>
+                <li>
+                    <img src="../img/video3_more.png" alt="">
+                    <p>一生中总要有个夏天
+                        给海岛，我的9天8夜</p>
+                </li>
+                <li>
+                    <img src="../img/video3_more.png" alt="">
+                    <p>一生中总要有个夏天
+                        给海岛，我的9天8夜</p>
+                </li>
+            </ul>
+        </div>
+        <div class="line"></div>
+        <div class="comm margin_left">
+            <p class="recom_t">全部评论</p>
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        打开APP查看全部
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习/page/video5.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/video5.css">
+    <script src="../js/index.js"></script>
+    <title>video5</title>
+</head>
+<body>
+    <div class="header">
+            <img src="../img/video3_logo.png" alt="">
+            <div class="botton">
+                打开
+            </div>
+    </div>
+    <div class="content">
+        <div class="top">
+            <img src="../img/videoing.png" alt="" class="top_img">
+            <div class="top_posi">
+                <p class="top_text">距离直播开始还有</p>
+                <p class="top_time">1天:01:32:59</p>
+            </div>
+        </div>
+        <p class="title margin_left">九枚玉和您畅谈陪读生活的酸辣苦涩</p>
+        <p class="title_b margin_left">902873人预约</p>
+        <ul class="like margin_left">
+            <li>
+                <img src="../img/redzan.png" alt="" class="redzan">
+                <p>12</p>
+            </li>
+            <li>
+                <P>简介</P>
+                <img src="../img/video3_xiangxia.png" alt="" class="xiangxia">
+            </li>
+        </ul>
+        <ul class="date margin_left">
+            <li>
+                7月23日下午14:00直播
+            </li>
+            <li>
+                <img src="../img/yuyue.png" alt="">
+                <p>预约</p>
+            </li>
+        </ul>
+        <div class="line"></div>
+        <div class="comm margin_left">
+            <p class="recom_t">全部评论</p>
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+
+            <div class="infm">
+                <ul class="infm_l">
+                    <li>
+                        <img src="../img/video3_touxiang.png" alt="">
+                    </li>
+                    <li>
+                        <p class="name">呆小瓜</p>
+                        <p class="in_text">刚刚</p>
+                    </li>
+                </ul>
+                <div class="infm_r">
+                    <img src="../img/video3_zan.png" alt="">
+                    <p >15</p>
+
+                    
+                </div>
+                
+            </div>
+            <div class="comm_con">
+                这里是评论的文字这里是评论的文字这里是评论
+                的文字这里是评论的文字这里是评论的文字这里
+                是评论的文字这里是评论的文字 
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        打开APP查看全部评论
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/clear.css

@@ -0,0 +1,8 @@
+body ,ul ,li ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/page_2.css

@@ -0,0 +1,121 @@
+.content{
+    font-size: 0;
+    box-sizing: border-box;
+    padding-top: 1.39rem;
+    background-color: #f4f0f1;
+    height: calc(100vh - 1.76rem);
+    overflow-y: scroll;
+}
+.login{
+    display: flex;
+    padding: 0.41rem 0.6rem 0 0.45rem;
+    box-sizing: border-box;
+    align-items: center;
+}
+.login img{
+    width: 1.59rem;
+    height: 1.59rem;
+    margin-right: 0.33rem;
+    margin-bottom: 0.15rem;
+}
+.login_text{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.login_text li:first-child{
+    font-size: 0.37rem;
+	letter-spacing: 0.015rem;
+	color: #010101;
+}
+.login_text .login_title{
+    font-size: 0.37rem;
+	letter-spacing: 0.015rem;
+    color: #939393;
+    margin-bottom: 0.25rem;
+}
+.peoples{
+    display: flex;
+    position: relative;
+}
+.peoples p:first-child{
+    margin-right: 0.79rem;
+}
+.peoples p:first-child::after{
+    content: "";
+    width: 0.02rem;
+    height: 0.38rem;
+    background-color: #939393;
+    position: absolute;
+    top: 0.03rem;
+    left: calc(0.37rem*4 + 0.5rem);
+}
+.login_text li:last-child img{
+    width: 0.22rem;
+	height: 0.35rem;
+}
+.card{
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding-top: 0.5rem;
+    box-sizing: border-box;
+    padding-bottom: 0.45rem;
+}
+.card .bank img{
+    width: 0.52rem;
+    height: 0.35rem;
+    margin-bottom: 0.35rem;
+}
+.card .bank {
+    text-align: center;
+    font-size: 0.37rem;
+	letter-spacing: 0.015rem;
+    color: #939393;
+    position: relative;
+}
+.card li:first-child::after , .card li:nth-child(2)::after{
+    content: "";
+    width: 0.02rem;
+    height: 0.69rem;
+    background-color: #5e5e5e;
+    position: absolute;
+    top: 0.15rem;
+    right: -1.38rem;
+}
+.con_list li{
+    width: 100%;
+    height: 1.49rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f6f7f8;
+    border-bottom: 0.02rem solid #f1f1f1;
+    padding-left: 0.6rem;
+    padding-right:0.5rem;
+    box-sizing: border-box;
+}
+.list_l,.list_r{
+    display: flex;
+    align-items: center;
+}
+.list_l p{
+    margin-left: 0.6rem;
+    font-size: 0.4rem;
+	color: #020202;
+}
+.list_l img{
+    width: 0.56rem;
+	height: 0.49rem;
+}
+.list_r p{
+    margin-right: 0.16rem;
+    font-size: 0.36rem;
+	color: #020202;
+}
+.list_r img{
+    width: 0.22rem;
+	height: 0.35rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/page_3.css

@@ -0,0 +1,152 @@
+.active{
+    border-right: none !important;
+    color:#ff5400 !important;
+}
+.active::before{
+    content: "";
+    width: 0.13rem;
+	height: 100%;
+    background-color: #ed1755;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+.pading_rigth{
+    padding-right: 0.32rem;
+    box-sizing: border-box;
+}
+.content{
+    padding-top: 1.39rem;
+    box-sizing: border-box;
+    height: calc(100vh - 1.49rem);
+    font-size: 0;
+}
+.con_list{
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+}
+.con_list_l{
+    height: 100%;
+    overflow-y: scroll;
+}
+.con_list_l li{
+    font-weight: 500;
+    
+    font-size: 0.393rem;
+    color: #2a2a2a;
+    border-bottom: 0.03rem solid #dddddd;
+    border-right: 0.03rem solid #dddddd;
+    padding: 0.47rem 0.64rem 0.45rem 0.76rem;
+    position: relative;
+}
+.con_list_r{
+    flex: 1;
+    display: flex;
+    padding-left: 0.3rem;
+    box-sizing: border-box;
+    flex-direction: column;
+    overflow-y: scroll;
+    height: 100%;
+    margin-bottom: 1.49rem;
+}
+.con_list_r li{
+    width: 100%;
+    height: 2.66rem;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.38rem;
+    
+}
+.con_list_r li img{
+    width: 2.47rem;
+	height: 1.97rem;
+}
+.list_r_text{
+    flex: 1;
+    padding-left: 0.46rem;
+    box-sizing: border-box;
+}
+.list_r_text p{
+    font-size: 0.426rem;
+	color: #333333;
+}
+.list_r_text .sales p:first-child{
+   
+	font-size: 0.295rem;
+	color: #333333;
+}
+.list_r_text .sales{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 0.28rem;
+    margin-bottom: 0.23rem;
+}
+.list_r_text .sales p:last-child{
+    font-size: 0.295rem;
+	color: #999999;
+}
+.list_r_text .sales p span{
+    font-size: 0.491rem;
+	color: #ff5400;
+}
+.list_r_text .addless{
+    display: flex;
+    justify-content: flex-end;
+}
+.list_r_text .addless p{
+    font-size: 0.491rem;
+    margin: 0 0.31rem;
+	color: #333333;
+}
+.list_r_text .addless img{
+    width: 0.66rem;
+	height: 0.66rem;
+}
+.shoping{
+    width: 100%;
+    height: 1.49rem;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    border-top: 0.03rem solid #ddd;
+    background: #fff;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.shoping .shop_l{
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ flex: 1;
+}
+.shoping .shop_l img{
+    width: 0.77rem;
+    height: 0.73rem;
+    margin-left:0.46rem ;
+    margin-right: 0.36rem;
+}
+.car_n{
+    margin-left: -0.4rem;
+}
+.shoping .shop_l p{
+    font-size: 0.36rem;
+    color: #666666;
+    margin-left: 0.81rem;
+}
+.shoping .shop_l p span{
+    font-size: 0.491rem;
+	color: #ff5400;
+}
+.shop_r{
+    width: 3.15rem;
+	height: 1.49rem;
+    background-color: #ed1755;
+    font-size: 0.491rem;
+    color: #ffffff;
+    text-align: center;
+    line-height: 1.49rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/page_6.css

@@ -0,0 +1,87 @@
+body{
+    background: #f6f7f8;
+}
+.content{
+    margin-top: 1.39rem;
+    font-size: 0;
+}
+.user_p{
+    width: 2.03rem;
+    height: 2.03rem;
+    border-radius: 100%;
+    border: 0.16rem solid #ed175480;
+    margin-left: calc(50vw - 2.4rem/2);
+    margin-top: 0.36rem;
+}
+.btn{
+    width: 100%;
+	height: 1.31rem;
+    background-color: #ec1455;
+    text-align: center;
+    line-height: 1.31rem;
+    font-size: 0.491rem;
+    color: #ffffff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+}
+.input{
+    width: 100%;
+    padding: 0 0.22rem;
+    box-sizing: border-box;
+    margin-top: 0.56rem;
+}
+.input li{
+    margin-top: 0.35rem;
+}
+.input_ctive{
+    background-color: #ed1755 !important;
+    color: #ffffff !important;
+}
+.input_one_t , .input_one_b {
+    font-size: 0.393rem;
+	color: #333333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.input_one_t , .input_one_b {
+    height: 1.32rem;
+    width: 100%;
+    background: #ffffff;
+    border-bottom: 0.01rem solid #f6f7f8;
+    padding-left: 0.35rem;
+    padding-right: 0.31rem;
+    box-sizing: border-box;
+}
+.sex , .cale{
+    width: 2.07rem;
+	height: 0.73rem;
+    border-radius: 0.04rem;
+    border: solid 0.02rem #ed1755;
+    line-height: 0.73rem;
+    font-size: 0.36rem;
+	color: #ed1755;
+}
+.sex span, .cale span{
+    display: inline-block;
+    width: calc(100% / 2);
+    text-align: center;
+}
+.name,.birthday ,.tel,.input_yzm{
+    display: flex;
+    justify-content: space-between;
+}
+.tel,.input_yzm{
+    font-size: 0.393rem;
+	color: #999999;
+}
+.yzm{
+    font-size: 0.426rem;
+	color: #ed1755;
+}
+.input_one_t img, .input_one_b img{
+    width: 0.5rem;
+    height: 0.5rem;
+    margin-right: 0.27rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/page_7.css

@@ -0,0 +1,74 @@
+body{
+    background: #f6f7f8;
+}
+.content{
+    font-size: 0;
+    margin: 1.56rem 0.25rem 0 0.43rem;
+    padding: 0.75rem 1.42rem 1.47rem 0.83rem;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    height: calc(100vh - 3.48rem);
+    display: flex;
+}
+.cont_c{
+    flex: 1;
+}
+.b_title{
+    font-size: 0.678rem;
+    font-weight: bold;
+	letter-spacing: 0.027rem;
+    color: #000000;
+    margin-bottom: 0.78rem;
+}
+.spec{
+    margin-top: 0.49rem;
+}
+.spec span{
+    font-size: 0.38rem;
+    font-weight: bold;
+	letter-spacing: 0.015rem;
+    color: #000000;
+    margin-bottom: 0.4rem;
+    display: inline-block;
+}
+.one{
+    position: relative;
+    text-align: center;
+}
+.teacher{
+    text-align: center;
+    display: flex;
+    justify-content: space-around ;
+}
+.teacher img{
+    width: 0.59rem;
+    height: 0.59rem;
+    border-radius: 100%;
+	border: solid 0.02rem #fffffe;
+    position: absolute;
+    top: 0;
+    left: 1.2rem;
+    display: none;
+}
+.xuanzhon img{
+    display: block !important;
+}
+.t_name{
+    font-size: 0.3rem;
+	font-weight: bold;
+	letter-spacing: 0.012rem;
+	color: #000000;
+}
+.peoples{
+    font-size: 0.27rem;
+	font-weight: bold;
+    color: #696464;
+    transform: scale(0.8);
+}
+.tx{
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: #f1ece8;
+    border-radius: 100%;
+    margin-left: 0.23rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/page_8.css

@@ -0,0 +1,55 @@
+.content{
+    width: 100%;
+    padding: 0 ;
+    font-size: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    text-align: center;
+    position: relative;
+}
+.content li{
+    text-align: center;
+}
+.content li img{
+    width: 0.65rem;
+	height: 0.65rem;
+}
+.one{
+    font-size: 0.38rem;
+	letter-spacing: 0.015rem;
+	color: #6c6c6a;
+}
+.two{
+    font-size: 0.24rem;
+	letter-spacing: 0.01rem;
+	color: #6c6c6a;
+}
+.line{
+    width: 100%;
+    position: absolute;
+    font-size: 0;
+    top: 0.8rem;
+    z-index: -999;
+}
+.line_one{
+    width: 100%;
+    height: 0.02rem;
+	background-color: #f6c7bc;
+}
+.line_two{
+    width: 55%;
+    height: 0.02rem;
+    background-color: #ed1755;
+    position: relative;
+}
+.line_two span{
+    height: 0.06rem;
+    width: 0.06rem;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    top: -0.022rem;
+    background-color: #ed1755;
+    border-radius: 100%;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/css/public.css

@@ -0,0 +1,89 @@
+.number::after{
+    content: "2";
+    width: 0.37rem;
+	height: 0.37rem;
+    background-color: #ff5400;
+    border-radius: 100%;
+    font-size: 0.229rem;
+    color: #ffffff;
+    position: absolute;
+    top: 0.1818rem;
+    text-align: center;
+    line-height: 0.37rem;
+}
+.line{
+    border-bottom: 0.03rem solid #eeeeee;
+}
+
+.header{
+	height: 1.39rem;
+    width: 100vw;
+    position: fixed;
+    top: 0;
+    left: 0;
+    font-size: 0;
+    z-index: 999;
+    background: url('../img/backround_img.png');
+    background-size: cover;
+}
+.header img{
+    height: 1.39rem;
+    width: 100%;
+}
+.header_bon{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    bottom: 0.28rem;
+    width: 100%;
+}
+.header_bon li:first-child img{
+    width: 0.34rem;
+    height: 0.34rem;
+    margin-left: 0.29rem;
+}
+.header_bon li:nth-child(2){
+    font-size: 0.4rem;
+	letter-spacing: 0.016rem;
+    color: #ffffff;
+    font-weight: bold;
+}
+.header_bon li:last-child img{
+    width: 0.32rem;
+	height: 0.32rem;
+	/* box-shadow: 0rem 0.01rem 0.03rem 0rem 
+		rgba(0, 0, 0, 0.3), 
+		inset 0.005rem 0.009rem 0rem 0rem 
+        #ffffff; */
+    margin-right: 0.19rem;
+}
+
+
+.footer{
+    height: 1.76rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 0;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    background: #fff;
+    border-bottom: ;
+}
+.footer_active{
+	color: #fe4a37 !important;
+}
+.footer li img{
+    width: 0.48rem;
+	height: 0.49rem;
+}
+.footer li{
+   text-align: center;
+	font-size: 0.366rem;
+	letter-spacing: 0.022rem;
+	color: #969696;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/js/index.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(1125, 100)
+};
+window.onresize = function () {
+    getRem(1125, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/page/page_2.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/page_2.css">
+    <script src="../js/index.js"></script>
+    <title>page2</title>
+</head>
+<body>
+    <div class="header">
+        
+        <ul class="header_bon">
+            <li>
+                <img src="../img/back_bon.png" alt="">
+            </li>
+            <li>
+                个人中心
+            </li>
+            <li>
+                <img src="../img/home_bon.png" alt="">
+            </li>
+        </ul>
+    </div>
+    <div class="content">
+        <div class="login">
+            <img src="../img/touxiang.png" alt="">
+            <ul class="login_text">
+               <li>
+                   <p class="login_title">点击登录 享受更多特权</p>
+                   <div class="peoples">
+                        <p>关注 0 人</p>
+                        <p>粉丝 0 人</p>
+                   </div>
+               </li>
+               <li>
+                   <img src="../img/jiantou.png" alt="">
+               </li> 
+            </ul>
+        </div>
+        <ul class="card">
+            <li class="bank">
+                <img src="../img/yinhangka.png" alt="">
+                <p>银行卡</p>
+            </li>
+            <li class="bank">
+                <img src="../img/yinhangka.png" alt="">
+                <p>银行卡</p>
+            </li>
+            <li class="bank">
+                <img src="../img/yinhangka.png" alt="">
+                <p>银行卡</p>
+            </li>
+        </ul>
+        <ul class="con_list">
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+            <li>
+                <div class="list_l">
+                    <img src="../img/tishi.png" alt=""> 
+                    <p>我的收藏</p>
+                </div>
+                <div class="list_r">
+                    <p>我的收藏</p>
+                    <img src="../img/jiantou.png" alt="">
+                </div>
+            </li>
+        </ul>
+    </div>
+    <ul class="footer">
+        <li>
+            <img src="../img/shoiuchang.png" alt="">
+            <p>收藏</p>
+        </li>
+        <li>
+            <img src="../img/youhui.png" alt="">
+            <p>优惠</p>
+        </li>
+        <li>
+            <img src="../img/xinxi.png" alt="">
+            <p>信息</p>
+        </li>
+        <li>
+            <img src="../img/kecheng.png" alt="">
+            <p>课程</p>
+        </li>
+        <li class="footer_active">
+            <img src="../img/wode.png" alt="">
+            <p>我的</p>
+        </li>
+    </ul>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/page/page_3.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/page_3.css">
+    <script src="../js/index.js"></script>
+    <title>page3</title>
+
+    <!-- 左右进度条有bug -->
+</head>
+<body>
+    <div class="header">
+        
+        <ul class="header_bon">
+            <li>
+                <img src="../img/back_bon.png" alt="">
+            </li>
+            <li>
+                全部课程
+            </li>
+            <li>
+                <img src="../img/home_bon.png" alt="">
+            </li>
+        </ul>
+    </div>
+    <div class="content">
+        <div class="con_list">
+            <ul class="con_list_l">
+                <li class="active number">已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li class="number">已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li class="number">已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li>已选课程</li>
+                <li class="number">已选课程</li>
+                <li>已选课程</li>
+               
+            </ul>
+            <ul class="con_list_r">
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                <li class="line pading_rigth">
+                    <img src="../img/list_img.png" alt="">
+                    <div class="list_r_text">
+                        <p>名师书法</p>
+                        <div class="sales">
+                            <p>￥<span>2500</span> 元</p>
+                            <p>销量：150份</p>
+                        </div>
+                        <div class="addless">
+                            <img src="../img/jianshao.png" alt="">
+                            <p>2</p>
+                            <img src="../img/zhengjia.png" alt="">
+                        </div>
+                    </div>
+                </li>
+                
+            </ul>
+        </div>
+        <div class="shoping">
+            <div class="shop_l">
+                <img src="../img/gouwuche.png" alt="" >
+                <div class="number car_n"></div>
+                <p>共计：<span>5500</span> 元</p>
+            </div>
+            <div class="shop_r">
+                选好了
+            </div>
+        </div>
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/page/page_6.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/page_6.css">
+    <script src="../js/index.js"></script>
+    <title>page6</title>
+</head>
+<body>
+    <div class="header">
+        
+        <ul class="header_bon">
+            <li>
+                <img src="../img/back_bon.png" alt="">
+            </li>
+            <li>
+                注册认证
+            </li>
+            <li>
+                <img src="../img/home_bon.png" alt="">
+            </li>
+        </ul>
+    </div>
+    <div class="content">
+        <img src="../img/touxiang.png" alt="" class="user_p">
+        <ul class="input">
+            <li>
+                <div class="input_one_t">
+                    <div class="name">
+                        <img src="../img/yonhu.png" alt="">
+                        <p>喵喵喵</p>
+                    </div>
+                    <div class="sex">
+                        <span class="input_ctive">男</span><span>女</span>
+                    </div>
+                </div>
+                <div class="input_one_b">
+                    <div class="birthday">
+                        <img src="../img/yonhu.png" alt="">
+                        <p>2000-12-1</p>
+                    </div>
+                    <div class="cale">
+                        <span class="input_ctive">公历</span><span>农历</span>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="input_one_t">
+                    <div class="tel">
+                        <img src="../img/yonhu.png" alt="">
+                        <p>请输入您的手机号（必填）</p>
+                    </div>
+                    <div class="yzm">
+                        获取验证码
+                    </div>
+                </div>
+                <div class="input_one_b">
+                    <div class="input_yzm">
+                        <img src="../img/yonhu.png" alt="">
+                        <p>请输入验证码（必填）</p>
+                    </div>
+                </div>
+            </li>
+            <li></li>
+        </ul>
+
+        <div class="btn">
+            认证
+        </div>
+    </div>
+
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/page/page_7.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/page_7.css">
+    <script src="../js/index.js"></script>
+    <title>page7</title>
+</head>
+<body>
+    <div class="header">
+        
+        <ul class="header_bon">
+            <li>
+                <img src="../img/back_bon.png" alt="">
+            </li>
+            <li>
+                注册认证
+            </li>
+            <li>
+                <img src="../img/home_bon.png" alt="">
+            </li>
+        </ul>
+    </div>
+    <div class="content">
+        <div class="cont_c">
+           <p class="b_title">名师推荐</p>
+           <ul class="spec_c">
+               <li class="spec">
+                   <span>创意美术</span>
+                   <div class="teacher ">
+                        <div class="one xuanzhon">
+                            <div class="tx"></div>
+                            <p class="t_name">老师甲</p>
+                            <p class="peoples">粉丝：9920</p>
+                            <img src="../img/true.png" alt="">
+                        </div>
+                        <div class="one">
+                            <div class="tx"></div>
+                            <p class="t_name">老师甲</p>
+                            <p class="peoples">粉丝：9920</p>
+                            <img src="../img/true.png" alt="">
+                        </div>
+                        <div class="one">
+                            <div class="tx"></div>
+                            <p class="t_name">老师甲</p>
+                            <p class="peoples">粉丝：9920</p>
+                            <img src="../img/true.png" alt="">
+                        </div>
+                   </div>
+               </li>
+               <li class="spec">
+                <span>创意美术</span>
+                <div class="teacher ">
+                     <div class="one xuanzhon">
+                         <div class="tx"></div>
+                         <p class="t_name">老师甲</p>
+                         <p class="peoples">粉丝：9920</p>
+                         <img src="../img/true.png" alt="">
+                     </div>
+                     <div class="one xuanzhon">
+                         <div class="tx"></div>
+                         <p class="t_name">老师甲</p>
+                         <p class="peoples">粉丝：9920</p>
+                         <img src="../img/true.png" alt="">
+                     </div>
+                     <div class="one ">
+                         <div class="tx"></div>
+                         <p class="t_name">老师甲</p>
+                         <p class="peoples">粉丝：9920</p>
+                         <img src="../img/true.png" alt="">
+                     </div>
+                </div>
+            </li>
+            <li class="spec">
+                <span>创意美术</span>
+                <div class="teacher ">
+                     <div class="one xuanzhon">
+                         <div class="tx"></div>
+                         <p class="t_name">老师甲</p>
+                         <p class="peoples">粉丝：9920</p>
+                         <img src="../img/true.png" alt="">
+                     </div>
+                     <div class="one">
+                         <div class="tx"></div>
+                         <p class="t_name">老师甲</p>
+                         <p class="peoples">粉丝：9920</p>
+                         <img src="../img/true.png" alt="">
+                     </div>
+                     <div class="one xuanzhon">
+                         <div class="tx"></div>
+                         <p class="t_name">老师甲</p>
+                         <p class="peoples">粉丝：9920</p>
+                         <img src="../img/true.png" alt="">
+                     </div>
+                </div>
+            </li>
+           </ul>
+        </div>
+    </div>
+    <ul class="footer">
+        <li>
+            <img src="../img/shoiuchang.png" alt="">
+            <p>收藏</p>
+        </li>
+        <li>
+            <img src="../img/youhui.png" alt="">
+            <p>优惠</p>
+        </li>
+        <li>
+            <img src="../img/xinxi.png" alt="">
+            <p>信息</p>
+        </li>
+        <li>
+            <img src="../img/kecheng.png" alt="">
+            <p>课程</p>
+        </li>
+        <li class="footer_active">
+            <img src="../img/wode.png" alt="">
+            <p>我的</p>
+        </li>
+    </ul>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI切图练习_12.16/page/page_8.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/page_8.css">
+    <script src="../js/index.js"></script>
+    <title>page8</title>
+</head>
+<body>
+    <ul class="content">
+        <li>
+            <p class="one">普通</p>
+            <img src="../img/paizi.png" alt="">
+            <p class="two">1000</p>
+        </li>
+        <li>
+            <p class="one">普通</p>
+            <img src="../img/paizi.png" alt="">
+            <p class="two">1000</p>
+        </li>
+        <li>
+            <p class="one">普通</p>
+            <img src="../img/paizi.png" alt="">
+            <p class="two">1000</p>
+        </li>
+        <li>
+            <p class="one">普通</p>
+            <img src="../img/paizi.png" alt="">
+            <p class="two">1000</p>
+        </li>
+        <li>
+            <p class="one">普通</p>
+            <img src="../img/paizi.png" alt="">
+            <p class="two">1000</p>
+        </li>
+    </ul>
+    <div class="line">
+        <div class="line_one">
+            <div class="line_two">
+                <span>.</span>
+            </div>
+        </div>
+        
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/clear.css

@@ -0,0 +1,8 @@
+body ,ul ,li ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/five.css

@@ -0,0 +1,192 @@
+body{
+    background: #f1f1f1;
+}
+header{
+    width: 100%;
+    height: 0.96rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.4rem;
+    box-sizing: border-box;
+    background: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+}
+header i{
+    color: #333333;
+}
+header .header_bon{
+    display: flex;
+    height: 0.64rem;
+	background-color: #ffffff;
+	border-radius: 0.32rem;
+    border: solid 0.02rem #eceef4;
+    align-items: center;
+    overflow: hidden;
+}
+.bon_active{
+    background-color: #eceef4;
+}
+header .header_bon li{
+    padding: 0.19rem 0.18rem;
+    font-size: 0.28rem;
+	color: #333333;
+}
+.line{
+    border: 0.02rem solid  #eceef4;
+    border-top: none !important;
+    border-bottom: none !important;
+}
+header p{
+    font-size: 0.28rem;
+	color: #404040;
+}
+input::-webkit-input-placeholder{
+    text-align: center;
+}
+.search{
+    position: relative;
+    padding:0.2rem 0.24rem;
+    font-size: 0;
+}
+.search i{
+    position: absolute;
+    top: 0.42rem;
+    left: 3.18rem;
+    font-size: 0.28rem;
+    color: rgb(117, 117, 117);
+
+}
+input{
+    outline: none;
+    border: none;
+    width: 100%;
+    height: 0.68rem;
+	background-color: #ffffff;
+	border-radius: 0.05rem;
+    border: solid 0.02rem #cdcdcd;
+    
+}
+.content{
+    margin-bottom: 0.8rem;
+}
+
+.shop{
+    
+}
+.shop_top{
+    display: flex;
+    align-items: center;
+    height: 0.9rem;
+    margin-bottom: 0.02rem;
+    background: #fff;
+}
+.shop_top li{
+    justify-content: center;
+    width: 50%;
+    display: flex;
+    position: relative;
+}
+.st_line::before{
+    content: "";
+    width: 0.01rem;
+    height: 0.53rem;
+    background-color: #bababa;
+    position: absolute ;
+    top: 0;
+    right: 0;
+}
+.shop_top li p{
+    font-size: 0.28rem;
+    color: #404040;
+    margin-right: 0.54rem;
+}
+.shop_top li i{
+    color: #dadada;
+}
+.shop_bot{}
+.shop_bot li{
+    position: relative;
+    padding-left: 0.66rem;
+    box-sizing: border-box;
+    height: 2.25rem;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    margin-bottom: 0.1rem;
+}
+.shop_bot li img:first-child{
+    width: 0.36rem;
+    height: 0.36rem;
+    position: absolute;
+    top: 0.96rem;
+    left: 0.26rem;
+}
+.shop_bot li img:nth-child(2){
+    width: 1.83rem;
+    height: 1.83rem;
+    margin-right: 0.23rem;
+}
+.shop_bot_text p:first-child{
+    font-size: 0.28rem;
+    color: #343434;
+    margin-bottom: 0.6rem;
+}
+.shop_bot_text p:nth-child(2){
+    font-size: 0.28rem;
+    color: #343434;
+    margin-bottom: 0.25rem;
+}
+.shop_bot_text p:last-child{
+    font-size: 0.24rem;
+	color: #898989;
+}
+.shop_bot_text p:last-child span{}
+.shop_bot_text p:last-child i{
+    color: #898989;
+    font-size: 0.08rem;
+    display: inline-block;
+    transform: scale(0.7);
+}
+.count{
+    width: 7.5rem;
+    height: 0.92rem;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.25rem;
+    box-sizing: border-box;
+
+}
+.count_bon{
+    font-size: 0.28rem;
+    letter-spacing: 0.006rem;
+    color: #333333;
+    display: flex;
+}
+.count_bon span{
+    width: 0.36rem;
+	height: 0.36rem;
+    border: solid 0.02rem #9da2b7;
+    border-radius: 100%;
+    display: inline-block;
+    margin-right: 0.11rem;
+}
+.count p{
+    font-size: 0.28rem;
+	letter-spacing: 0.006rem;
+	color: #ffffff;
+    width: 1.92rem;
+    height: 0.66rem;
+    text-align: center;
+    line-height: 0.66rem;
+	background-color: #3d98fb;
+	border-radius: 0.33rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/four.css

@@ -0,0 +1,215 @@
+.header{
+    height: 1.32rem;
+    display: flex;
+    font-size: 0;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.24rem;
+    box-sizing: border-box;
+}
+.header li{
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+.header li:first-child img{
+    width: 0.48rem;
+    height: 0.48rem;
+    border-radius: 0.1rem;
+    margin-left: 0.2rem;
+}
+.header li:nth-child(2){
+    font-size: 0.28rem;
+	color: #000000;
+}
+.header li:nth-child(2) span{
+	font-size: 0.2rem;
+	line-height: 0.32rem;
+    color: #ffffff;
+    text-align: center;
+    width: 0.78rem;
+	height: 0.32rem;
+	background-color: #3b75e2;
+    border-radius: 0.05rem;
+    margin-left: 0.12rem;
+}
+.header li:last-child p{
+    width: 0.25rem;
+    height: 0.25rem;
+    background-color: #ea4e3d;
+    border-radius: 100%;
+    text-align: center;
+    line-height: 0.25rem;
+    font-size: 0.2rem;
+    color: #ffffff;
+    position: absolute;
+    top: -0.1rem;
+    left: 0.24rem;
+}
+.icon-toright{
+    font-size: 0.44rem;
+    color: #565656;
+}
+.icon-xinxi,.icon-shezhi{
+    font-size: 0.36rem;
+    color: #565656;
+}
+.icon-xinxi{
+    margin-right: 0.2rem;
+}
+.content{
+    padding: 0 0.24rem;
+    font-size: 0;
+    box-sizing: border-box;
+    margin-bottom: 0.5rem;
+}
+.fans{
+    height: 1.8rem;
+    background: url('../img/图层1.png');
+    background-size: cover;
+    border-radius: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.fans li{
+    text-align: center;
+}
+.fans li p:first-child{
+    font-size: 0.34rem;
+    color: #ffffff;
+    margin-bottom: 0.2rem;
+}
+.fans li p:last-child{
+    font-size: 0.24rem;
+	color: #ffffff;
+}
+.live{
+    height: 0.78rem;
+    background: #fff;
+    margin-top: 0.24rem;
+    border-radius: 0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.live .live_left{
+    display: flex;
+}
+.live .live_left p{
+    font-size: 0.32rem;
+	color: #1a1a1a;
+}
+.live .live_left i{
+    color: #0080f1;
+    font-size: 0.38rem;
+    margin-left: 0.19rem;
+    margin-right: 0.09rem;
+}
+.live .live_right{
+    display: flex;
+}
+.live .live_right p{
+    font-size: 0.28rem;
+	color: #0079f1;
+}
+.live .live_right i{
+    color: #0080f1;
+    margin-right: 0.17rem;
+    margin-left: 0.09rem;
+}
+.auth{
+    height: 2.75rem;
+    background-color: #ffffff;
+    border-radius: 0.2rem;
+    margin-top: 0.24rem;
+    padding-top: 0.34rem;
+    box-sizing: border-box;
+    
+}
+.title{
+    font-size: 0.3rem;
+	letter-spacing: 0.015rem;
+    color: #010101;
+    margin-left: 0.34rem;
+    font-weight: 700;
+}
+.auth_bot{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.auth_bot li{
+    text-align: center;
+    margin-top: 0.37rem;
+}
+.auth_bot li i{
+    color: #448eee;
+    font-size: 0.56rem;
+}
+.auth_bot li p{
+    font-size: 0.3rem;
+	letter-spacing: 0.015rem;
+	color: #010101;
+}
+.auth_bot li span{
+    font-size: 0.22rem;
+	color: #e93323;
+}
+.auth_active{
+    color: #abb1bc !important;
+}
+
+.manage{
+    height: 4.02rem;
+    margin-top: 0.24rem;
+	background-color: #ffffff;
+    border-radius: 0.2rem;
+    padding-top: 0.36rem;
+    box-sizing: border-box;
+}
+.manage ul{
+    display: flex;
+    flex-wrap: wrap;
+}
+.manage ul li{
+    width: 20%;
+    text-align: center;
+    margin-top: 0.4rem;
+}
+.manage ul li i{
+    color: #f5c044;
+    font-size: 0.6rem;
+} 
+.manage ul li p{
+    font-size: 0.24rem;
+	color: #333333;
+}
+
+.mark{
+    height: 2.51rem;
+	background-color: #ffffff;
+    border-radius: 0.2rem;
+    padding-top: 0.34rem;
+    box-sizing: border-box;
+    margin-top: 0.24rem;
+}
+.mark .mark_bot{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 0.5rem;
+}
+.mark .mark_bot li{
+    text-align: center;
+}
+.mark .mark_bot li i{
+    color: #e93323;
+    font-size: 0.6rem;
+    margin-bottom: 0.3rem;
+}
+.mark .mark_bot li p{
+    font-size: 0.24rem;
+    color: #333333;
+    margin-top: 0.2rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/one.css

@@ -0,0 +1,237 @@
+body{
+    background: #f0f0f0;
+}
+.header{ 
+    width: 100%;
+    height: 0.98rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding-left: 0.3rem;
+    box-sizing: border-box;
+}
+.header i{
+    font-size: 0.34rem;
+    color: #000000;
+}
+.header p{
+
+    margin-left: 2.78rem;
+    font-size: 0.34rem;
+    color: #333333;
+}
+.logi{
+    height: 2.32rem;
+    width: 100%;
+    background: url('../img/-e-图层2.png');
+    background-size: cover;
+    padding-top: 0.67rem;
+    box-sizing: border-box;
+    margin-bottom: 0.24rem;
+    text-align: center;
+}
+.logi p{
+    font-size: 0.42rem;
+	color: #ffffff;
+}
+.lw_adr{
+    font-size: 0;
+    background: #fff;
+    padding-right: 0.8rem;
+    box-sizing: border-box
+}
+.lw_adr li:first-child{
+    height: 2.09rem;
+    display: flex;
+}
+.lw_l{
+    color: #8d959e;
+    font-size: 0.36rem;
+    padding:  0 0.27rem;
+    display: flex;
+    align-items: center;
+}
+.lw_r{
+    display: flex;
+    flex-direction: column;
+    border-bottom: 0.02rem solid #cecece;
+    flex: 1;
+    font-size: 0.28rem;
+    color: #393939;
+    justify-content: center;
+}
+.lw_r p:nth-child(2){
+    margin: 0.2rem 0;
+}
+.lw_adr li:last-child{
+    height: 1.45rem;
+    display: flex;
+}
+.lw_r span{
+    padding-right:0.1rem;
+}
+.adr_l{
+    color: #8d959e;
+    font-size: 0.36rem;
+    padding: 0 0.22rem;
+    display: flex;
+    align-items: center;
+}
+.adr_l i{
+    font-size: 0.4rem;
+}
+.adr_r{
+    box-sizing: border-box;
+    padding-top: 0.41rem;
+    font-size: 0.24rem;
+    color: #393939;
+}
+.adr_r h4{
+    margin-bottom: 0.15rem;
+}
+.shop{
+    margin-top: 0.19rem;
+    background: #fff;
+    
+}
+.shop_top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 0.28rem;
+}
+.s_t_l {
+    font-size: 0.34rem;
+    color: #080808;
+    display: flex;
+    align-items: center;
+}
+.s_t_l img{
+    width: 0.58rem;
+    height: 0.58rem;
+    margin: 0.19rem;
+    margin-left: 0 !important;
+}
+.s_t_r{
+    display: flex;
+    font-size: 0.24rem;
+    color: #0084f1;
+    align-items: center;
+}
+.s_t_r li{
+    width: 1.2rem;
+    height: 0.48rem;
+    border-radius: 0.24rem;
+    border: solid 0.02rem #0084f1;
+    text-align: center;
+    line-height: 0.48rem;
+    margin-right: 0.3rem;
+}
+.shop_bot{
+    display: flex;
+    margin-top: 0.25rem;
+    padding-right: 0.25rem;
+    /* box-sizing: border-box; */
+    padding-bottom: 0.2rem;
+    padding-left: 0.28rem;
+    border-bottom: 0.01rem solid #eaeaea;
+}
+.shop_bot img{
+    width: 1.52rem;
+    height: 1.52rem;
+    border-radius: 0.1rem;
+}
+.s_b_r{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-left: 0.28rem;
+}
+.s_b_r .s_b_r_t{
+    display: flex;
+    justify-content: space-between;
+}
+.s_b_r .s_b_r_b{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.2rem;
+}
+.s_b_r_t p{
+    font-size: 0.24rem;
+	color: #333333;
+}
+.s_b_r_t span{
+    font-size: 0.28rem;
+    color: #333333;
+    margin-left: 0.5rem;
+}
+.s_b_r_b p span, .s_b_r_b p {
+    font-size: 0.24rem;
+	color: #979797;
+}
+.s_b_r_b span{
+    font-size: 0.28rem;
+	color: #333333;
+}
+.count{
+    font-size: 0.24rem;
+    color: #333333;
+    text-align: end;
+    padding: 0.22rem 0.35rem 0.36rem 0;
+}
+.count span{
+    font-size: 0.24rem;
+	color: #ff0b00;
+}
+.xx{
+    margin-top: 0.2rem;
+    background-color: #fff;
+    padding: 0.45rem 0.25rem;
+}
+.xx li{
+    font-size: 0.3rem;
+    color: #666666;
+    margin-bottom: 0.3rem;
+}
+.xx li p span{
+    font-size: 0.3rem !important;
+    color: #333333 !important;
+    border: none !important;
+}
+.ddh{
+    display: flex;
+    justify-content: space-between;
+}
+.xx .ddh span:last-child{
+    display: inline-block;
+    font-size: 0.24rem;
+    color: #333333;
+    width: 1.04rem;
+	height: 0.43rem;
+	border-radius: 0.02rem;
+    border: solid 0.01rem #d5d5d5;
+    text-align: center;
+    line-height: 0.43rem;
+}
+.bz{
+    display: flex;
+    justify-content: space-between;
+}
+.xx .bz span:last-child i{
+    font-size: 0.34rem;
+    color: #979797;
+}
+.botton{
+    
+}
+.botton p{
+    font-size: 0.34rem;
+    color: #ffffff;
+    width: 6.5rem;
+	height: 0.8rem;
+	background-color: #5697f4;
+    border-radius: 0.4rem;
+    margin: 0.41rem auto;
+    text-align: center;
+    line-height: 0.8rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/public.css

@@ -0,0 +1,3 @@
+body{
+    background: #f2f2f6;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/seven.css

@@ -0,0 +1,224 @@
+.header{
+    width: 100%;
+    padding-left: 0.42rem;
+    padding-right: 0.36rem;
+    box-sizing: border-box;
+    background: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.header i{}
+.icon-fangdajing-copy{
+    position: absolute;
+    top: 0.3rem;
+    /* transform: translatex(-50%); */
+    left: 1.26rem;
+    font-size: 0.28rem;
+}
+
+.header input{
+    margin-top: 0.14rem;
+    margin-bottom: 0.14rem;
+    width: 5.66rem;
+	height: 0.6rem;
+	background-color: #f2f2f2;
+    border-radius: 0.3rem;
+    outline: none;
+    border: none;
+    padding-left: 0.15rem;
+    box-sizing: border-box;
+}
+input::-webkit-input-placeholder{
+    font-size: 0.28rem !important;
+    padding-left: 0.6rem;
+}
+.content{
+    font-size: 0;
+    padding-top: 0.86rem;
+    margin-bottom: 6.64rem;
+}
+.content .big_img{
+    height: 7.5rem;
+}
+.content .price_name{
+    height: 1.58rem;
+    background-color: #ffffff;
+    margin-bottom: 0.08rem;
+    padding-top:0.33rem ;
+    padding-left: 0.3rem;
+    box-sizing: border-box;
+}
+.price{
+    font-size: 0.24rem;
+    letter-spacing: 0.005rem;
+    color: #ea4e3d;
+    margin-bottom: 0.15rem;
+}
+.price span{
+    font-size: 0.34rem;
+	letter-spacing: 0.007rem;
+}
+.price del{
+    color: #737373;
+}
+.content .price_name .name{
+    font-size: 0.24rem;
+	letter-spacing: 0.005rem;
+	color: #1b1b1b;
+}
+.config{
+    padding-left: 0.37rem;
+    padding-right: 0.4rem;
+    box-sizing: border-box;
+    background-color: #ffffff;
+}
+.config li{
+    border-bottom: 0.01rem solid #ebeaea;
+    /* opacity: 0.5; */
+    height: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.config li p{
+    font-size: 0.24rem;
+	letter-spacing: 0.005rem;
+	color: #000000;
+}
+.config li p span{
+    font-size: 0.2rem;
+	letter-spacing: 0.004rem;
+}
+.config li i{}
+.config .quan{}
+.config .quan p{
+    font-size: 0.24rem;
+	letter-spacing: 0.005rem;
+	color: #737373;
+}
+.config .quan p span{
+    
+    height: 0.28rem;
+    text-align: center;
+    line-height: 0.28rem;
+    /* opacity: 0.05; */
+    font-size: 0.2rem;
+    color: #ff7f00;
+    background: #ff850b42;
+    display: inline-block;
+    margin-left: 0.23rem;
+}
+.config .quan p span:first-child{
+    margin-left: 0.19rem !important;
+}
+
+.masking{
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: #000000;
+    opacity: 0.4; 
+}
+.popup{
+    width: 100%;
+    height: 6.72rem;
+	background-color: #ffffff;
+    border-radius: 0.2rem 0.2rem 0rem 0rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+}
+.popup_top{
+    display: flex;
+    padding-top: 0.46rem;
+    padding-left: 0.65rem;
+}
+.popup_top img{
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 0.17rem;
+}
+.top_r p{
+    font-size: 0.2rem;
+	letter-spacing: 0.004rem;
+	color: #aaaaaa;}
+.popup_top .price{}
+.popup_bot{}
+.popup_bot li{
+    height: 0.78rem;
+    padding-left: 0.65rem;
+    margin-top: 0.38rem;
+}
+.popup_bot li p{
+    font-size: 0.3rem;
+	letter-spacing: 0.005rem;
+    color: #1b1b1b;
+    margin-bottom: 0.15rem;
+}
+.popup_bot li span{
+	height: 0.35rem;
+	background-color: #f5f5f5;
+	border-radius: 0.175rem;
+    font-size: 0.2rem;
+    text-align: center;
+    line-height: 0.35rem;
+	letter-spacing: 0.004rem;
+    color: #1b1b1b;
+    display: inline-block;
+    padding: 0 0.2rem;
+    margin-right: 0.15rem;
+}
+.popup_active{
+    color: #5697f4 !important;
+}
+.popup_bot li:last-child{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 1rem;
+    box-sizing: border-box;
+}
+.popup_bot li .num{}
+.popup_bot li .num span{
+    width: 0.36rem;
+    height: 0.34rem;
+    text-align: center;
+    line-height: 0.34rem;
+    border: 0.01rem solid #aaaaaa;
+    color: #aaaaaa;
+    opacity: 0.9;
+    display: inline-block;
+    border-radius: 0;
+    padding: 0 !important;
+   margin-right: 0 !important;
+}
+.num .shuzi{
+    font-size: 0.2rem;
+	letter-spacing: 0.004rem;
+    color: #1b1b1b !important;
+    border-left: none !important;
+    border-right: none !important;
+}
+.top_r{
+    padding-top: 0.2rem;
+    box-sizing: border-box;
+}
+.qd{
+    font-size: 0.28rem;
+    letter-spacing: 0.006rem;
+    color: #ffffff;
+    width: 6.9rem;
+    height: 0.82rem;
+    text-align: center;
+    line-height: 0.82rem;
+    background-color: #5697f4;
+    border-radius: 0.41rem;
+    margin: 0 .3rem;
+    margin-top: 0.24rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/six.css

@@ -0,0 +1,157 @@
+
+.header_bg{
+    font-size: 0;
+    height: 2.96rem;
+    background: url(../img/header_bg.png);
+    background-size: cover;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+}
+.padding_24{
+    padding-left:0.24rem ;
+    padding-right: 0.24rem;
+}
+.header{
+    height: 1.17rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.header span{
+    color: #fff;
+    font-size: 0.28rem;
+}
+.header i{
+    color: #fff;
+}
+.content{
+    margin-top: 5.38rem;
+}
+.content .nav{
+    display: flex;
+    height: 0.92rem;
+    width: 7.02rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.38rem;
+    box-sizing: border-box;
+    margin-bottom: 0.32rem;
+    position: fixed;
+    top: 1.16rem;
+    left: 50%;
+    /* background: red; */
+    transform: translate(-50%); 
+    z-index: 2;
+}
+.content .nav li{
+    font-size: 0.34rem;
+    letter-spacing: 0.01rem;
+    color: #ffffff;
+    position: relative;
+    height: 100%;
+    line-height: 0.92rem;
+}
+.nav_active::before{
+    content: "";
+    width: 0.34rem;
+    height: 0.04rem;
+    background-color: #ffffff;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+}
+.wait{
+    height: 2.7rem;
+    width: 7.02rem;
+    background-color: #ffffff;
+    border-radius: 0.15rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 2.4rem;
+    left: 50%;
+    transform: translate(-50%);
+    z-index: 3;
+}
+.wait p:first-child{
+    font-size: 0.58rem;
+    color: #383838;
+    margin-bottom: 0.1rem;
+}
+.wait p:last-child{
+    font-size: 0.28rem;
+	color: #939393;
+}
+
+
+.list{
+    font-size: 0;
+}
+.list_border{
+    border-bottom: 0.01rem solid #f4f4f7;
+}
+.list .item{
+    background-color: #ffffff;
+    border-radius: 0.15rem;
+    padding: 0 0.04rem;
+    box-sizing: border-box;
+    margin-bottom: 0.21rem;
+}
+.list .item li{
+   
+    padding-left:0.33rem ;
+    padding-right: 0.26rem;
+    box-sizing: border-box;
+}
+.item .count{
+    height: 1.03rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.item .count p:first-child{
+    font-size: 0.26rem;
+	letter-spacing: 0.008rem;
+	color: #989898;
+}
+.item .count p:last-child{
+    font-size: 0.26rem;
+	letter-spacing: 0.008rem;
+	color: #989898;
+}
+.item .details{
+    height: 1.4rem;
+}
+.item .details p{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.item .details p:first-child{
+    margin-top: 0.33rem;
+    margin-bottom: 0.26rem;
+}
+.item .details p:first-child span{
+    font-size: 0.3rem;
+	letter-spacing: 0.009rem;
+	color: #333333;
+}
+.item .details .price{
+    font-size: 0.38rem !important;
+	letter-spacing: 0.011rem !important;
+}
+.item .details p:last-child span{
+    font-size: 0.24rem;
+	letter-spacing: 0.007rem;
+	color: #989898;
+}
+.item .details .state{
+    color: #4e8fec !important;
+    margin-right: 0.17rem;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/three.css

@@ -0,0 +1,192 @@
+body{
+    background: #fff !important;
+}
+header{
+    width: 100%;
+    height: 0.84rem;
+    font-size: 0;
+    /* margin-bottom: 0.02rem; */
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+    box-sizing: border-box;
+    border-bottom: 0.02rem solid #e3e3e3;
+}
+header i{
+    color: #000000;
+}
+header p:nth-child(2){
+    font-size: 0.34rem;
+	color: #333333;
+}
+header p:last-child{
+    font-size: 0.28rem;
+	color: #347ef4;
+}
+.content{
+    width: 100%;
+    font-size: 0;
+    background: #fff;
+    display: flex;
+    margin-bottom: 1rem;
+}
+.content .content_left{
+    position: relative;
+    height: 100%;
+}
+.content .content_left img{
+    width: 0.8rem;
+    height: 0.8rem;
+    margin: 0.24rem;
+    margin-bottom: 0 !important;
+}
+.content .content_left p{
+    font-size: 0.2rem;
+    color: #fd4a75;
+    width: 0.68rem;
+    height: 0.24rem;
+    background-color: #ffe0e8;
+    border-radius: 0.03rem;
+    border: solid 0.01rem #fd4a75;
+    text-align: center;
+    line-height: 0.24rem;
+    position: absolute;
+    top: 0.9rem;
+    left: 50%;
+    transform: translate(-50%);
+}
+.content_right{
+    flex: 1;
+
+}
+.right_top{
+    width: 100%;
+    padding-top: 0.24rem;
+    box-sizing: border-box;
+    position: relative;
+}
+.right_top h3{
+    font-size: 0.28rem;
+	color: #333333;
+}
+.right_top p:nth-child(2){
+    font-size: 0.24rem;
+    color: #979da7;
+    margin-top: 0.2rem;
+}
+.right_top p:nth-child(3){
+    font-size: 0.28rem;
+	letter-spacing: 0.008rem;
+    color: #292929;
+    margin-top: 0.18rem;
+}
+.right_top .pp{
+    width: 4.5rem;
+	height: 4.5rem;;
+}
+.icon-bofang{
+    font-size: 0.24rem;
+    color: #fff;
+    position: absolute;
+    top: 3.56rem;
+    left: 1.88rem;
+    /* transform: translate(-50%); */
+    width: 0.6rem;
+    height: 0.6rem;
+    text-align: center;
+    line-height: 0.6rem;
+    border-radius: 100%;
+    background: #45444485;
+    border: 0.02rem solid;
+}
+.price_img{
+    font-size: 0.24rem;
+    color: #ffffff;
+    position: absolute;
+    top: 5.74rem;
+    right: 1.92rem;
+    font-weight: 500;
+}   
+.addrtime_love{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.addrtime{
+    margin-top: 0.19rem;
+}
+.addrtime p:first-child{
+    font-size: 0.24rem;
+	letter-spacing: 0.007rem;
+	color: #5a6f92;
+}
+.addrtime p:last-child{
+    font-size: 0.24rem;
+    color: #797979;
+    margin-top: 0.09rem;
+}
+.love{
+    display: flex;
+    align-items: center;
+    margin-right: 0.42rem;
+
+}
+.icon-xinaixin, .icon-liaotian{
+    color: #5c6572;
+}
+.icon-xinaixin{
+    font-size: 0.34rem;
+    margin-right: 0.36rem;
+}
+.icon-liaotian{
+    font-size: 0.52rem;
+}
+.right_bot{
+    background: #f7f7ff;
+    margin-right: 0.24rem;
+}
+.comment_top{
+    height: 0.85rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 0.01rem solid #dedede;
+    border-radius: 0.1rem;
+}
+.comment_top p:first-child{
+    font-size: 0.28rem;
+	color: #5a6f92;
+}
+.comment_top p:last-child{
+    font-size: 0.24rem;
+    color: #5a6f92;
+    margin-right: 0.17rem;
+}
+.comment_bot{
+    display: flex;
+}
+.comment_bot ul li{
+    display: flex;
+    margin-top: 0.1rem;
+    margin-bottom: 0.28rem;
+}
+.comment_bot ul li img{
+    width: 0.7rem;
+    height: 0.7rem;
+    margin-right: 0.24rem;
+}
+.comment_bot ul li .comment_cont h6{
+    font-size: 0.24rem;
+	color: #666666;
+}
+.comment_bot ul li .comment_cont p{
+    font-size: 0.3rem;
+	color: #0e0e0e;
+}
+.comment_cont{
+    padding-right: 0.71rem;
+    box-sizing: border-box;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/css/two.css

@@ -0,0 +1,143 @@
+
+.header{
+    background: #fff;
+    height: 0.94rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+.icon-toright{
+    font-size: 0.36rem;
+    font-weight: 500;
+    color: #000000;
+    margin-left: 0.21rem;
+    margin-right: 0.25rem;
+}
+.header input{
+    width: 6.31rem;
+    height: 0.6rem;
+    border-radius: 0.3rem;
+    border: none !important;
+    outline: none;
+    background-color: #f2f2f2;
+    padding-left: 0.2rem;
+    box-sizing: border-box;
+}
+input::-webkit-input-placeholder{
+    padding-left: 0.35rem !important;
+    font-size: 0.28rem;line-height: 0.6rem;
+}
+.icon-fangdajing-copy{
+    position: absolute;
+    left: 1.04rem;
+    font-size: 0.28rem;
+    top: 0.3rem;
+}
+.nav{
+    width: 100%;
+    height: 0.94rem;
+    display: flex;
+    justify-content: space-between;
+    overflow: scroll;
+    white-space: nowrap;
+
+	background-color: #ffffff;
+    border-radius: 0rem 0rem 0.1rem 0.1rem;
+    padding-left: 0.36rem;
+    box-sizing: border-box;
+    
+    margin-bottom: 0.12rem;
+}
+.nav li{
+    position: relative;
+    font-size: 0.3rem;
+    color: #434343;
+    flex-shrink: 1;
+    margin-right: 0.24rem;
+    height: 100%;
+    line-height: 0.94rem;
+}
+.nav li:hover{
+    color: #5697f4 !important;
+}
+.nav li:hover::before{
+    content: "";
+    width: 0.31rem;
+	height: 0.04rem;
+    background-color: #5697f4;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+}
+.content{
+    background: #fff;
+}
+.cont_top{
+    height: 0.73rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.35rem;
+}
+.shop{
+    font-size: 0.26rem;
+	letter-spacing: 0.006rem;
+    color: #333333;
+    display: flex;
+}
+.icon-shangjia{
+    font-size: 0.32rem;
+    color: #84888f;
+    margin-right: 0.14rem;
+}
+.icon-youhuaxiangyougengduo{
+    font-size: 0.32rem;
+    color: #84888f;
+}
+.wait{
+    font-size: 0.26rem;
+	color: #5697f4;
+}
+.cont_mian{
+ background: #fff;
+ padding: 0 0.35rem;
+ font-size: 0;
+}
+.cont_mian li{
+    display: flex;
+   justify-content: space-between;
+   padding-bottom: 0.2rem;
+}
+.cont_mian li img{
+    width: 1.36rem;
+    height: 1.37rem;
+    margin-right: 0.24rem;
+}
+.goods{}
+.goods p{
+    width: 3.86rem;
+    font-size: 0.3rem;
+    line-height: 0.44rem;
+    color: #444444;
+    margin-bottom: 0.15rem;
+}
+.goods span{
+    font-size: 0.24rem;
+	color: #aaaaaa;
+}
+.price{
+    text-align: end;
+}
+.price p{
+    font-size: 0.3rem;
+    color: #000000;
+    margin-bottom: 0.1rem;
+}
+.price span{
+    font-size: 0.24rem;
+	color: #aaaaaa;
+}
+.cont_bot{
+
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/js/index.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/five.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_er038ehg964.css">
+    <link rel="stylesheet" href="../css/five.css">
+    <script src="../js/index.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <i class="iconfont icon-toright"></i>
+        <ul class="header_bon">
+            <li class="bon_active">出售中</li>
+            <li class="line">已下架</li>
+            <li>仓库</li>
+        </ul>
+        <p>完成</p>
+    </header>
+    <div class="content">
+        <div class="search">
+            <input type="text" placeholder="搜索">
+            <i class="iconfont icon-fangdajing-copy"></i>
+        </div>
+        <div class="shop">
+            <ul class="shop_top">
+                <li class="st_line">
+                    <p>浏览量排序</p>
+                    <i class="iconfont icon-xiangxia"></i>
+                </li>
+                <li>
+                    <p>筛选条件</p>
+                    <i class="iconfont icon-xiangxia"></i>
+                </li>
+            </ul>
+            <ul class="shop_bot">
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+                <li>
+                    <img src="../img/对勾.png" alt="">
+                    <img src="../img/产品图2.png" alt="">
+                    <div class="shop_bot_text">
+                        <p>ym9023-1韩国单鞋超美现欧洲站…</p>
+                        <p>¥ 150.00~250.00</p>
+                        <p>
+                            <span>9023</span> <span> <i class="iconfont icon-yanjing"></i> 0 </span> <span>销量 0</span>
+                        </p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="count">
+            <div class="count_bon">
+                <span></span>
+                全选
+            </div>
+            <p>
+                批量操作
+            </p>
+        </div>
+    </div>
+    
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/four.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_4sdbjdkvdmu.css">
+    <link rel="stylesheet" href="../css/four.css">
+    <script src="../js/index.js"></script>
+    <title>four</title>
+</head>
+<body>
+    <ul class="header">
+        <li>
+            <i class="iconfont icon-toright"></i>
+            <img src="../img/-e-买家头像.png" alt="">
+        </li>
+        <li>
+            新手体验店<span>营业中</span>
+        </li>
+        <li>
+            <i class="iconfont icon-xinxi"></i>
+            <i class="iconfont icon-shezhi"></i>
+            <p>1</p>
+        </li>
+    </ul>
+    <div class="content">
+        <ul class="fans">
+            <li>
+                <p>1</p>
+                <p>关注人数</p>
+            </li>
+            <li>
+                <p>1</p>
+                <p>商品数</p>
+            </li>
+            <li>
+                <p>0</p>
+                <p>粉丝数</p>
+            </li>
+            <li>
+                <p>0</p>
+                <p>浏览量</p>
+            </li>
+        </ul>
+        <div class="live">
+            <div class="live_left">
+                <i class="iconfont icon-zhibo"></i>
+                <p>我要直播</p>
+            </div>
+            <div class="live_right">
+                <p>去开启直播</p>
+                <i class="iconfont icon-youhuaxiangyougengduo"></i>
+            </div>
+            
+        </div>
+        <div class="auth">
+            <p class="title">店铺资质认证</p>
+            <ul class="auth_bot">
+                <li>
+                    <i class="iconfont icon-yingyezhizhao"></i>
+                    <p>营业执照</p>
+                    <span class="auth_active">已认证</span>
+                </li>
+                <li>
+                    <i class="iconfont icon-yingyezhizhao"></i>
+                    <p>营业执照</p>
+                    <span>已认证</span>
+                </li>
+                <li>
+                    <i class="iconfont icon-yingyezhizhao"></i>
+                    <p>营业执照</p>
+                    <span>已认证</span>
+                </li>
+            
+            </ul>
+        </div>
+        <div class="manage">
+            <p class="title">店铺管理</p>
+            <ul>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-gouwudaidaizishangcheng"></i>
+                    <p>商品管理</p>
+                </li>
+                
+                
+            </ul>
+
+        </div>
+        <div class="mark">
+            <p class="title">店铺营销</p>
+            <ul class="mark_bot">
+                <li>
+                    <i class="iconfont icon-youhuiquan"></i>
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-youhuiquan"></i>
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-youhuiquan"></i>
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <i class="iconfont icon-youhuiquan"></i>
+                    <p>优惠券</p>
+                </li>
+                
+            </ul>
+        </div>
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/one.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_ypuanp755ff.css">
+    <link rel="stylesheet" href="../css/one.css">
+    <script src="../js/index.js"></script>
+    <title>one</title>
+</head>
+<body>
+    <div class="header">
+        <i class="iconfont icon-toright"></i>
+        <p>详情</p>
+    </div>
+    <div class="content">
+        <div class="logi">
+            <p>已发货</p>
+        </div>
+        <ul class="lw_adr">
+            <li>
+                <div class="lw_l">
+                    <i class="iconfont icon-Frame1"></i>
+                </div>
+                <div class="lw_r">
+                    <h4>测试</h4>
+                    <p>110120119</p>
+                    <p>
+                        <span>安徽省</span><span>合肥市</span><span>蜀山区</span>
+                    </p>
+                </div>
+            </li>
+            <li>
+                <div class="adr_l">
+                    <i class="iconfont icon-liaotian"></i>
+                </div>
+                <div class="adr_r">
+                    <h4>买家留言</h4>
+                    <p>测试测试</p>
+                </div>
+            </li>
+        </ul>
+        <div class="shop">
+            <div class="shop_top">
+                <div class="s_t_l">
+                    <img src="../img/-e-买家头像.png" alt="">
+                    <p>test110</p>
+                </div>
+                <ul class="s_t_r">
+                    <li>打电话</li>
+                    <li>发信息</li>
+                </ul>                    
+            </div>
+            <div class="shop_bot">
+                
+                <img src="../img/-e-产品图.png" alt="">
+                
+                <div class="s_b_r">
+                    <div class="s_b_r_t">
+                        <p>本人做淘宝店铺一件代发本人做淘宝店铺一件代发</p>
+                        <span>￥999</span>
+                    </div>
+                    <div class="s_b_r_b">
+                        <p>
+                            颜色：<span>如图</span>尺码：<span>均码</span>
+                        </p>
+                        <span>X1</span>
+                    </div>
+                    
+                </div>
+                
+
+            </div>
+            <div class="count">
+                共计3件，实收款：<span>￥999</span>（含运费：￥0.00）
+            </div>
+        </div>
+        <ul class="xx">
+            <li class="ddh">
+                <p>
+                    订单号：<span>100000000</span>
+                </p>
+                <span>
+                    复制
+                </span>
+            </li>
+            <li>
+                <p>
+                    下单时间：<span>18-12-12 10：00：00</span>
+                </p>
+                
+            </li>
+            <li>
+                <p>
+                    支付时间：<span>18-12-12 10：00：00</span>
+                </p>
+                
+                
+            </li>
+            <li>
+                <p>
+                    支付方式：<span>18-12-12 10：00：00</span>
+                </p>
+                
+                
+            </li>
+            <li>
+                <p>
+                    发货时间：<span>18-12-12 10：00：00</span>
+                </p>
+                
+                
+            </li>
+            <li>
+                <p>
+                    完成时间：<span>18-12-12 10：00：00</span>
+                </p>
+               
+                
+            </li>
+            <li class="bz">
+                <p>
+                    备注信息：<span>test1</span>
+                </p>
+                <span>
+                    <i class="iconfont icon-youhuaxiangyougengduo"></i>
+                </span>
+                
+            </li>
+        </ul>
+
+
+        <div class="botton">
+            <p>确认收货</p>
+        </div>
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/seven.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_c650ik2dcsi.css">
+    <link rel="stylesheet" href="../css/seven.css">
+    <script src="../js/index.js"></script>
+    <title>seven</title>
+</head>
+<body>
+    <div class="header">
+        <i class="iconfont icon-toright"></i>
+        <i class="iconfont icon-fangdajing-copy"></i>
+        <input type="text" placeholder="女鞋">
+        <i class="iconfont icon-fenxiang"></i>
+    </div>
+    <div class="content">
+        <img src="../img/big_img.png" alt="" class="big_img">
+        <div class="price_name">
+            <div class="price">
+                ￥ <span> 159.00</span>  <del>￥ 199.00</del>
+            </div>
+            <p class="name">
+                【大牌驾到】NBA新款秋季女鞋NBA新款秋季女鞋
+            </p>
+        </div>
+        <ul class="config">
+            <li class="quan">
+                <p>
+                    领券<span>满100减8</span><span>满200减30</span>
+                </p>
+                <i class="iconfont icon-youhuaxiangyougengduo"></i>
+            </li>
+            <li>
+                <p>已选：<span>*1</span></p>
+                <i class="iconfont icon-youhuaxiangyougengduo"></i>
+            </li>
+        </ul>
+
+        <div class="masking"></div>
+
+        <div class="popup">
+            <div class="popup_top">
+                <img src="../img/big_img.png" alt="">
+                <div class="top_r">
+                    <div class="price">
+                        ￥ <span> 159.00</span>  <del>￥ 199.00</del>
+                    </div>
+                    <p>请选择规格</p>
+                </div>
+            </div>
+            <ul class="popup_bot">
+                <li>
+                    <p>颜色</p>
+                    <span class="popup_active">黑色</span><span>白色</span>
+                </li>
+                <li>
+                    <p>尺码</p>
+                    <span>36</span><span class="popup_active">37</span>
+                </li>
+                <li>
+                    <p>数量</p>
+                    <div class="num">
+                        <span>-</span><span class="shuzi">1</span><span>+</span>
+                        
+                    </div>
+                </li>
+            </ul>
+            <p class="qd">确定</p>
+        </div>
+    </div>
+   
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/six.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_4sdbjdkvdmu.css">
+    <link rel="stylesheet" href="../css/six.css">
+    <script src="../js/index.js"></script>
+    <title>six</title>
+</head>
+<body>
+    <div class="header_bg">
+        <div class="header padding_24">
+            <i class="iconfont icon-toright"></i>
+            <span>等待结算</span>
+            <span></span>
+        </div>
+    </div>
+    
+    <div class="content padding_24">
+    
+        <ul class="nav">
+            <li >全部</li>
+            <li class="nav_active">交易中</li>
+            <li>退款退货</li>
+        </ul>
+        <div class="wait">
+            <p>¥31.63</p>
+            <p>交易中待结算</p>
+        </div>
+
+        <div class="list">
+            <ul class="item">
+                <li class="count list_border">
+                    <p>2018-11</p>
+                    <p>待结算：￥798.00</p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                
+            </ul>
+            <ul class="item">
+                <li class="count list_border">
+                    <p>2018-11</p>
+                    <p>待结算：￥798.00</p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                
+            </ul>
+            <ul class="item">
+                <li class="count list_border">
+                    <p>2018-11</p>
+                    <p>待结算：￥798.00</p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                
+            </ul>
+            <ul class="item">
+                <li class="count list_border">
+                    <p>2018-11</p>
+                    <p>待结算：￥798.00</p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                <li class="details list_border">
+                    <p>
+                        <span>订单：123456</span><span class="price">+399.00</span>
+                    </p>
+                    <p>
+                        <span>2018-11-25</span><span class="state">系统结算中</span>
+                    </p>
+                </li>
+                
+            </ul>
+
+        </div>
+
+
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/three.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_12pytt3qzjhi.css">
+    <link rel="stylesheet" href="../css/three.css">
+    <script src="../js/index.js"></script>
+    <title>three</title>
+</head>
+<body>
+    <header>
+        <i class="iconfont icon-toright"></i>
+        <p>详情</p>
+        <p>删除</p>
+    </header>
+    <div class="content">
+        <div class="content_left">
+            <img src="../img/-e-买家头像.png" alt="">
+            <p>6年店</p>
+        </div>
+        <div class="content_right">
+            <div class="right_top">
+                <h3>新手体验店</h3>
+                <p>来自：今日新款</p>
+                <p>本月上新31款</p>
+                <img src="../img/-e-产品图.png" alt="" class="pp">
+                <i class="iconfont icon-bofang"></i>
+                <p class="price_img">￥32.00</p>
+                <div class="addrtime_love">
+                    <div class="addrtime">  
+                        <p>东莞.厂家直供一层30号</p>
+                        <p>19/04/24 11：21</p>
+                    </div>
+                    <div class="love">
+                        <i class="iconfont icon-xinaixin"></i>
+                        <i class="iconfont icon-liaotian"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="right_bot">
+                <div class="comment_top">
+                    <p>评论</p>
+                    <p>批量删除评论</p>
+                </div>
+                <div class="comment_bot">
+                    <i class="iconfont icon-liaotian"></i>
+                    <ul>
+                        <li>
+                            <img src="../img/-e-买家头像.png" alt="">
+                            <div class="comment_cont">
+                                <h6>新手体验店</h6>
+                                <p>好看好看好看好看好看好看好看好看</p>
+                            </div>
+                        </li>
+                        <li>
+                            <img src="../img/-e-买家头像.png" alt="">
+                            <div class="comment_cont">
+                                <h6>新手体验店</h6>
+                                <p>好看好看好看好看好看好看好看好看</p>
+                            </div>
+                        </li>
+                        
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/UI练习_12.20/page/two.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2277408_gk7tpbs3bu.css">
+    <link rel="stylesheet" href="../css/two.css">
+    <script src="../js/index.js"></script>
+    <title>two</title>
+</head>
+<body>
+    <div class="header">
+        <i class="iconfont icon-toright"></i>
+        <i class="iconfont icon-fangdajing-copy"></i>
+        <input type="text" name="" id="" placeholder="搜索我的订单">
+    </div>
+    <!-- :hover 无效需要点击产生效果 -->
+    <!-- input 中的placeholder 文字有问题 -->
+    <ul class="nav">
+        <li>全部</li>
+        <li>待付款</li>
+        <li>待发货</li>
+        <li>待收货</li>
+        <li>待评价</li>
+        <li>已完成</li>
+        <li>售后</li>
+        <li>待收货</li>
+        <li>待评价</li>
+        <li>已完成</li>
+        <li>售后</li>
+    </ul>
+    <div class="content">
+        <div class="cont_top">
+            <div class="shop">
+                <i class="iconfont icon-shangjia"></i>
+                面包自营
+                <i class="iconfont icon-youhuaxiangyougengduo"></i>
+            </div>
+            <div class="wait">
+                待收货
+            </div>
+        </div>
+        <ul class="cont_mian">
+            <li>
+                <img src="../img/-e-产品图.png" alt="">
+                <div class="goods">
+                    <p>小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕</p>
+                    <span>独立包装+原味</span>
+                </div>
+                <div class="price">
+                    <p>￥45.7</p>
+                    <span>x1</span>
+                </div>
+            </li>
+            <li>
+                <img src="../img/-e-产品图.png" alt="">
+                <div class="goods">
+                    <p>小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕</p>
+                    <span>独立包装+原味</span>
+                </div>
+                <div class="price">
+                    <p>￥45.7</p>
+                    <span>x1</span>
+                </div>
+            </li>
+            <li>
+                <img src="../img/-e-产品图.png" alt="">
+                <div class="goods">
+                    <p>小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕小蛋糕</p>
+                    <span>独立包装+原味</span>
+                </div>
+                <div class="price">
+                    <p>￥45.7</p>
+                    <span>x1</span>
+                </div>
+            </li>
+        </ul>
+        <div class="cont_bot">
+
+        </div>
+    </div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/ajax/js/ajax.js

@@ -0,0 +1,61 @@
+(function (){
+
+    class Ajax {
+  
+      constructor() {
+        this.ajax = new XMLHttpRequest();
+      }
+  
+      get(option) {
+        var params = ""
+        for(var key in option.data) {
+          params+= `&${key}=${option.data[key]}`
+        }
+        params = params.replace("&", "?")
+        option.url = option.url + params
+  
+        this.ajax.open("GET", option.url)
+        this.ajax.send()
+        this.readystatechange(option.success, option.error && option.error)
+      }
+  
+      post(option) {
+        this.ajax.open("POST", option.url)
+        this.ajax.setRequestHeader("Content-Type","application/json")
+        this.ajax.send(JSON.stringify(option.data))
+        this.readystatechange(option.success, option.error && option.error)
+      }
+  
+      readystatechange(success,error) {
+        this.ajax.onreadystatechange =  () => {
+          if (this.ajax.readyState == 4) {
+            if (this.ajax.status == 200) {
+  
+              var result = typeof this.ajax.responseText == "string"
+                          ? JSON.parse(this.ajax.responseText)
+                          : this.ajax.responseText;
+  
+  
+              switch (result.status) {
+                case 200:
+                  success(result.data)
+                  break;
+                case 500:
+                  error(result.msg)
+                  break;
+                default:
+              }
+  
+  
+            } else {
+              error("请求出错")
+            }
+          }
+        }
+      }
+    }
+  
+    window.$ajax = new Ajax()
+  
+  
+  })()

历届学生/18课程/class18_2/项目/练习项目/王一鸣/ajax/page/ajax.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ajax</title>
+</head>
+<body>
+    <h2></h2>
+    <ul>
+        
+    </ul>
+</body>
+<script src="../js/ajax.js"></script>
+<script>
+   $ajax.get({
+        url:'http://127.0.0.1:3000/api/json/index',
+        data:{},
+        success:function(rel){
+            console.log(rel);
+            document.querySelector("h2").innerText = rel.model.title;
+            rel.recommended.list.forEach((value) => {
+                document.querySelector("ul").innerHTML += `
+                <li>
+                    <a href="./info.html?id=${value.id}">
+                        <img src="${value.preview}" alt="">
+                        <p>${value.title}</p>
+                    </a>
+                </li>
+                `
+            })
+        },
+        error:function(err){
+            console.error(err);
+        }
+
+
+   })
+</script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/ajax/page/info.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h2></h2>
+    <h4></h4>
+    <p class="title"></p>
+    <ul>
+        
+    </ul>
+
+    <a href="#">下一页</a>
+</body>
+<script src="../js/ajax.js"></script>
+<script>
+    var page = 1;
+    function getinfo(){
+        $ajax.get({
+            url:"http://127.0.0.1:3000/api/json/info",
+            data:{
+                page:page,
+                id:GetQueryString("id")
+            },
+            
+            success:function(rel){
+                document.querySelector(".title").innerText = rel.title;
+                document.querySelector("h2").innerText = rel.info;
+                document.querySelector("h4").innerText = rel.source;
+                rel.list.forEach((value) => {
+                    document.querySelector("ul").innerHTML += `
+                    <li>
+                        <span>${value.title}</span>
+                        <img src="${value.src}" alt="">
+                        
+                    </li>
+                    `
+                })
+            },
+            error:function(err){
+                console.error(err);
+            }
+
+
+        })
+        console.log(page);
+
+    }
+    getinfo()
+
+    function nextbtn(){
+        page = page + 1;
+        getinfo()
+    }
+
+        function GetQueryString(name){ 
+        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
+        var r = window.location.search.substr(1).match(reg); 
+        if(r!=null)return  decodeURI(r[2]); return null; 
+    } 
+</script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/h5ele/css/clear.css

@@ -0,0 +1,8 @@
+body ,ul ,li ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,p{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/h5ele/css/ele.css

@@ -0,0 +1,318 @@
+.header{
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: linear-gradient(90deg,#0af,#0085ff);
+    height: 96px;
+    width: 100%;
+    padding: 7.5px 14px;
+    box-sizing: border-box;
+}
+.address{
+    width: 100%;
+    display: flex;
+    color: white;
+    padding: 10px 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    height: 45px;
+    align-items: center;
+}
+.address i:nth-child(1){
+    font-size: 18px;
+    /* font-weight: 700; */
+    margin-right: 5px;
+    margin-bottom: 2px;
+}
+.address i:nth-child(3){
+    color: #fff;
+    transform: scale(0.5);
+    margin-bottom: 7px;
+}
+.address p{
+    width: 60%;
+    /* display: flex; */
+    color: white;
+    padding: 10px 0;
+    /* overflow: hidden; */
+    box-sizing: border-box;
+    height: 45px;
+    /* align-items: center; */
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: start;
+}
+.search{
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #999;
+    background: #fff;
+}
+.search i{
+    transform: scale(0.95);
+    margin-right: 7px;
+}
+.search p{
+    font-size: 13PX;
+}
+.footer{
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: #fff;
+    border-top: 1px solid rgba(224, 118, 118, 0.2);
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.footer li{
+    text-align: center;
+    color: #8e8e93;
+}
+.footer p{
+    font-size: 10px;
+}
+.content{
+    margin-top: 106px;
+    margin-bottom: 50px;
+}
+.menu{
+    
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.menu li{
+    text-align: center;
+    font-size: 13px;
+    color: #666;
+    width: 20%;
+    padding-bottom: 5px;
+    box-sizing: border-box;
+}
+
+.menu img{
+    width: 49px;
+    height: 49px;
+    margin-bottom: 3px;
+}
+.menu p{
+    
+}
+.meal{
+    display: flex;
+    justify-content: space-between;
+    background: linear-gradient(0deg,#f4f4f4 5%,#fafafa 95%);
+    height: 110px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    margin: 15px 10px 5PX 10PX;
+}
+.meal_text p:first-child{
+    font-size: 18.5px;
+    font-weight: 700;
+    color: #333;
+    margin: 10px 0 5px;
+}
+.meal_text p:nth-child(2){
+    color: #777;
+    font-size: 13px;
+    margin-bottom: 10px;
+}
+.meal_text p:last-child{
+    font-size: 12px;
+    color: #af8260;
+    font-weight: 700;
+}
+.meal img{
+    width: 155px;
+    height: 103px;
+}
+.vip{
+    height: 40px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background: linear-gradient(90deg,#ffefc4,#f3dda0);
+    margin: 0 10px;
+}
+.vip li:nth-child(1){
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.vip li:nth-child(1) i{
+    color: rgb(224, 183, 0);
+}
+.vip li:nth-child(1) p:nth-child(2){
+    margin:0 5px;
+    font-size: 14px;
+    font-weight: 700;
+    color: #644f1b;
+
+}
+.vip li:nth-child(1) p:nth-child(3){
+    font-size: 11px;
+    color: #644f1b;
+}
+.vip li:nth-child(2) p{
+    font-size: 11px;
+    color: #644f1b;
+    margin-right: -10px;
+}
+.business{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 15px 0px;
+}
+.business::before{
+    content: "";
+    height: 1px ;
+    width: 25px;
+    background: #999;
+    margin-right: 6px;
+}
+.business::after{
+    content: "";
+    height: 1px ;
+    width: 25px;
+    background: #999;
+    margin-left: 6px;
+}
+.nav{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.nav .icon-xiangxia{
+    transform: scale(0.5);
+    color: #333;
+}
+.nav .icon-shaixuan{
+    transform: scale(0.9);
+    color: #666;
+}
+.nav p{
+    color: #666;
+    font-size: 14px;
+}
+.nav li:first-child{
+    display: flex;
+    align-items: center;
+}
+.nav li:last-child{
+    display: flex;
+    align-items: center;
+}
+.food_list{
+    margin-top: 15px;
+}
+.food_list li{
+    display: flex;
+
+}
+.food_list_img{
+    width: 65px;
+    height: 65px;
+    margin-left: 15px;
+}
+.food_list_r{
+  
+    margin-left: 5px;
+    flex: 1;
+}
+.list_r_first{
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    font-size: 15px;
+    font-weight: 700;
+    color: #333;
+    margin-bottom: 5px;
+}
+.list_r_first i{
+    margin-right: 15px;
+    font-size: 12px;
+    color: rgb(124, 122, 122);
+}
+.score{
+    display: flex;
+    flex: 1;
+    align-content: center;
+    justify-content: space-between;
+}
+.score img{
+    height: 10px;
+}
+.score span{
+    font-size: 11px;
+    color: #666;
+}
+.score li{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.score li:last-child span{
+    background: linear-gradient(45deg,#0085ff,#0af);
+    color: #fff;
+    transform: scale(0.8);
+    border-radius: 1px;
+    border: 1px solid #0097ff;
+}
+.price{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: 4px;
+    color: #999;
+    font-size: 11px;
+    margin-top: 6px;
+}
+.title{
+    display: flex;
+    justify-content: flex-start;
+}
+.title li{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    transform: scale(0.8);
+    color: rgb(104, 104, 104);
+    padding:1px 2px;
+    border: 1px solid rgb(180, 179, 179);
+    border-radius: 4px;
+    margin: 5px 2px;
+}
+.act_left {
+    display: flex;
+    width: 84%;
+}
+.act_left span{
+    background: rgb(4, 255, 88);
+    color: #fff;
+    font-size: 12px;
+    padding: 1px 2px;
+    border-radius: 2px;
+    box-sizing: border-box;
+    margin-right: 6px;
+    transform: scale(0.86);
+}
+.act_left p{
+    font-size: 12px;
+    color: #777;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transform: scale(0.9);
+    margin-left: -10px;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/h5ele/css/public.css

@@ -0,0 +1,3 @@
+.active{
+    color: #0089dc !important;
+}

历届学生/18课程/class18_2/项目/练习项目/王一鸣/h5ele/index.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/ele.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2265909_fsxt0qj35qn.css">
+
+    <title>H5饿了么练习</title>
+</head>
+<body>
+    <div class="header">
+        <div class="address">
+            <i class="iconfont icon-dingwei"></i>
+            <p>中国金币(安徽万国钱币)奥林阁</p>
+            <i class="iconfont icon-xiangxia"></i>
+        </div>
+        <div class="search">
+            <i class="iconfont icon-fangdajing"></i>
+            <p>搜索饿了么商家、商品名称</p>
+        </div>
+    </div>
+    <div class="content">
+        <ul class="menu">
+          
+                <li>
+                    <img src="https://cube.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>美食</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/9/21/60ac33f023d9074e13cd78f9b5964jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>美食</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/e/58/bceb19258e3264e64fb856722c3c1jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>美食</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>美食</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>甜品饮品</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/7/d6/6f2631288a44ec177204e05cbcb93jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>甜品饮品</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>甜品饮品</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/5/1a/dc885d2ce022d2ee60495acafb795jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>甜品饮品</p>
+                </li>
+                <li>
+                    <img src="https://cube.elemecdn.com/a/78/0fb469b2da210827ec16896e00420jpeg.jpeg?x-oss-process=image/format,webp/resize,w_90,h_90,m_fixed" alt="">
+                    <p>甜品饮品</p>
+                </li>
+        </ul>
+        <div class="meal">
+            <div class="meal_text">
+                <p>品质套餐</p>
+                <p>搭配齐全吃得好</p>
+                <p>立即抢购&nbsp;></p>
+            </div>
+            <img src="https://cube.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?x-oss-process=image/format,webp/resize,w_282,h_188,m_fixed" alt="">
+        </div>
+        <ul class="vip">
+            <li>
+                <i class="iconfont icon-huangguan"></i>
+                <p>超级会员</p>
+                <p>.已为我节省59元</p>
+            </li>
+            <li>
+                <p>下单即可获得奖励金&nbsp;></p>
+            </li>
+        </ul>
+        <div class="business">
+            推荐商家
+        </div>
+        <ul class="nav">
+            <li>
+                <p>综合排序</p>
+                <i class="iconfont icon-xiangxia"></i>
+            </li>
+            <li>
+                <p>距离最近</p>
+            </li>
+            <li>
+                <p>销量最高</p>
+            </li>
+            <li>
+                <p>筛选</p>
+                <i class="iconfont icon-shaixuan"></i>
+            </li>
+        </ul>
+        <ul class="food_list">
+            <li>
+                <img src="https://cube.elemecdn.com/d/5e/84c24fd28f4193d58656f1a7b395bjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed" alt="" class="food_list_img">
+                <div class="food_list_r">
+                    <div class="list_r_first">
+                        <p>宏祥记招牌花甲</p><i class="iconfont icon-gengduo"></i>
+                    </div>
+                    
+                    <ul class="score">
+                        <li>
+                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkRFMDAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZCMDAwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNTQuMDE3IDguMDcybC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w1My42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bS00OCAwTDMuNDY1IDkuNjMzYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDUuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMEw3LjU1IDMuMzUybDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2TDguNDk3IDYuMjY5bC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bTEyIDBsLTIuNTUyIDEuNTYxYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDE3LjYzLjU4OWMuMjEzLS41MTUuNTU3LS41MjMuNzc0IDBsMS4xNDYgMi43NjMgMi45ODIuMjM3Yy41NTYuMDQ0LjY3LjM2OC4yNC43MzZsLTIuMjc0IDEuOTQ0LjY5NiAyLjkxYy4xMy41NDItLjE0My43NS0uNjI2LjQ1NGwtMi41NTEtMS41NnptMTIgMGwtMi41NTIgMS41NjFjLS40NzYuMjkxLS43NTguMDk2LS42MjYtLjQ1NWwuNjk2LTIuOTA5LTIuMjczLTEuOTQ0Yy0uNDI0LS4zNjItLjMyNS0uNjkxLjIzOS0uNzM2bDIuOTgyLS4yMzdMMjkuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMGwxLjE0NiAyLjc2MyAyLjk4Mi4yMzdjLjU1Ni4wNDQuNjcuMzY4LjI0LjczNmwtMi4yNzQgMS45NDQuNjk2IDIuOTFjLjEzLjU0Mi0uMTQzLjc1LS42MjYuNDU0bC0yLjU1MS0xLjU2em0xMiAwbC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w0MS42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6IiBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="
+                                alt="">
+                            <span>4.3</span>&nbsp;<span>月售290</span>
+                        </li>
+                        <li>
+                            <span>蜂鸟专送</span>
+                        </li>
+                    </ul>
+                    <ul class="price">
+                        <li>
+                            <span>￥10起送</span>
+                            <span> &nbsp;|&nbsp; </span>
+                            <span>配送￥4</span>
+                        </li>
+                        <li>
+                            <span>1.28km</span>
+                            <span> &nbsp;|&nbsp; </span>
+                            <span>38分钟</span>
+                        </li>
+                    </ul>
+                    <ul class="title">
+                        <li>烧烤</li>
+                        <li>米线</li>
+                    </ul>
+                    <div class="act_left">
+                        <span>保</span>
+                        <p>该商户食品安全已由国泰产险承担，食品安全有保障</p>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <img src="https://cube.elemecdn.com/d/5e/84c24fd28f4193d58656f1a7b395bjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed" alt="" class="food_list_img">
+                <div class="food_list_r">
+                    <div class="list_r_first">
+                        <p>宏祥记招牌花甲</p><i class="iconfont icon-gengduo"></i>
+                    </div>
+                    
+                    <ul class="score">
+                        <li>
+                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkRFMDAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZCMDAwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNTQuMDE3IDguMDcybC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w1My42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bS00OCAwTDMuNDY1IDkuNjMzYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDUuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMEw3LjU1IDMuMzUybDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2TDguNDk3IDYuMjY5bC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bTEyIDBsLTIuNTUyIDEuNTYxYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDE3LjYzLjU4OWMuMjEzLS41MTUuNTU3LS41MjMuNzc0IDBsMS4xNDYgMi43NjMgMi45ODIuMjM3Yy41NTYuMDQ0LjY3LjM2OC4yNC43MzZsLTIuMjc0IDEuOTQ0LjY5NiAyLjkxYy4xMy41NDItLjE0My43NS0uNjI2LjQ1NGwtMi41NTEtMS41NnptMTIgMGwtMi41NTIgMS41NjFjLS40NzYuMjkxLS43NTguMDk2LS42MjYtLjQ1NWwuNjk2LTIuOTA5LTIuMjczLTEuOTQ0Yy0uNDI0LS4zNjItLjMyNS0uNjkxLjIzOS0uNzM2bDIuOTgyLS4yMzdMMjkuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMGwxLjE0NiAyLjc2MyAyLjk4Mi4yMzdjLjU1Ni4wNDQuNjcuMzY4LjI0LjczNmwtMi4yNzQgMS45NDQuNjk2IDIuOTFjLjEzLjU0Mi0uMTQzLjc1LS42MjYuNDU0bC0yLjU1MS0xLjU2em0xMiAwbC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w0MS42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6IiBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="
+                                alt="">
+                            <span>4.3</span>&nbsp;<span>月售290</span>
+                        </li>
+                        <li>
+                            <span>蜂鸟专送</span>
+                        </li>
+                    </ul>
+                    <ul class="price">
+                        <li>
+                            <span>￥10起送</span>
+                            <span> &nbsp;|&nbsp; </span>
+                            <span>配送￥4</span>
+                        </li>
+                        <li>
+                            <span>1.28km</span>
+                            <span> &nbsp;|&nbsp; </span>
+                            <span>38分钟</span>
+                        </li>
+                    </ul>
+                    <ul class="title">
+                        <li>烧烤</li>
+                        <li>米线</li>
+                    </ul>
+                    <div class="act_left">
+                        <span>保</span>
+                        <p>该商户食品安全已由国泰产险承担，食品安全有保障</p>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <img src="https://cube.elemecdn.com/d/5e/84c24fd28f4193d58656f1a7b395bjpeg.jpeg?x-oss-process=image/format,webp/resize,w_130,h_130,m_fixed" alt="" class="food_list_img">
+                <div class="food_list_r">
+                    <div class="list_r_first">
+                        <p>宏祥记招牌花甲</p><i class="iconfont icon-gengduo"></i>
+                    </div>
+                    
+                    <ul class="score">
+                        <li>
+                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeTI9IjUwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkRFMDAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZCMDAwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNNTQuMDE3IDguMDcybC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w1My42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bS00OCAwTDMuNDY1IDkuNjMzYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDUuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMEw3LjU1IDMuMzUybDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2TDguNDk3IDYuMjY5bC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6bTEyIDBsLTIuNTUyIDEuNTYxYy0uNDc2LjI5MS0uNzU4LjA5Ni0uNjI2LS40NTVsLjY5Ni0yLjkwOS0yLjI3My0xLjk0NGMtLjQyNC0uMzYyLS4zMjUtLjY5MS4yMzktLjczNmwyLjk4Mi0uMjM3TDE3LjYzLjU4OWMuMjEzLS41MTUuNTU3LS41MjMuNzc0IDBsMS4xNDYgMi43NjMgMi45ODIuMjM3Yy41NTYuMDQ0LjY3LjM2OC4yNC43MzZsLTIuMjc0IDEuOTQ0LjY5NiAyLjkxYy4xMy41NDItLjE0My43NS0uNjI2LjQ1NGwtMi41NTEtMS41NnptMTIgMGwtMi41NTIgMS41NjFjLS40NzYuMjkxLS43NTguMDk2LS42MjYtLjQ1NWwuNjk2LTIuOTA5LTIuMjczLTEuOTQ0Yy0uNDI0LS4zNjItLjMyNS0uNjkxLjIzOS0uNzM2bDIuOTgyLS4yMzdMMjkuNjMuNTg5Yy4yMTMtLjUxNS41NTctLjUyMy43NzQgMGwxLjE0NiAyLjc2MyAyLjk4Mi4yMzdjLjU1Ni4wNDQuNjcuMzY4LjI0LjczNmwtMi4yNzQgMS45NDQuNjk2IDIuOTFjLjEzLjU0Mi0uMTQzLjc1LS42MjYuNDU0bC0yLjU1MS0xLjU2em0xMiAwbC0yLjU1MiAxLjU2MWMtLjQ3Ni4yOTEtLjc1OC4wOTYtLjYyNi0uNDU1bC42OTYtMi45MDktMi4yNzMtMS45NDRjLS40MjQtLjM2Mi0uMzI1LS42OTEuMjM5LS43MzZsMi45ODItLjIzN0w0MS42My41ODljLjIxMy0uNTE1LjU1Ny0uNTIzLjc3NCAwbDEuMTQ2IDIuNzYzIDIuOTgyLjIzN2MuNTU2LjA0NC42Ny4zNjguMjQuNzM2bC0yLjI3NCAxLjk0NC42OTYgMi45MWMuMTMuNTQyLS4xNDMuNzUtLjYyNi40NTRsLTIuNTUxLTEuNTZ6IiBmaWxsPSJ1cmwoI2EpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4="
+                                alt="">
+                            <span>4.3</span>&nbsp;<span>月售290</span>
+                        </li>
+                        <li>
+                            <span>蜂鸟专送</span>
+                        </li>
+                    </ul>
+                    <ul class="price">
+                        <li>
+                            <span>￥10起送</span>
+                            <span> &nbsp;|&nbsp; </span>
+                            <span>配送￥4</span>
+                        </li>
+                        <li>
+                            <span>1.28km</span>
+                            <span> &nbsp;|&nbsp; </span>
+                            <span>38分钟</span>
+                        </li>
+                    </ul>
+                    <ul class="title">
+                        <li>烧烤</li>
+                        <li>米线</li>
+                    </ul>
+                    <div class="act_left">
+                        <span>保</span>
+                        <p>该商户食品安全已由国泰产险承担，食品安全有保障</p>
+                    </div>
+                </div>
+            </li>
+        </ul>
+
+    </div>
+    
+    <ul class="footer">
+       
+            <li class="active">
+                <i class="iconfont icon-shouye"></i>
+                <p>首页</p>
+            </li>
+            <li>
+                <i class="iconfont icon-faxian2"></i>
+                <p>发现</p>
+            </li>
+            <li>
+                <i class="iconfont icon-icon"></i>
+                <p>订单</p>
+            </li>
+            <li>
+                <i class="iconfont icon-wode"></i>
+                <p>我的</p>
+            </li>
+        
+    </ul>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/js/game.js

@@ -0,0 +1,199 @@
+var body = document.querySelector("body");
+var people = document.querySelector(".people");
+var bombAudio = document.querySelector(".bombAudio");
+var appleAudio = document.querySelector(".appleAudio");
+// 屏幕的宽度
+var screenWidth = document.body.clientWidth;
+var screenHeight = document.body.clientHeight;
+var fraction = 80;
+var gameProbability = 0.4;
+var bmobSpeed = 80;
+var appleOffset = 20;
+var nmb;
+//随机时间改变炸弹大小
+
+
+//开局设置难易程度
+var ua =document.querySelector(".aaa");
+var ulist = document.querySelectorAll(".aaa li");
+ulist.forEach(function(a,b){
+       a.onclick = function(){
+          if(a.value == 1){
+            gameProbability = 0.8;
+            bmobSpeed = 100;
+            appleOffset = 40;
+          }else if(a.value == 2){
+            gameProbability = 0.4;
+            bmobSpeed = 70;
+            appleOffset = 30;
+          }else if(a.value == 3){
+            gameProbability = 0.2;
+            bmobSpeed = 60;
+            appleOffset = 20;
+          }
+          else if(a.value == 4){
+            gameProbability = 0.1;
+            bmobSpeed = 40;
+            appleOffset = 10;
+            setInterval(function(){
+              nmb = parseInt(Math.random()*300);
+              console.log(nmb);
+            },80);
+            setInterval(function(){
+              var boomm = document.querySelector(".boom");
+              boomm.style.width="100px";
+            },nmb)
+          }
+          ua.style ="opacity: 0;display:none;"
+          console.log(gameProbability,bmobSpeed,appleOffset);
+          setInterval(function(){
+            init();
+          },400)
+          
+       }
+      
+    }) 
+    console.log(gameProbability,bmobSpeed,appleOffset);
+function createdEle(type) {
+
+  var Img = document.createElement("img");
+  Img.src = type == 1 ? '../img/apple.png' : '../img/boom.png';
+  Img.className = type == 1 ? 'apple' : 'boom';
+   // 56  84
+  // 元素的宽度
+  var SpanWidth = type == 1 ? 40 : 60;
+  var SpanLeft = Math.random() * (screenWidth - SpanWidth)
+  if (SpanLeft <= SpanWidth) {
+    SpanLeft = 0
+  }
+
+  Img.style = `
+    position: absolute;
+    left: ${SpanLeft}px;
+    top: ${type == 1 ? -56 : -84}px;
+  `;
+
+  body.appendChild(Img);
+  animation(type, Img)
+}
+
+function animation(type, span) {
+  // 苹果🍎
+  if (type == 1) {
+    var appleInterval = setInterval(function (){
+      span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
+      // 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
+      if (parseInt(span.style.top) > screenHeight) {
+        body.removeChild(span)
+        clearInterval(appleInterval)
+      } else {
+        JudgingCollision(span, appleInterval)
+      }
+    },60)
+  // 炸弹💣
+  } else {
+    var boomInterval = setInterval(function (){
+      span.style.top = `${parseInt(span.style.top) + 20}px`;
+      //判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
+      if (parseInt(span.style.top) > screenHeight) {
+        body.removeChild(span)
+        clearInterval(boomInterval)
+      } else {
+        JudgingCollision(span, boomInterval)
+      }
+    },bmobSpeed)
+  }
+}
+
+/**
+ * 判断是否碰撞
+ * @constructor
+ */
+function JudgingCollision(span, timeout) {
+  var people = document.querySelector(".people");
+  var peopleX1 = parseInt(people.style.left);
+  var peopleX2 = parseInt(people.style.left) + people.clientWidth;
+  var peopleX3 = people.offsetTop;
+  var peopleX4 = people.offsetTop + people.clientHeight;
+  var spanX1 = parseInt(span.style.left);
+  var spanX2 = parseInt(span.style.left) + span.clientWidth;
+  var spanX3 = parseInt(span.style.top);
+  var spanX4 = parseInt(span.style.top) +  span.clientHeight;
+
+  // 碰撞检测
+  if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
+    // 没碰上
+  }else{
+    if (span.className == "apple") {
+      fraction += 10;
+
+      // 如果分数超过100分，
+      if (fraction >= 300) {
+        // 降低苹果出现的概率，也就是提高炸弹数量
+        gameProbability = 0.2;
+        // 并且加快炸弹的速度
+        bmobSpeed = 80;
+        appleOffset = 40;
+      }
+
+      document.querySelector(".fraction").innerText = `${fraction}分`;
+      appleAudio.play()
+      body.removeChild(span)
+      clearInterval(timeout)
+    } else {
+      fraction -= 20;
+      document.querySelector(".fraction").innerText = `${fraction}分`;
+      bombAudio.play();
+
+      if (fraction <= 0) {
+        clearInterval(timeout)
+        confirm("游戏失败")
+        location.reload()
+      } else {
+        span.src = "../img/bombimg.png"
+        clearInterval(timeout)
+        setTimeout(function (){
+          body.removeChild(span)
+        },100)
+      }
+    }
+  }
+}
+
+function init () {
+  var probability = Number(Math.random().toFixed(1))
+  if (probability <= gameProbability) {
+    createdEle(1)
+  } else {
+    createdEle(2)
+  }
+}
+
+
+
+body.onmousemove = function (e) {
+  if (e.x <= 100) {
+    people.style.left = `0px`;
+  } else {
+    people.style.left = `${e.x - 100}px`;
+  }
+
+  // 判断人物向右移动
+  if (parseInt(people.style.left) > screenWidth / 2) {
+    people.className = 'people'
+  // 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
+  } else {
+    people.className = 'people leftPeople'
+  }
+}
+
+
+// 接到一个苹果加10分
+// 接到炸弹减20
+// 默认0分
+// 结束条件：分数 < 0
+
+
+// 任务
+// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
+//

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/11.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>aaa</title>
+    <style>
+        html {
+            height: 100%;
+            width: 100%;
+        }
+
+        body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        span {
+            transition: all 0.8s ease;
+            user-select: none;
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+<script>
+    var ibody = document.querySelector("body");
+    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
+    var i = 0
+
+    ibody.onmousemove = function (e) {
+        var ispan = document.createElement("span");
+        var x = e.x,
+            y = e.y;
+        ispan.innerText = arr[i];
+        ibody.appendChild(ispan);
+
+        ispan.style = `position: absolute;
+                top: ${y -15}px;
+                left: ${x - 5}px;
+                color: hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+            `;
+        setTimeout(function () {
+            ispan.style = `position: absolute;
+                top: ${y - 15 - 100}px;
+                left: ${x - 5}px;
+                color: hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+                opacity: 0;
+                `;
+        }, 200)
+        setTimeout(function () {
+            ibody.removeChild(ispan);
+        }, 1100)
+
+        i++;
+        i == 10 ? i = 0 : i;
+    }
+</script>
+
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/bg.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            position: relative;
+            
+        }
+        html{
+            height: 100%;
+            width: 100%;
+            
+        }
+        span{
+            transition: all 1s ease;
+        }
+    </style>
+</head>
+<body>
+    
+</body>
+<script>
+        var bo = document.querySelector("body");
+        var index = 0;
+        bo.onclick = function(e){
+            var x = e.x , y = e.y;
+            var cspan = document.createElement("span");
+            console.log(x,y);
+            var arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
+            cspan.innerText = arr[index];
+            cspan.style=`
+                color:hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+                position: absolute;
+                top:${y - 22}px ;
+                left:${x - 31}px ;
+            `;
+            bo.appendChild(cspan);
+
+            setInterval(function(){
+                cspan.style=`
+                color:hsla(${parseInt(Math.random()*360)}, 100%, 50%, 1);
+                position: absolute;
+                top:${y - 22 - 100}px ;
+                left:${x - 31}px ;
+                opacity: 0;
+            `;
+            },100)
+
+            setInterval(function(){
+                bo.removeChild(cspan);
+            },1100)
+
+
+            index++;
+            index == 12?index=0:index=index;
+
+        }
+
+
+</script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/game.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        html {
+            height: 100%;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        body {
+            background: #98d8fe url("./img/back.png");
+            background-position: center bottom;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .people {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100px;
+        }
+        span {
+
+        }
+        .leftPeople {
+            transform: rotateY(180deg) !important;
+        }
+        .apple {
+            width: 40px;
+            height: 40px;
+            transition: top 0.1s ease;
+        }
+        .boom {
+            width: 60px;
+            transition: top 0.1s ease;
+        }
+        .booms{
+            width: 100px;
+            transition: all 0.01s ease;
+        }
+        .fraction {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            font-size: 20px;
+        }
+        .aaa{
+            transition: all 1s ease;
+            display: block;
+            opacity: 1;
+        }
+        .aaa li{
+            width: 20%;
+            height: 50px;
+            background: rgba(65, 65, 65, 0.699);
+            color: white;
+            font-size: 20px;
+            list-style: none;
+            margin-top: 3px;
+            line-height: 50px;
+            text-align: center;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+    
+        <ul class="aaa">
+            <li value="1">简单</li>
+            <li value="2">一般</li>
+            <li value="3">困难</li>
+            <li value="4">谁玩谁zz</li>
+        </ul>
+    
+    
+    <!--得分-->
+   <div class="fraction">0分</div>
+    <!--爆炸音效-->
+   <audio class="bombAudio" src="../img/bomb.mp3" hidden></audio>
+   <audio class="appleAudio" src="../img/apple.mp3" hidden></audio>
+    <!--人物-->
+   <img class="people" src="../img/pepop.png"/>
+</body>
+<script src="../js/game.js"></script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/王一鸣/js练习/page/input.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模拟百度搜索栏</title>
+</head>
+<body>
+    
+    <input type="text" placeholder="请输入关键字">
+    <ul>
+        
+    </ul>
+</body>
+    <script>
+        var Input = document.querySelector("input");
+        var tishi = document.querySelector("ul");
+        var ku = ["你好123","我好123","他好321","大家好321","她好111","它好222","heeloaaa","Hibbb"];
+        var New = [];
+        Input.oninput = function(){
+            New = []
+          if(Input.value.length != 0){
+                ku.forEach(function(v){
+                    if(v.search(Input.value) != -1){
+                    var seindex = v.search(Input.value);
+                    var swidth = Input.value.length;
+                    var str = `<span style="color:blue;">${Input.value}</span>`;
+                    New.push(v.replace(Input.value,str));
+                        
+                    }   
+                });
+            if(New.length > 0){
+                tishi.innerHTML = "";
+                New.forEach(function(val,i){
+                    tishi.innerHTML += `<li>${val}</li>`
+                });
+
+                var Lis = tishi.querySelectorAll("li");
+                    Lis.forEach(function(v){
+                     v.onclick = function(){
+                    Input.value = v.innerText;
+                    tishi.innerHTML = ""
+                }});
+            }else{               
+                tishi.innerHTML = "<li>搜索不到关键字</li>"; }  
+               
+          }else{
+              tishi.innerHTML =""
+          }
+          
+    }
+    
+    </script>
+</html>