first commit

历届学生/韩想/项目开发/练习项目/仿移动端/赵俊凯/css/clear.css

@@ -0,0 +1,16 @@
+/* 专门用来重置浏览器默认样式的 */
+body, p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+}
+
+input {
+    outline: none;
+}
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/韩想/项目开发/练习项目/仿移动端/赵俊凯/css/index.css

@@ -0,0 +1,198 @@
+.header {
+    width: 100%;
+    height: 2.5rem;
+    background-color: #000000;
+    opacity: 0.7;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.6rem;
+    box-sizing: border-box;
+}
+.dk {
+    width: 3.6rem;
+	height: 1.3rem;
+	background-color: #d0302c;
+    border-radius: 0.2rem;
+	font-family: PingFangSC-Medium;
+	font-size: 0.6rem;
+    color: #ffffff;
+    text-align: center;
+    line-height: 1.3rem;
+    
+}
+.header img {
+    height: 1.625rem;
+}
+
+.content {
+    margin-top: 50px;
+}
+.pic {
+    height: 211px;
+}
+.pic img {
+    width: 100%;
+}
+.content_nr{
+    margin-top: 1.475rem;
+}
+.title{
+	font-family: PingFangSC-Bold;
+	font-size: 0.9rem;
+	line-height: 1.425rem;
+	color: #333333;
+}
+.time{
+    margin-top: 0.75rem;
+	font-family: PingFangSC-Medium;
+	font-size: 0.575rem;
+	line-height: 1.08rem;
+	color: #999999;
+}
+.gn{
+    margin-top: 0.475rem;
+    display: flex;
+    justify-content: space-between;
+}
+.zuo{
+    display: flex;
+    
+}
+.sc img{
+    width: 0.7rem;
+    height: 0.7rem;
+    vertical-align: middle;
+}
+.sc span{
+	font-family: PingFangSC-Medium;
+	font-size: 0.6rem;
+	line-height: 1.125rem;
+    color: #999;
+}
+.dz{
+    margin-left: 1.5rem;
+}
+.dz img{
+    width: 0.65rem;
+	height: 0.675rem;
+    vertical-align: middle;
+}
+.dz span{
+	font-family: PingFangSC-Medium;
+	font-size: 0.6rem;
+	line-height: 1.125rem;
+	color: #999;
+}
+.you img{
+    width: 0.425rem;
+    height: 0.25rem;
+    margin-bottom: 0.1rem;
+    
+}
+.you span{
+    font-family: PingFangSC-Medium;
+	font-size: 0.6rem;
+	line-height: 1.125rem;
+	color: #999;
+}
+.xian{
+    width: 100%;
+    transform: scaleY(0.5);
+    height: 1px;
+    background: #e5e5e5;
+    margin-top: 1.225rem;
+}
+.xgtj .title{
+    margin-top: 0.775rem;
+    margin-bottom: 0.925rem;
+}
+.xgtj_content{
+    overflow-x: scroll;
+}
+.xgtj_content ul{
+    display: flex;
+}
+.xgtj_content ul li{
+    width: 6.85rem;
+    height: 6.275rem;
+    position: relative;
+    margin-right: 0.25rem;
+}
+.xgtj_content ul li img{
+    width: 6.85rem;
+    height: 3.9rem;
+    
+}
+.xgtj_content ul li span{
+    position: absolute;
+    right: 0.35rem;
+    bottom: 2.7rem;
+	font-family: PingFangSC-Medium;
+	font-size: 0.55rem;
+	color: #ffffff;
+}
+.xgtj_content ul li p{
+	font-family: PingFangSC-Medium;
+	font-size: 0.7rem;
+	line-height: 1.175rem;
+	color: #333;
+}
+.pl{
+    margin-bottom: 1em;
+}
+.pl .title{
+    margin-top: 0.775rem;
+    margin-bottom: 0.925rem;
+}
+.pl_title{
+    margin-top: 0.725rem;
+    display: flex;
+    justify-content: space-between;
+}
+.pl_tx{
+    display: flex;
+}
+.pl_tx img{
+    width: 1.75rem;
+	height: 1.75rem;
+}
+.wm{
+    margin-left: 0.5rem;
+}
+.wm p:first-child{
+	font-family: PingFang-SC-Bold;
+	font-size: 0.7rem;
+	color: #333333;
+}
+.wm p:last-child {
+	font-family: PingFang-SC-Medium;
+	font-size: 0.5rem;
+	color: #999999;
+}
+.pl_title{
+    margin-top: 0.95rem;
+}
+.plnr{
+	font-family: PingFangSC-Medium;
+	font-size: 0.7rem;
+	line-height: 1.05rem;
+	letter-spacing: 0.015rem;
+    color: #333333;
+    padding-left: 2.2rem;
+    box-sizing: border-box;
+    margin-top: 0.95rem;
+}
+.dibu{
+    width: 17.55rem;
+	height: 2.2rem;
+	border-radius: 0.2rem;
+    border: solid 0.05rem #d0302c;
+    color: #d0302c;
+    text-align: center;
+    line-height: 2.2rem;
+    font-size: 0.7rem;
+}

