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>