first commit

历届学生/18课程/class18/项目/上课项目/在包河H5静态页面/css/clear.css

@@ -0,0 +1,48 @@
+/* 清除浏览器默认样式 */
+
+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;
+    }
+}
+
+@media only screen and (min-width: 767px) {
+    html {
+        font-size: 40.96px !important;
+    }
+}
+
+body,
+ul,
+li,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

历届学生/18课程/class18/项目/上课项目/在包河H5静态页面/css/index.css

@@ -0,0 +1,220 @@
+.header {
+    height: 2.5rem;
+    background-color: #000000;
+    opacity: 0.7;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.65rem;
+    padding-right: 1rem;
+    box-sizing: border-box;
+    z-index: 999999;
+}
+
+.header img {
+    height: 1.625rem;
+}
+
+.header .open {
+    width: 3.6rem;
+    height: 1.3rem;
+    background-color: #d0302c;
+    border-radius: 0.2rem;
+    font-size: 0.6rem;
+    line-height: 1.175rem;
+    color: #ffffff;
+    text-align: center;
+}
+
+.video {
+    width: 100%;
+    margin-top: 2.5rem;
+}
+
+.video_info {
+    position: relative;
+    padding-bottom: 1.275rem;
+}
+
+.video_info h2 {
+    font-size: 0.9rem;
+    line-height: 1.425rem;
+    color: #333333;
+    margin-top: 1.475rem;
+    margin-bottom: 0.75rem;
+}
+
+.video_info .time {
+    font-size: 0.6rem;
+    color: #999999;
+    margin-bottom: 0.675rem;
+}
+
+.video_info .video_action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 1rem;
+}
+
+.action_left img {
+    width: 0.7rem;
+}
+
+.action_left span,
+.action_right span {
+    font-size: 0.6rem;
+    color: #999;
+}
+
+.action_right img {
+    width: 0.425rem;
+    margin-left: 0.275rem;
+}
+
+.action_left .like {
+    margin-right: 1.5rem;
+}
+
+.action_left .like img {
+    margin-right: 0.2rem;
+}
+
+.action_left .good img {
+    margin-right: 0.25rem;
+}
+
+.recommend {
+    position: relative;
+    padding-bottom: 0.975rem;
+}
+
+.recommend_list {
+    overflow-x: scroll;
+}
+
+.recommend h2,
+.comment h2 {
+    height: 2.5rem;
+    background-color: #ffffff;
+    line-height: 2.5rem;
+    font-size: 0.8rem;
+    color: #333333;
+}
+
+.recommend_list li {
+    width: 6.85rem;
+    margin-right: 0.275rem;
+    flex-shrink: 0;
+}
+
+.recommend_list li .img {
+    height: 3.9rem;
+    position: relative;
+}
+
+.recommend_list li .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.recommend_list li .img .time {
+    font-size: 0.55rem;
+    color: #ffffff;
+    position: absolute;
+    right: 0.35rem;
+    bottom: 0.325rem;
+}
+
+.recommend_list li p {
+    font-size: 0.7rem;
+    line-height: 1.175rem;
+    color: #333333;
+    margin-top: 0.6rem;
+}
+
+.comment {
+    margin-bottom: 4.2rem;
+}
+
+.comment_list {}
+
+.comment_item {
+    margin-bottom: 1rem;
+}
+
+.item_top {
+    display: flex;
+    justify-content: space-between;
+}
+
+.item_top .item_top_left {
+    display: flex;
+}
+
+.item_top_left img {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+}
+
+.item_top_left p {
+    font-size: 0.7rem;
+    color: #333333;
+}
+
+.item_top_left span {
+    font-size: 0.5rem;
+    color: #999999;
+}
+
+.item_top .item_top_right {
+    display: flex;
+    align-items: center;
+}
+
+.item_top_right img {
+    width: 0.65rem;
+    height: 0.675rem;
+    margin-right: 0.25rem;
+}
+
+.item_top_right span {
+    font-size: 0.6rem;
+    color: #999999;
+}
+
+.item_text {
+    font-size: 0.7rem;
+    line-height: 1.05rem;
+    color: #333333;
+    width: 14.95rem;
+    margin-left: 2.225rem;
+    margin-top: 0.95rem;
+}
+
+.top_left_text {
+    display: flex;
+    flex-direction: column;
+}
+
+.open_comment {
+    position: fixed;
+    width: 17.55rem;
+    height: 2.2rem;
+    border-radius: 0.2rem;
+    border: solid 0.05rem #d0302c;
+    font-size: 0.7rem;
+    color: #d0302c;
+    bottom: 1rem;
+    text-align: center;
+    line-height: 2.2rem;
+    left: 50%;
+    margin-left: calc(-17.55rem / 2);
+    background-color: #fff;
+}

历届学生/18课程/class18/项目/上课项目/在包河H5静态页面/css/public.css

@@ -0,0 +1,27 @@
+/* 公共css */
+.padding {
+    padding-left: 0.575rem;
+    padding-right: 0.6rem;
+}
+
+.flex {
+    display: flex;
+}
+.flex-align-items {
+    display: flex;
+    align-items: center;
+}
+.active {
+    color: #d0302c !important;
+}
+
+.bottom-line::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    background: #ededed;
+    transform: scaleY(0.5);
+}

历届学生/18课程/class18/项目/上课项目/在包河H5静态页面/page/index.html