历届学生/韩想/项目开发/练习项目/仿移动端/赵俊凯/css/public.css

@@ -0,0 +1,16 @@
+/* 存放公共css的 */
+.theme_red {
+    color: blue;
+}
+
+.left {
+    float: left;
+}
+
+.right {
+    float: right;
+}
+
+.p_575 {
+    padding: 0 0.575rem;
+}

历届学生/韩想/项目开发/练习项目/仿移动端/赵俊凯/index.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+    <style>
+        html {
+            font-size: 20px;
+        }
+
+        @media only screen and (min-width: 400px) {
+            html {
+                font-size: 21.33333333px !important;
+            }
+        }
+
+        @media only screen and (min-width: 414px) {
+            html {
+                font-size: 22.08px !important;
+            }
+        }
+
+        @media only screen and (min-width: 480px) {
+            html {
+                font-size: 25.6px !important;
+            }
+        }
+
+    </style>
+</head>
+<body>
+    <div class="header">
+        <img src="./img/logo.png" alt="">
+        <div class="dk">打开</div>
+    </div>
+    <div class="content">
+        <div class="pic">
+            <img src="./img/pic.png" alt="">
+        </div>
+        <div class="content_nr p_575">
+            <div class="title">香港24小时 | 8月25日发生了什么？暴力局面再次升级</div>
+            <div class="time">2019-04-30 10:45</div>
+            <div class="gn">
+                <div class="zuo">
+                    <div class="sc">
+                        <img src="./img/sc.png" alt="">
+                        <span>收藏</span>
+                    </div>
+                    <div class="dz">
+                        <img src="./img/dz.png" alt="">
+                        <span>12</span>
+                    </div>
+                </div>
+                <div class="you">
+                    <span>简介</span>
+                    <img src="./img/jj.png" alt="">
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="xgtj">
+                <p class="title">相关推荐</p>
+                <div class="xgtj_content">
+                    <ul>
+                        <li><a href="">
+                            <img src="./img/ship.png" alt="">
+                            <span>03:07</span>
+                            <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+                        </a></li>
+                        <li><a href="">
+                            <img src="./img/ship.png" alt="">
+                            <span>03:07</span>
+                            <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+                        </a></li>
+                        <li><a href="">
+                            <img src="./img/ship.png" alt="">
+                            <span>03:07</span>
+                            <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+                        </a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="xian"></div>
+            <div class="pl">
+                <p class="title">全部评论</p>
+                <div class="plxq">
+                    <div class="pl_title">
+                        <div class="pl_tx">
+                            <img src="./img/tx.png" alt="">
+                            <div class="wm">
+                                <p class="w">呆小瓜</p>
+                                <p>刚刚</p>
+                            </div>
+                        </div>
+                        <div class="dz">
+                            <img src="./img/dz.png" alt="">
+                            <span>15</span>
+                        </div>
+                    </div>
+                    <p class="plnr">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</p>
+                </div>
+                <div class="plxq">
+                    <div class="pl_title">
+                        <div class="pl_tx">
+                            <img src="./img/tx.png" alt="">
+                            <div class="wm">
+                                <p class="w">呆小瓜</p>
+                                <p>刚刚</p>
+                            </div>
+                        </div>
+                        <div class="dz">
+                            <img src="./img/dz.png" alt="">
+                            <span>15</span>
+                        </div>
+                    </div>
+                    <p class="plnr">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</p>
+                </div>
+            </div>
+            <div class="dibu">
+                打开APP查看全部评论
+            </div>
+        </div>
+    </div>
+</body>
+</html>