first commit

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/4.27/7/css/clear.css

@@ -0,0 +1,18 @@
+body,ul,p,h1,h2,h3,h4,h5,h6,a {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}
+
+body {
+    background: #f3f4f7;
+}
+html {
+    /* font-size: 50px; */
+    line-height: 1;
+}
+
+body {
+    font-size: 0;
+}

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/4.27/7/css/index.css

@@ -0,0 +1,211 @@
+.header{
+    position: fixed;
+    top: 0.1rem;
+    left: 0.24rem;
+    z-index: 9999;
+    box-sizing: border-box;
+    width: 4.52rem;
+	height: 0.8rem;
+	background-color: #000000;
+	border-radius: 0.4rem;
+	opacity: 0.73;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.header .header_img{
+    width: 0.7rem;
+	height: 0.7rem;
+    margin-left: 0.07rem;
+    margin-right: 0.09rem;
+}
+.header .header_div {
+    margin-right: 0.13rem;
+}
+.header .header_div .header_div_zi{
+    font-family: PingFangSC-Regular;
+	font-size: 0.26rem;
+	color: #ffffff;
+}
+.header .header_div .header_div_zi1{
+    font-family: PingFangSC-Regular;
+	font-size: 0.22rem;
+	color: #ffffff;
+}
+.header .header_div1{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.34rem;
+    width: 1.05rem;
+	height: 0.45rem;
+    background-color: red;
+    border-radius: 0.20rem;
+}
+.header .header_div1 .header_div1_img{
+    width: 0.34rem;
+	height: 0.24rem;
+}
+.header .header_div1 .header_div1_zi{
+    font-family: PingFang-SC-Regular;
+	font-size: 0.24rem;
+	letter-spacing: 0.019rem;
+	color: #ffffff;
+}
+
+/**********************************/
+.content{
+    display: flex;
+    background-size: cover;
+    background-color: aquamarine;
+    position: relative;
+}
+.content .content_img{
+    width: 7.5rem;
+	height: 13.34rem;
+    flex: 1;
+}
+
+.comments{
+    position: absolute;
+    bottom: 5rem;
+    left: 0.21rem;
+}
+.comments .comments_li{
+    width: 3.5rem;
+	height: 0.5rem;
+	background-color: #4799ee;
+	border-radius: 0.1rem;
+	opacity: 0.85;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0.13rem 0.18rem 0.12rem 0.17rem;
+    margin-bottom: 0.31rem;
+}
+.comments .comments_li .comments_li_img{
+    width: 0.34rem;
+	height: 0.24rem;
+    margin-right: 0.14rem;
+}
+.comments .comments_li .comments_li_zi{
+    font-family: PingFang-SC-Medium;
+	font-size: 0.26rem;
+	color: #ffffff;
+    margin-right: 0.06rem;
+}
+.comments .comments_li .comments_li_zi1{
+    font-family: PingFang-SC-Medium;
+	font-size: 0.26rem;
+	color: #ffffff;
+}
+.comments .comments_li1{
+    width: 3.24rem;
+	height: 0.5rem;
+	background-color: #000000;
+	border-radius: 0.25rem;
+	opacity: 0.6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0.13rem;
+}
+.comments .comments_li1 .comments_li1_zi{
+    font-family: PingFangSC-Regular;
+	font-size: 0.26rem;
+	color: #4799ee;
+}
+.comments .comments_li1 .comments_li1_zi1{
+    font-family: PingFangSC-Regular;
+	font-size: 0.26rem;
+	color: #eceded;
+}
+/*****************************************************/
+.footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+    box-sizing: border-box;
+}
+.footer .fig{
+    padding: 0.25rem 0.3rem 0.1rem 0.3rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.05rem;
+    
+}
+.footer .fig .fig_li{
+    margin-right: 0.1rem;
+    width: 1.65rem;
+	height: 2.36rem;
+	background-color: #ffffff;
+	box-shadow: 0rem 0rem 0.29rem 0rem 
+		rgba(150, 150, 150, 0.3);
+	border-radius: 0.1rem;
+	opacity: 0.9;
+}
+.footer .fig .fig_li .fig_li_img{
+    width: 1.65rem;
+	height: 1.65rem;
+	background-color: #ffffff;
+	border-radius: 0.1rem 0.1rem 0rem 0rem;
+}
+.footer .fig .fig_li .fig_li_zi{
+    font-family: PingFang-SC-Medium;
+	font-size: 0.2rem;
+	letter-spacing: 0.01rem;
+	color: #000000;
+    margin-left: 0.13rem;
+    zoom: 0.78;
+    margin-top: 0.05rem;
+}
+.footer .fig .fig_li .fig_li_zi1{
+    font-family: PingFang-SC-Bold;
+	font-size: 0.2rem;
+	letter-spacing: 0.01rem;
+	color: #ea4e3d;
+    margin-left: 0.13rem;
+    margin-top: 0.17rem;
+    zoom: 0.78;
+}
+/*********************************************/
+.press{
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    padding: 0 0.35rem;
+}
+.press .press_text{
+    width: 3.59rem;
+	height: 0.62rem;
+	background-color: #000000;
+	border-radius: 0.31rem;
+	opacity: 0.4;
+    padding-left: 0.27rem;
+    box-sizing: border-box;
+    margin-left: 0.1rem;
+    margin-right: 0.29rem;
+}
+.press .press_li{
+    width: 0.63rem;
+	height: 0.63rem;
+	background-color: #8b8a8a;
+	opacity: 0.8;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.press .press_li .press_img{
+    width: 0.34rem;
+	height: 0.34rem;
+}
+
+.press li:nth-child(4){
+    margin: 0 0.15rem;
+}
+.press li:nth-child(1){
+    background-color: #4799ee;
+}

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/4.27/7/css/public.css

@@ -0,0 +1,25 @@
+.left {
+    float: left;
+}
+
+.white {
+    background: white;
+}
+
+.right {
+    float: right;
+}
+
+.hidden{
+    overflow: hidden;
+}
+
+.xcenter {
+    text-align: center;
+}
+.relative {
+    position: relative;
+}
+.absolute {
+    position: absolute;
+}

历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/4.27/7/index.html

@@ -0,0 +1,93 @@
+<!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="../1/js/rem.js"></script>
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <div class="content">
+        <div class="header">
+            <img class="header_img" src="./img/2.png">
+            <div class="header_div">
+                <div class="header_div_zi">昵称 | ID：12345</div>
+                <div class="header_div_zi1">7455观看| 首尔市</div>
+            </div>
+            <div class="header_div1">
+                <img class="header_div1_img" src="./img/3.png">
+                <div class="header_div1_zi">关注</div>
+            </div>
+        </div>
+        <ul class="comments">
+            <li class="comments_li">
+                <img class="comments_li_img" src="./img/3.png">
+                <div class="comments_li_zi">我是嘟嘟嘴 </div>
+                <div class="comments_li_zi1">关注了主播</div>
+            </li>
+            <li class="comments_li1">
+                <div class="comments_li1_zi">小飞仙：</div>
+                <div class="comments_li1_zi1">我下单啦查看下</div>
+            </li>
+            <li class="comments_li1">
+                <div class="comments_li1_zi">小飞仙：</div>
+                <div class="comments_li1_zi1">我下单啦查看下</div>
+            </li>
+            <li class="comments_li1">
+                <div class="comments_li1_zi">小飞仙：</div>
+                <div class="comments_li1_zi1">我下单啦查看下</div>
+            </li>
+        </ul>
+        <img src="./img/1.png" class="content_img">
+
+        <div class="footer">
+            <ul class="fig">
+                <li class="fig_li">
+                    <img class="fig_li_img" src="./img/5.png">
+                    <div class="fig_li_zi">品牌经典多…</div>
+                    <div class="fig_li_zi1">￥160.00</div>
+                </li>
+                <li class="fig_li">
+                    <img class="fig_li_img" src="./img/5.png">
+                    <div class="fig_li_zi">品牌经典多…</div>
+                    <div class="fig_li_zi1">￥160.00</div>
+                </li>
+                <li class="fig_li">
+                    <img class="fig_li_img" src="./img/5.png">
+                    <div class="fig_li_zi">品牌经典多…</div>
+                    <div class="fig_li_zi1">￥160.00</div>
+                </li>
+                <li class="fig_li">
+                    <img class="fig_li_img" src="./img/5.png">
+                    <div class="fig_li_zi">品牌经典多…</div>
+                    <div class="fig_li_zi1">￥160.00</div>
+                </li>
+            </ul>
+            <ul class="press">
+                <li class="press_li">
+                    <img class="press_img" src="./img/6.png">
+                </li>
+                <li>
+                    <input type="text" class="press_text" placeholder="说些什么...">
+                </li>
+                <li class="press_li">
+                    <img class="press_img" src="./img/7.png">
+                </li>
+                <li class="press_li">
+                    <img class="press_img" src="./img/8.png">
+                </li>
+                <li class="press_li">
+                    <img class="press_img" src="./img/9.png">
+                </li>
+            </ul>
+        </div>
+    </div>
+</body>
+
+</html>