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,107 @@
+.header {
+           
+    padding-top: 1rem;
+    border: 1px solid #e5e5e5;
+
+}
+
+.header ul {
+
+    height: 0.59rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  
+    top: 0;
+    left: 0;
+    z-index: 999;
+    position: relative;
+    
+}
+
+
+.header ul li {
+
+
+    font-size: 0.3rem;
+
+    color: #333333;
+}
+.header ul :nth-child(1){
+    padding-left: 0.57rem;
+
+}
+.header ul :nth-child(3){
+    padding-right: 0.63rem;
+   
+
+
+}
+
+.header ul  ::after{
+    content: "";
+    width: 0.5rem;
+    height: 0.1em;rem;
+    position: absolute;
+    background:#b80e0e ;
+    transform: scaleY(0.5);
+    display: inline-block;
+   
+
+    left: 80%; 
+    bottom: 0;
+
+}
+
+.pa{
+    padding-left:0.21rem ;
+    padding-right: 0.23rem;
+}
+.content{
+    margin-top: 1rem;
+}
+.content .title{
+}
+.content .title .tupian{
+    height: 3.9rem;
+    position: relative;
+
+}
+.content .title .tupian .zhibo{
+    width: 1.14rem;
+	height: 0.36rem;
+	background-color: #ff5f13;
+	border-radius: 0.04rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0.14rem;
+    right: 0.14rem;
+}
+.content .title .tupian .zhibo span{
+	font-size: 0.24rem;
+	color: #ffffff;
+}
+
+.content .title .tupian  img{
+    width: 7.02rem;
+	height: 3.9rem;
+  
+}
+
+.content .title .tupian .number {
+	font-size: 0.22rem;
+	color: #ffffff;
+    position: absolute;
+    right: 0.12rem;
+    bottom: 0.13rem;
+}
+
+.content .title .title_text{
+    
+    font-size: 0.28rem;
+	color: #333333;
+    margin-top: 0.21rem;
+   
+}

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/自己练习/融媒直播/index.html

@@ -0,0 +1,43 @@
+<!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">
+        <ul>
+            <li >包河radio</li>
+            <li>包河TV</li>
+            <li >融创媒体</li>
+        </ul>
+    </div>
+    <ul class="content pa">
+        <li class="title">
+            <div class="tupian">
+                <div class="zhibo">
+                    <span>正在直播</span>
+                </div>
+                <img src="./img/-slice-.png" alt="">
+                <div class="number">
+                    342252人在看
+                </div>
+            </div>
+            <div class="title_text">
+              "文字鬼才"马伯庸新书发布座谈会(标题一行就一行)
+            </div>
+        </li>
+    </ul>
+    <div class="footer"></div>
+
+</body>S
+
+</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";
+}