first commit

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/在包河/css/clear.css

@@ -0,0 +1,33 @@
+/* 清除浏览器默认的css样式 */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input,
+button,
+textarea {
+    outline: none;
+    border: none;
+}
+
+body {
+    font-size: 0px;
+}

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/在包河/css/index.css

@@ -0,0 +1,165 @@
+.pa {
+    padding-left: 0.25rem;
+    padding-right: 0.24rem;
+}
+ .header{
+	height: 1rem;
+	background-color: rgb(0 0 0 / 70%);
+	display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    width: 100%;
+    padding-left: 0.24rem;
+    padding-right: 0.4rem;
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    z-index: 999;
+}
+.header .zai{
+	height: 0.65rem;
+}
+.header .open{
+    width: 1.44rem;
+	height: 0.52rem;
+	background-color: #d0302c;
+	border-radius: 0.08rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	font-size: 0.24rem;
+	color: #ffffff;
+}
+.content {
+    margin-top: 1rem;
+}
+.content .qw{
+    height: 4.22rem;
+}
+.content .news{
+    padding-top: 0.59rem;
+    padding-bottom: 0.53rem;
+    position: relative;
+}
+.content .news ::after{
+    content: "";
+    width: 100%;
+    height: 0.5rem;
+    background:#e5e5e5 ;
+    transform: scaleY(0.5);
+    display: inline-block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+
+}
+
+.content .news .summary{ 
+    font-size: 0.36rem;
+    color: #333333;
+    margin-bottom: 0.3rem;}
+.content .news .time{
+    font-size: 0.23rem;
+            color: #999999;
+            margin-bottom: 0.3rem;
+}
+.content .news .btn{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+.content .btn .main_left{
+    display: flex;
+    align-items: center;
+
+}
+.content .main_left .shoucang{
+    display: flex;
+    align-items: center;
+    margin-right: 0.6rem;
+   
+    
+}
+.content .main_left .shoucang .collect{
+    width: 0.28rem;
+    height: 0.28rem;
+}
+.content .main_left .shoucang span{
+    font-size: 0.24rem;
+    color: #999999;
+    margin-left: 0.08rem;
+}
+.content .main_left .zan{}
+.content .main_left .zan .good{
+    width: 0.26rem;
+    height: 0.27rem;
+}
+.content .main_left .zan span{
+    font-size: 0.24rem;
+    color: #999999;
+    margin-left: 0.08rem;
+}
+.content .main_right {}
+.content .main_right .zk{}
+.content .main_right .zk span{
+    font-size: 0.24rem;
+    color: #999999;
+    margin-left: 0.08rem;
+}
+.content .main_right .zk .down{
+    width: 0.17rem;
+    height: 0.1rem;
+    margin-left: 0.11rem;
+}
+.recommend{}
+.recommend .recommend_tab{
+    height: 1rem;
+    background-color: #ffffff;
+    font-size: 0.32rem;
+    color: #333333;
+    display: flex;
+    align-items: center;
+
+}
+.recommend ul{
+    display: flex;
+            overflow-x: scroll;
+
+}
+.recommend ul li{
+    margin-right: 0.1rem;
+    flex-shrink: 0;
+    width: 2.74rem;
+
+}
+.recommend ul li .top{
+    width: 2.74rem;
+    height: 1.56rem;
+    position: relative;
+    margin-bottom: 0.24rem;
+}
+.recommend ul li .top img{
+    width: 100%;
+    height: 100%;
+}
+.recommend ul li .top span{
+    font-size: 0.22rem;
+    color: #ffffff;
+    position: absolute;
+    right: 0.14rem;
+    bottom: 0.13rem;
+}
+.recommend ul li .text{
+    font-size: 0.28rem;
+    color: #333333;
+    margin-bottom: 0.39rem;
+}
+.active .text {
+    color: #d0302c;
+}
+
+

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/在包河/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./rem.js"></script>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <div class="header">
+        <img class="zai" src="./img/logo.png" alt="">
+        <div class="open"> 打开
+        </div>
+    </div>
+    <div class="content">
+        <img class="qw" src="./img/video.png" alt="">
+        <div class="news pa">
+            <div class="summary">香港24小时 | 8月25日发生了什么？暴力局
+                面再次升级</div>
+            <div class="time">2019-04-30 10:45</div>
+            <div class="btn">
+                <div class="main_left">
+                    <div class="shoucang">
+                        <img class="collect" src="./img/love.png" alt="">
+                        <span>收藏</span>
+                    </div>
+                    <div class="zan">
+                        <img class="good" src="" alt="">
+                        <span>12</span>
+                    </div>
+                </div>
+                <div class="main_right">
+                    <div class="zk">
+                        <span>简介</span>
+                        <img class="down" src="./img/zk.png" alt="">
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="recommend">
+            <div class="recommend_tab">相关推荐</div>
+            <ul class="pa">
+                <li class="active">
+                    <div class="top">
+                        <img src="./img/video.png" alt="">
+                        <span>03:07</span>
+                    </div>
+                    <div class="text">一生中总要有个夏天
+                        给海岛，我的9大家覅的v你问呢v那位女天8夜</div>
+                </li>
+                <li>
+                    <div class="top">
+                        <img src="./img/video.png" alt="">
+                        <span>03:07</span>
+                    </div>
+                    <div class="text">一生中总要有个夏天
+                        给海岛，我的9天8夜</div>
+                </li>
+                <li>
+                    <div class="top">
+                        <img src="./img/video.png" alt="">
+                        <span>03:07</span>
+                    </div>
+                    <div class="text">一生中总要有个夏天
+                        给海岛，我的9天8夜</div>
+                </li>
+                <li>
+                    <div class="top">
+                        <img src="./img/video.png" alt="">
+                        <span>03:07</span>
+                    </div>
+                    <div class="text">一生中总要有个夏天
+                        给海岛，我的9天8夜</div>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="footer"></div>
+
+</body>
+
+</html>

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/在包河/rem.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";
+}