first commit

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/css/a.css

@@ -0,0 +1,213 @@
+.header {
+    height: 1rem;
+    background-color: #000000;
+    opacity: 0.7;
+    position: fixed;
+    left: 0;
+    width: 100%;
+    display: flex;
+    padding-left: 0.24rem;
+    padding-right: 0.4rem;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    z-index: 999;
+}
+
+.header img {
+    height: 0.65rem;
+}
+
+.header .open {
+    width: 1.44rem;
+    height: 0.52rem;
+    background-color: #d0302c;
+    border-radius: 0.08rem;
+    font-size: 0.24rem;
+    /* letter-spacing: 0rem; */
+    color: #ffffff;
+    text-align: center;
+    line-height: 0.52rem;
+}
+
+
+
+.content_message {
+    padding-top: 1rem;
+    padding-bottom: 2.03rem;
+    /* flex-direction:column ; */
+}
+
+.content_message .message_deader {
+    padding-top: 0.24rem;
+}
+
+.content_message h2 {
+    font-size: 0.4rem;
+    color: #333333;
+    line-height: 0.54rem;
+    margin-bottom: 0.38rem;
+}
+
+.content_message .message_time {
+	font-size: 0.24rem;
+	color: #999999;
+}
+.content_message .message_time span:nth-child(2) {
+    margin-left:0.18rem ;
+    margin-right: 0.25rem;
+}
+.content_message .message_line{
+	font-size: 0.32rem;
+	line-height: 0.5rem;
+	letter-spacing: 0.008rem;
+	color: #000000;
+}
+
+.open_read{
+	height: 0.88rem;
+    background-color: #d0302c;
+    
+    
+}
+.open_read1{
+	height: 0.88rem;
+    background-color: #d0302c;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 15px;
+    border-radius: 0.08rem;
+	font-size: 0.28rem;
+	line-height: 0.47rem;
+    color: #ffffff;
+    text-align: center;
+    
+}
+.line{
+    content: "";
+    width: cal(100% + 0.23rem+ 0.25rem);
+    height: 0.16rem;
+    background: #f3f3f3;
+    margin-top: -90px;
+}
+.line1{
+    content: "";
+    width: cal(100% + 0.23rem+ 0.25rem);
+    height: 0.16rem;
+    background: #f3f3f3;
+}
+.recommend{
+    height: 1.01rem;
+    padding-top: 0.17rem;
+    margin-bottom: 8.43rem;
+}
+.recommend .list_top{
+	height: 0.31rem;
+	font-size: 0.32rem;
+	line-height: 0.336rem;
+    color: #333333;
+
+}
+.list_type li {
+    display: flex;
+    border-bottom: 0.01rem solid #e5e5e5;
+    padding-bottom: 0.46rem;
+    margin-bottom: 0.32rem;
+}
+.list_type .item_top{
+    flex: 1;
+    margin-right: 0.31rem;
+    display: flex;
+    flex-direction: column;
+}
+.item_top h2{
+	font-size: 0.32rem;
+    line-height: 0.5rem;
+    font-weight: normal;
+    color: #333333;
+    margin-bottom: 0.4rem;
+}
+.item_top span{
+	font-size: 0.24rem;
+	line-height: 0.56rem;
+    color: #999999;
+}
+.list_type .item_img{
+    width: 2.26rem;
+	height: 1.7rem;
+	border-radius: 0.04rem;
+}
+.comment ul{
+    margin-top: 0.3rem;
+}
+.comment ul li{
+    display: flex;
+    margin-bottom: 0.7rem;
+}
+.comment li .userimg{
+    width: 0.7rem;
+    height: 0.7rem;
+    border-radius: 100%;
+    margin-right: 0.2rem;
+}
+.comment li .right{
+    flex: 1;
+}
+.right_t{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+}
+.right_t .right_t_left {
+    font-size: 0.28rem;
+    color: #000000;
+}
+.ritgh_t .ritgh_t_left .user_title {
+	font-size: 0.28rem;
+	color: #000000;
+}
+.ritgh_t .ritgh_t_left .times {
+	font-size: 0.2rem;
+    color: #999999;
+    transform: scale(0.8);
+    margin-left: -4px;
+}
+
+.ritgh_t .ritgh_t_zan {
+    display: flex;
+    align-items: center;
+}
+.ritgh_t .ritgh_t_zan img{
+    width: 0.26rem;
+    height: 0.27rem;
+    margin-right: 0.1rem;
+    
+}
+.ritgh_t .ritgh_t_zan span {
+	font-size: 0.24rem;
+	color: #999999;
+}
+.ritgh_b {
+    margin-top: 0.38rem;
+	font-size: 0.28rem;
+	color: #000000;
+}
+
+
+.openApp {
+    width: 7.02rem;
+	height: 0.88rem;
+	border-radius: 0.08rem;
+    border: solid 0.02rem #d0302c;
+	font-size: 0.28rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #d0302c;
+    position: fixed;
+    left: 50%;
+    bottom: 0.45rem;
+    background: #fff;
+    transform: translate(-50%);
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/css/a1.css

@@ -0,0 +1,77 @@
+.header{
+    width: 100%;
+    height: 0.59rem;
+    display: flex;
+    justify-content: space-around;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    border-width: 0px 0px 0.01rem 0px;
+    border-style: solid;
+    border-color: #e5e5e5;
+    
+}
+.line{
+    width: 100%;
+	height: 0.01rem;
+    background-color: #e5e5e5;
+}
+.video{
+    height: 4.4rem;
+    margin-top: 20px;
+    margin-bottom: -20px;
+}
+.video .video_img img{
+	height: 3.9rem;
+}
+.video .video_p1{
+    width: 1.01rem;
+	height: 0.36rem;
+	background-color: #ff5f13;
+    border-radius: 0.04rem;
+    /* position: fixed;
+    top: 1rem;
+    right: 0.4rem; */
+    transform: translate(290px,-180px);
+}
+.video .video_p2{
+        width: 1.7rem;
+        height: 0.22rem;
+        font-size: 0.22rem;
+        line-height: 0.384rem;
+        color: #ffffff;
+        /* position: fixed;
+        top:4.25rem;
+        right: 0.4rem; */
+        transform: translate(260px,-55px);
+}
+.video .video_p3{
+    width: 100%;
+	font-size: 0.3rem;
+	line-height: 0.45rem;
+	color: #333333;
+    
+}
+.video p:nth-child(1){
+	font-size: 0.24rem;
+	line-height: 0.384rem;
+	color: #ffffff;
+
+}
+.video p:nth-child(2){
+
+}
+.video p:nth-child(3){
+
+}
+.footer{
+	font-size: 0.24rem;
+	line-height: 0.5rem;
+    color: #999999;
+    text-align: center;
+    margin-top: 0.93rem;
+    margin-bottom: 0.89rem;
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/css/clear.css

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

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/css/livecss.css

@@ -0,0 +1,100 @@
+.header{
+    height: 0.95rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background: #fff;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    border-bottom: 0.01rem solid #e5e5e5;
+}
+.header li{
+    color: #999;
+    font-size: 0.26rem;
+    position: relative;
+}
+
+.header .header_li{
+    color: #000 !important;
+}
+.header_li::after{
+    content: "";
+    width: 0.24rem;
+    height: 0.05rem;
+    background: #d0302c;
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    transform: translate(-50%);
+}
+.content{
+    margin-top: 1.25rem;
+    margin-left: 0.23rem;
+    margin-right: 0.25rem;
+    text-align: center;
+
+}   
+.content li .list_top{
+    width: 7.02rem;
+    height: 3.9rem;
+    position: relative;
+}
+.content li .list_top img{
+    width: 100%;
+    height: 100%;
+	border-radius: 0.04rem;
+}
+.live_list{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.living{
+    width: 1.14rem;
+	height: 0.36rem;
+    font-size: 0.24rem;
+    line-height: 0.36rem;
+    color: #ffffff;
+    background-color: #ff5f13;
+    text-align: center;
+    position: absolute;
+    right: 0.14rem;
+    top: 0.14rem;
+}
+.live_people{
+    font-size: 0.22rem;
+    color: #ffffff;
+    position: absolute;
+    right: 0.14rem;
+    bottom: 0.14rem;
+}
+.live_time{
+    background-color: #000000;
+    border-radius: 0.2rem;
+    opacity: 0.7;
+    font-size: 0.22rem;
+    color: #ffffff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%);
+
+}
+.list_bottom{
+    font-size: 0.3rem;
+	line-height: 0.52rem;
+    color: #333333;
+    margin-top: 0.21rem;
+}
+.footer{
+    font-size: 0.24rem;
+	line-height: 0.5rem;
+    color: #999999;
+    text-align: center;
+    margin-top: 0.93rem;
+    margin-bottom: 0.89rem;
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/css/public.css

@@ -0,0 +1,21 @@
+.margin {
+    margin-left: 0.23rem;
+    margin-right : 0.25rem;
+}
+.list_top{
+	height: 1.01rem;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+	font-size: 0.32rem;
+	color: #333333;
+
+}
+.active {
+    font-size: 0.28rem;
+    font-weight: 900;
+}
+.active2{
+    font-size: 0.25rem;
+    color: #999999;
+}

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/js/rem.js

@@ -0,0 +1,13 @@
+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/项目/练习项目/周志威/在包河/page/123.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../js/rem.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/page/index.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size: 50px;">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>新闻资讯</title>
+    <link rel="stylesheet" href="../css/a.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/clear.css">
+</head>
+<body>
+    <div class="header">
+        <img src="../img/logo.png" alt="">
+        <div class="open">打开</div>
+    </div>
+    <div class="content_message margin">
+        <div class="message_header">
+            <h2>
+                暴降17度，合肥天气明起大反转，还有
+                暴雨来袭！
+            </h2>
+        </div>
+        <div class="message_time">
+            <span>2019-10-07</span>
+            <span>08:00</span>     
+            <span>浏览量238.0万</span>
+        </div>
+        <div class="message_line">
+            梦寐以求的小长假就那么过去了
+            上班的心情总是那么沉重
+            上班第一天
+            刚放完假的你
+            是不是这样的
+            
+            不过，值得开心的是
+            晴好天气依旧持续
+            阳光明媚
+            气温也似乎变得放飞自我了
+            预计今天的最高气温会攀升到31℃左右
+            
+            当文字内容过多超过一定高度时这样显示
+            当文字内容过多超过一定高度时这样显示
+            当文字内容过多超过一定高度时这样显示
+            当文字内容过多超过一定高度时这样显示
+            当文字内容过多超过一定高度时这样显示
+            当文字内容过多超过一定高度时这样显示
+            
+            当文字内容过多超过一定高度时1600px
+            会显示展开内容
+            当文字内容过多超过一定高度时1600px
+            会显示展开内容
+        </div>
+        <div class="open_read">
+            <div class="open_read1">打开App阅读全文</div>
+            
+        </div>
+        
+    
+        
+
+    </div>
+    <div class="line"></div>
+
+    <div class="recommend margin">
+        <div class="list_top">相关推荐</div>
+        <ul class="list_type">
+            <li>
+                <div class="item_top">
+                    <h2>
+                        合肥首个铁路主题公园来了！规
+                        模等于两个逍遥津！目测会火，
+                        位置在这
+                    </h2>
+                    <span>2019-10-6</span>
+                </div>
+                <img class="item_img" src="../img/图层7.png" />
+            </li>
+
+            <li>
+                <div class="item_top">
+                    <h2>
+                        暴降17度！合肥天气明起大反转！
+                        还有暴雨来袭
+                    </h2>
+                    <span>17小时前</span>
+                </div>
+                <img class="item_img" src="../img/图层6.png" />
+            </li>
+
+            <li>
+                <div class="item_top">
+                    <h2>
+                        “东风快递，使命必达”！揭秘东
+                        风17常规导弹方队
+                    </h2>
+                    <span>17小时前</span>
+                </div>
+                <img class="item_img" src="../img/图层5.png" />
+            </li>
+        </ul>
+    </div>
+
+    <div class="line1"></div>
+
+    <div class="comment margin">
+        <div class="list_top">全部评论</div>
+        <ul>
+            <li>
+                <img class="userimg" src="../img/图层9.png" alt="">
+                <div class="ritgh">
+                    <div class="ritgh_t">
+                        <div class="ritgh_t_left">
+                            <p class="user_title">呆小瓜</p>
+                            <div class="times">刚刚</div>
+                        </div>
+                        <div class="ritgh_t_zan">
+                            <img src="../img//home_icon_good.png" alt="">
+                            <span>15</span>
+                        </div>
+                    </div>
+                    <div class="ritgh_b">
+                        这里是评论的文字这里是评论的文字这里是评论
+                        的文字这里是评论的文字这里是评论的文字这里
+                        是评论的文字这里是评论的文字
+                    </div>
+                </div>
+            </li>
+        </ul>
+    <!-- <div class="open">打开App</div> -->
+    <div class="openApp">打开App</div>
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/page/index2.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size: 50px;">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>直播融媒直播</title>
+    <link rel="stylesheet" href="../css/clear.css">
+    <link rel="stylesheet" href="../css/public.css">
+    <link rel="stylesheet" href="../css/a1.css">
+</head>
+<body>
+    <ul class="header">
+        <li class="active2">
+            包河radio
+        </li>
+        <li class="active2">
+            包河TV
+        </li>
+        <li class="active ">
+            融媒直播
+        </li>
+        
+    </ul>
+
+    
+
+    <div class="video margin">
+        <ul >
+            <div class="line"></div>
+            <li>
+                <img class="video_img" src="../img/1.png" alt="">
+            </li>
+            <li class="video_p1">
+                <p>正在直播</p>
+            </li>
+            <li class="video_p2">
+                <p>342252人在看</p>
+            </li>
+            <li class="video_p3">
+                “文字鬼才”马伯庸新书发布座谈会(标题一行就一行)
+            </li>
+    
+            <li>
+                <img class="video_img" src="../img/2.png" alt="">
+            </li>
+            <li class="video_p1">
+                <p>正在直播</p>
+            </li>
+            <li class="video_p2">
+                <p>342252人在看</p>
+            </li>
+            <li class="video_p3">
+                “文字鬼才”马伯庸新书发布座谈会(标题一行就一行)
+            </li>
+            <li>
+                <img class="video_img" src="../img/3.png" alt="">
+            </li>
+            <li class="video_p1">
+                <p>正在直播</p>
+            </li>
+            <li class="video_p2">
+                <p>342252人在看</p>
+            </li>
+            <li class="video_p3">
+                九枚玉和您畅谈陪读生活的酸辣苦涩（字体如果两
+                行就展示两行）
+            </li>
+
+            <div class="footer">
+                已显示全部内容
+            </div>
+        </ul>
+    </div>
+    
+    
+    
+    
+</body>
+</html>

历届学生/18课程/class18_2/项目/练习项目/周志威/在包河/page/live.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size: 50px;">
+<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/livecss.css">
+    <script src="../js/rem.js"></script>
+</head>
+<body>
+    <ul class="header">
+        <li>
+            包河radio
+        </li>
+        <li>包河TV</li>
+        <li class="header_li">融媒直播</li>
+    </ul>
+    <div class="content">
+        <ul class="live_list">
+            <li>
+                <div class="list_top">
+                    <img src="../img/2.png" alt="">
+                    <p class="living">正在直播</p>
+                    <p class="live_people">342252人在看</p>
+                    <p class="live_time">直播时间：07-23 16:00</p>
+                </div>
+                <p class="list_bottom">
+                    “文字鬼才”马伯庸新书发布座谈会(标题一行就一行)
+                </p>
+            </li>
+            <li>
+                <div class="list_top">
+                    <img src="../img/2.png" alt="">
+                    <p class="living">正在直播</p>
+                    <p class="live_people">342252人在看</p>
+                    <p class="live_time">直播时间：07-23 16:00</p>
+                </div>
+                <p class="list_bottom">
+                    “文字鬼才”马伯庸新书发布座谈会(标题一行就一行)
+                </p>
+            </li>
+        </ul>
+    </div>
+    <div class="footer">
+        已显示全部内容
+    </div>
+</body>
+</html>