@@ -0,0 +1,198 @@
+<!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">
+</head>
+
+<body>
+
+
+    <div class="header">
+        <img src="../img/logo.png" alt="">
+        <div class="open">打开</div>
+    </div>
+
+    <img src="../img/videoimg.png" alt="" class="video">
+
+    <div class="video_info padding bottom-line">
+        <h2>香港24小时 | 8月25日发生了什么？暴力局面再次升级</h2>
+        <p class="time">2019-04-30 10:45</p>
+        <div class="video_action">
+            <div class="action_left flex">
+                <div class="like flex-align-items">
+                    <img src="../img/input_icon_collect_small_nor.png" alt="">
+                    <span>收藏</span>
+                </div>
+                <div class="good flex-align-items">
+                    <img src="../img/home_icon_good.png" alt="">
+                    <span>12</span>
+                </div>
+            </div>
+            <div class="action_right flex-align-items">
+                <span>简介</span>
+                <img src="../img/zbh_video_icon_down.png" alt="">
+            </div>
+        </div>
+    </div>
+
+    <div class="recommend padding bottom-line">
+        <h2>相关推荐</h2>
+        <ul class="recommend_list flex">
+            <li>
+                <div class="img">
+                    <img src="../img/videoimg.png" alt="">
+                    <span class="time">03:07</span>
+                </div>
+                <p class="active">一生中总要有个夏天给海岛，我的9天8夜</p>
+            </li>
+            <li>
+                <div class="img">
+                    <img src="../img/videoimg.png" alt="">
+                    <span class="time">03:07</span>
+                </div>
+                <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+            </li>
+            <li>
+                <div class="img">
+                    <img src="../img/videoimg.png" alt="">
+                    <span class="time">03:07</span>
+                </div>
+                <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+            </li>
+            <li>
+                <div class="img">
+                    <img src="../img/videoimg.png" alt="">
+                    <span class="time">03:07</span>
+                </div>
+                <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+            </li>
+            <li>
+                <div class="img">
+                    <img src="../img/videoimg.png" alt="">
+                    <span class="time">03:07</span>
+                </div>
+                <p>一生中总要有个夏天给海岛，我的9天8夜</p>
+            </li>
+        </ul>
+    </div>
+
+    <div class="comment padding">
+        <h2>全部评论</h2>
+        <div class="comment_list">
+            <div class="comment_item">
+                <div class="item_top">
+                    <div class="item_top_left">
+                        <img src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
+                            alt="">
+                        <div class="top_left_text">
+                            <p>呆小瓜</p>
+                            <span>刚刚</span>
+                        </div>
+                    </div>
+                    <div class="item_top_right">
+                        <img src="../img/home_icon_good.png" alt="">
+                        <span>15</span>
+                    </div>
+                </div>
+                <div class="item_text">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</div>
+            </div>
+            <div class="comment_item">
+                <div class="item_top">
+                    <div class="item_top_left">
+                        <img src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
+                            alt="">
+                        <div class="top_left_text">
+                            <p>呆小瓜</p>
+                            <span>刚刚</span>
+                        </div>
+                    </div>
+                    <div class="item_top_right">
+                        <img src="../img/home_icon_good.png" alt="">
+                        <span>15</span>
+                    </div>
+                </div>
+                <div class="item_text">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</div>
+            </div>
+            <div class="comment_item">
+                <div class="item_top">
+                    <div class="item_top_left">
+                        <img src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
+                            alt="">
+                        <div class="top_left_text">
+                            <p>呆小瓜</p>
+                            <span>刚刚</span>
+                        </div>
+                    </div>
+                    <div class="item_top_right">
+                        <img src="../img/home_icon_good.png" alt="">
+                        <span>15</span>
+                    </div>
+                </div>
+                <div class="item_text">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</div>
+            </div>
+            <div class="comment_item">
+                <div class="item_top">
+                    <div class="item_top_left">
+                        <img src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
+                            alt="">
+                        <div class="top_left_text">
+                            <p>呆小瓜</p>
+                            <span>刚刚</span>
+                        </div>
+                    </div>
+                    <div class="item_top_right">
+                        <img src="../img/home_icon_good.png" alt="">
+                        <span>15</span>
+                    </div>
+                </div>
+                <div class="item_text">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</div>
+            </div>
+            <div class="comment_item">
+                <div class="item_top">
+                    <div class="item_top_left">
+                        <img src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
+                            alt="">
+                        <div class="top_left_text">
+                            <p>呆小瓜</p>
+                            <span>刚刚</span>
+                        </div>
+                    </div>
+                    <div class="item_top_right">
+                        <img src="../img/home_icon_good.png" alt="">
+                        <span>15</span>
+                    </div>
+                </div>
+                <div class="item_text">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</div>
+            </div>
+            <div class="comment_item">
+                <div class="item_top">
+                    <div class="item_top_left">
+                        <img src="https://upload.jianshu.io/users/upload_avatars/9988193/fc26c109-1ae6-4327-a298-2def343e9cd8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp"
+                            alt="">
+                        <div class="top_left_text">
+                            <p>呆小瓜</p>
+                            <span>刚刚</span>
+                        </div>
+                    </div>
+                    <div class="item_top_right">
+                        <img src="../img/home_icon_good.png" alt="">
+                        <span>15</span>
+                    </div>
+                </div>
+                <div class="item_text">这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字这里是评论的文字</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="open_comment">打开APP查看全部评论</div>
+
+
+</body>
+
+</html>