first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(64)/css/clear.css

@@ -0,0 +1,21 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input {
+    outline: none;
+    border: none;
+    padding: 0;
+}
+body{
+    background: #f3f2f7;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(64)/css/index.css

@@ -0,0 +1,243 @@
+
+.header{/*在父元素上加margin左右超过父容器*/
+    font-size: 0;
+    width: 100%;
+    display: flex;
+    align-items:center;
+    justify-content:space-between;
+    padding-top: 0.42rem;
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: #f3f2f7;
+    padding-bottom: 5px;
+}
+.left{
+    display: flex;
+    align-items:center;
+    padding-left: 0.24rem;
+}
+.left .left_1{
+    width: 0.2rem;
+	height: 0.38rem;
+    padding-right: 0.3rem;
+}
+.left .left_2{
+    width: 0.48rem;
+	height: 0.48rem;
+}
+.middle{
+    display: flex;
+    align-items:center;
+}
+.middle span{
+    font-size: 0.28rem;
+    color: #000000;
+    padding-right: 0.12rem;
+}
+.middle img{
+    width: 0.78rem;
+	height: 0.32rem;
+}
+.right{
+    display: flex;
+    align-items:center;
+}
+.right .right_1{
+    width: 0.42rem;
+	height: 0.35rem;
+    padding-right: 0.38rem;
+}
+.right_wz{
+    position: relative;
+}
+.right_wz span{
+    font-size: 0.2rem;
+    color: #ffffff;
+    width: 0.25rem;
+	height: 0.25rem;
+	background-color: #ea4e3d;
+    border-radius: 100%;
+    position: absolute;
+    text-align: center;
+    line-height: 0.25rem;
+    top: -0.14rem;
+    right: 0.24rem;
+}
+.right .right_2{
+    width: 0.37rem;
+	height: 0.36rem;
+    padding-right: 0.25rem;
+}
+
+/*中间*/
+.content{
+    background: #f3f2f7;/*背景色*/
+    margin-top: 0.9rem;
+    font-size: 0;
+    margin-left: 0.24rem;
+    margin-right: 0.24rem;
+    
+}
+/*顶部文字布局*/
+.content_top{
+    margin-top: 1.1rem;/*数值过大*/
+    background: url(../img/bj.png);
+    width: 7.02rem;
+	height: 1.8rem;
+}
+.content_wz{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+}
+.content_wz li{
+    text-align: center;
+    padding-left: 0.37rem;
+    padding-right: 0.37rem;
+}
+.content_wz_1{
+    font-size: 0.34rem;
+    color: #ffffff;
+}
+.content_wz_2{
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+/*直播*/
+.live{
+        width: 7.02rem;
+        height: 0.78rem;
+        background-color: #ffffff;
+        border-radius: 0.2rem;
+        margin-top: 0.24rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 0.19rem;
+        padding-right: 0.17rem;
+        box-sizing: border-box;
+    }
+.live_left{
+    display: flex;
+    align-items: center;
+}
+.live_left img{
+    width: 0.41rem;
+	height: 0.39rem;
+    padding-right: 0.09rem;
+    
+}
+.live_left span{
+    font-size: 0.32rem;
+    color: #1a1a1a;
+}
+.live_right{
+    display: flex;
+    align-items: center;
+}
+.live_right img{
+    width: 0.12rem;
+	height: 0.21rem;
+}
+.live_right span{
+    font-size: 0.28rem;
+    color: #0079f1;
+    padding-right: 0.11rem;
+}
+/*店铺部分*/
+.shop{/*我h2没有话div，没有设置居中挤下去的*/
+    width: 7.02rem;
+	height: 2.75rem;
+	background-color: #ffffff;
+	border-radius: 0.2rem;
+    margin-top: 0.24rem;
+
+}
+.shop h2{
+    font-size: 0.3rem;
+    color: #010101;
+    padding-top: 0.34rem;
+    padding-left: 0.34rem;
+}
+
+.shop_1{
+    display: flex;
+    align-items: center;
+    padding-top: 0.37rem;
+    justify-content: space-between;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+.shop_1 li{
+    text-align: center;
+}
+.shop_1 li img{/*图片尺寸问题*/
+    width: 0.57rem;
+	height: 0.43rem;
+    margin-bottom: 0.3rem;
+}
+.shop_1 .yyzh{
+    width: 0.58rem;
+	height: 0.56rem;
+    margin-bottom: 0.15rem;
+}
+.shop_1 .mz{
+    font-size: 0.24rem;
+    color: #333333;
+}
+.shop_1 .yzz{
+    font-size: 0.22rem;
+    color: #abb1bc;
+
+}
+.shop_1 .wzz{
+    color: #e93323;
+    font-size: 0.22rem;
+}
+/*管理部分*/
+.manage{
+    width: 7.02rem;
+    background-color: #ffffff;
+	border-radius: 0.2rem;
+    margin-top: 0.23rem;
+}
+.manage h2{
+    font-size: 0.3rem;
+    color: #010101;
+    padding-top: 0.36rem;
+    padding-left: 0.34rem;
+}
+.layout{
+display: flex;
+margin-top: 0.54rem;
+flex-wrap:wrap
+}
+ .layout li{
+    text-align: center;
+    padding-left: 0.34rem;
+    padding-bottom: 0.31rem;
+    width: 0.96rem;/*设置宽度不知道对不对*/
+}
+.layout li p{
+    font-size: 0.24rem;
+    color: #333333;
+    margin-top: 0.36rem;
+}
+/*店铺营销*/
+.market{
+    width: 7.02rem;
+    background-color: #ffffff;
+	border-radius: 0.2rem;
+    margin-top: 0.24rem;
+}
+.market h2{
+    padding-left: 0.34rem;
+	padding-top: 0.34rem;
+    font-size: 0.3rem;
+    color: #010101;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(64)/index.html

@@ -0,0 +1,168 @@
+<!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="./js/rem.js"></script>
+    <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">
+        <div class="left">
+            <!--左-->
+            <img class="left_1" src="./img/left.png" alt="">
+            <img class="left_2" src="./img/urzr.png" alt="">
+        </div>
+        <div class="middle">
+            <!--中-->
+            <span>新手体验店</span>
+            <img src="./img/ing.png" alt="">
+        </div>
+        <div class="right">
+            <!--右-->
+            <div class="right_wz">
+                <!--文子-->
+                <img class="right_1" src="./img/xinxi.png" alt="">
+                <span>1</span>
+            </div>
+            <img class="right_2" src="./img/sz.png" alt="">
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_top"><!--上半部分-->
+            
+            <ul class="content_wz">
+                <li>
+                    <p class="content_wz_1">0</p>
+                    <p class="content_wz_2">关注人数</p>
+                </li>
+                <li>
+                    <p class="content_wz_1">1</p>
+                    <p class="content_wz_2">商品数</p>
+
+                </li>
+                <li>
+                    <p class="content_wz_1">0</p>
+                    <p class="content_wz_2">粉丝数</p>
+
+                </li>
+                <li>
+                    <p class="content_wz_1">0</p>
+                    <p class="content_wz_2">浏览量</p>
+
+                </li>
+            </ul>
+        </div>
+        <div class="live"><!--直播部分-->
+            <div class="live_left">
+                <img src="./img/live.png" alt="">
+                <span>我要直播</span>
+            </div>
+            <div class="live_right">
+                <span>去开启直播</span>
+                <img src="./img/right.png" alt="">
+            </div>
+
+        </div>
+        <div class="shop"><!--店铺部分-->
+            <h2>店铺资质认证</h2>
+            <ul class="shop_1">
+                <li>
+                    <img class="yyzh" src="./img/yyzh.png" alt="">
+                    <p class="mz">营业执照</p>
+                    <p class="yzz">已认证</p>
+                </li>
+                <li>
+                    <img src="./img/sfz.png" alt="">
+                    <p class="mz">身份证</p>
+                    <p class="wzz">未认证</p>
+                </li>
+                <li>
+                    <img src="./img/yhk.png" alt="">
+                    <p class="mz">银行卡</p>
+                    <p class="wzz">未认证</p>
+                </li>
+            </ul>
+        </div>
+        <div class="manage"><!--管理部分-->
+            <h2>店铺管理</h2>
+            <ul class="layout">
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>商品管理</p>
+                </li>
+            
+            </ul>
+        </div>
+        <div class="market"><!--店铺营销-->
+            <h2>店铺营销</h2>
+            <ul class="layout">
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>优惠券</p>
+                </li>
+                <li>
+                    <img src="./img/shop_1.png" alt="">
+                    <p>优惠券</p>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+</body>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(64)/js/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";
+}