first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/133.html
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/133.html
@@ -0,0 +1,126 @@
+<!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="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/133.css">
+</head>
+
+<body>
+    <div class="header">
+        <div class="screach">
+            <img class="left" src="./img/133/left.png" alt="">
+            <div>
+                <img src="./img/133/screach.png" alt="">
+                <input type="text" placeholder="搜索我的订单">
+            </div>
+        </div>
+
+        <ul class="menu">
+            <li class="active">全部</li>
+            <li>待付款</li>
+            <li>待发货</li>
+            <li>待收货</li>
+            <li>待评价</li>
+            <li>待评价</li>
+            <li>售后</li>
+        </ul>
+    </div>
+
+
+    <div class="content">
+        <ul>
+            <li>
+                <div class="title">
+                    <div>
+                        <img src="./img/133/home.png" alt="">
+                        <span>面包自营</span>
+                        <img src="./img/133/right.png" alt="">
+                    </div>
+                    <span class="comment">待评价</span>
+                </div>
+                <ul class="product">
+                    <li>
+                        <img src="./img/133/porduct1.png" alt="">
+                        <div class="name">
+                            <span>包子芝麻小蛋糕美味香脆新品正品包邮</span>
+                            <span>独立包装+原味</span>
+                        </div>
+                        <div class="price">
+                            <span>￥38.8</span>
+                            <span>X1</span>
+                        </div>
+                    </li>
+                    <li>
+                        <img src="./img/133/porduct1.png" alt="">
+                        <div class="name">
+                            <span>包子奶酪蛋糕美味新品正品
+                                包邮发货</span>
+                            <span>整箱x24+奶酪</span>
+                        </div>
+                        <div class="price">
+                            <span>￥61.2</span>
+                            <span>X1</span>
+                        </div>
+                    </li>
+                </ul>
+                <div class="money">
+                    <span>共2件商品，合计：￥100.00 (含运费￥0.00)</span>
+                    <div class="bottom">
+                        <div class="delete">
+                            <span>删除订单</span>
+                        </div>
+                        <div class="pingjia">
+                            <span>评价</span>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="title">
+                    <div>
+                        <img src="./img/133/home.png" alt="">
+                        <span>面包自营</span>
+                        <img src="./img/133/right.png" alt="">
+                    </div>
+                    <span class="comment">已完成</span>
+                </div>
+                <ul class="product">
+                    <li>
+                        <img src="./img/133/porduct1.png" alt="">
+                        <div class="name">
+                            <span>包子香脆牛角酥美味香脆新品
+                                当天发货</span>
+                            <span>包装+芝麻</span>
+                        </div>
+                        <div class="price">
+                            <span>￥30.0</span>
+                            <span>X3</span>
+                        </div>
+                    </li>
+                </ul>
+                <div class="money">
+                    <span>共2件商品，合计：￥100.00 (含运费￥0.00)</span>
+                    <div class="bottom">
+                        <div class="delete">
+                            <span>删除订单</span>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+
+
+
+    <div class="fooder"></div>
+</body>
+
+</html>
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/22.html
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/22.html
@@ -0,0 +1,192 @@
+<!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>22</title>
+    <script src="./rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/22.css">
+</head>
+
+<body>
+    <div class="header line">
+        <img src="./img/22/fanhui.png" alt="">
+        <div>填写订单</div>
+    </div>
+
+    <div class="centent">
+        <div class="address">
+            <div class="left">
+                <div class="xinxi">
+                    <span class="name">张晓明</span>
+                    <span class="number">186****0019</span>
+                </div>
+                <div class="dizhi">上海市黄浦区中山南路128号千古美城1楼1210室</div>
+            </div>
+            <img src="./img/22/right1.png" alt="">
+        </div>
+
+
+        <div class="pay">
+            <span class="left">选择支付方式</span>
+            <div class="right">
+                <span>在线支付</span>
+                <img src="./img/22/three drop.png " alt="">
+            </div>
+        </div>
+        <ul class="store">
+            <li>
+                <div class="shang">
+                    <!-- 店铺名 -->
+                    <div class="name line">
+                        <img class="home" src="./img/22/home.png" alt="">
+                        <span>路易斯女装旗舰店</span>
+                        <img class="more" src="./img/22/right2.png" alt="">
+                    </div>
+                    <!-- 商品信息 -->
+                    <ul class="goods line">
+                        <li>
+                            <img src="./img/22/product.png" alt="">
+                            <div class="right">
+                                <div class="top">
+                                    真丝连衣裙2019春夏新款
+                                    杭州大牌气质修……
+                                </div>
+                                <div class="middle">
+                                    <span class="color">颜色：黑白</span>
+                                    <span>尺码：L</span>
+                                </div>
+                                <div class="bottom">
+                                    <div class="price">
+                                        <span>￥</span>
+                                        <span>160.</span>
+                                        <span>00</span>
+                                    </div>
+                                    <span>X1</span>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="xia">
+                    <!-- 订单备注 -->
+                    <div class="remarks line">
+                        <span>订单备注</span>
+                        <input type="text" placeholder="有什么想对商家留言的可以在这里说">
+                    </div>
+                    <!-- 优惠抵用 -->
+                    <ul class="discount line">
+                        <li>
+                            <span>优惠抵用</span>
+                            <span class="five">-￥5</span>
+                        </li>
+                        <li>
+                            <span>快递费用</span>
+                            <span>免费包邮</span>
+                        </li>
+                    </ul>
+                    <!-- 商品金额 -->
+                    <div class="price">
+                        <span>商品金额</span>
+                        <span>￥155.00</span>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="shang">
+                    <!-- 店铺名 -->
+                    <div class="name line">
+                        <img class="home" src="./img/22/home.png" alt="">
+                        <span>路易斯女装旗舰店</span>
+                        <img class="more" src="./img/22/right2.png" alt="">
+                    </div>
+                    <!-- 商品信息 -->
+                    <ul class="goods line">
+                        <li>
+                            <img src="./img/22/product.png" alt="">
+                            <div class="right">
+                                <div class="top">
+                                    真丝连衣裙2019春夏新款
+                                    杭州大牌气质修……
+                                </div>
+                                <div class="middle">
+                                    <span class="color">颜色：黑白</span>
+                                    <span>尺码：L</span>
+                                </div>
+                                <div class="bottom">
+                                    <div class="price">
+                                        <span>￥</span>
+                                        <span>160.</span>
+                                        <span>00</span>
+                                    </div>
+                                    <span>X1</span>
+                                </div>
+                            </div>
+                        </li>
+                        <li>
+                            <img src="./img/22/product.png" alt="">
+                            <div class="right">
+                                <div class="top">
+                                    真丝连衣裙2019春夏新款
+                                    杭州大牌气质修……
+                                </div>
+                                <div class="middle">
+                                    <span class="color">颜色：黑白</span>
+                                    <span>尺码：L</span>
+                                </div>
+                                <div class="bottom">
+                                    <div class="price">
+                                        <span>￥</span>
+                                        <span>160.</span>
+                                        <span>00</span>
+                                    </div>
+                                    <span>X1</span>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="xia">
+                    <!-- 订单备注 -->
+                    <div class="remarks line">
+                        <span>订单备注</span>
+                        <input type="text" placeholder="有什么想对商家留言的可以在这里说">
+                    </div>
+                    <!-- 优惠抵用 -->
+                    <ul class="discount line">
+                        <li>
+                            <span>优惠抵用</span>
+                            <span class="five">-￥5</span>
+                        </li>
+                        <li>
+                            <span>快递费用</span>
+                            <span>免费包邮</span>
+                        </li>
+                    </ul>
+                    <!-- 商品金额 -->
+                    <div class="price">
+                        <span>商品金额</span>
+                        <span>￥315.00</span>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+
+    <div class="footer">
+        <span>共3件,</span>
+        <span>合计：</span>
+        <span>¥</span>
+        <span>5999.00</span>
+        <div>
+            <span>结算(2)</span>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/39.html
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/39.html
@@ -0,0 +1,108 @@
+<!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>39</title>
+    <script src="./rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/39.css">
+</head>
+
+<body>
+
+    <div class="header">
+        <img class="picture" src="./img/39/scan.png" alt="">
+        <div class="middle">
+            <ul class="font">
+                <li class="active">推荐</li>
+                <li>关注</li>
+                <li>直播</li>
+            </ul>
+        </div>
+        <img class="picture" src="./img/39/searc.png" alt="">
+    </div>
+
+
+
+    <div class="content">
+        <div class="left">
+            <div class="top">
+                <img src="./img/39/home.png" alt="">
+                <span>美林美妆合肥店</span>
+                <span>>7KM</span>
+            </div>
+            <div class="middle">
+                <img class="tupian" src="./img/39/tupian.png" alt="">
+                <div class="right">
+                    <span>夏季网纱半身裙中长款纱……</span>
+                    <div class="xia">
+                        <div>
+                            <div class="price">
+                                <span>¥68.00</span>
+                                <div class="red">
+                                    <span>精选</span>
+                                </div>
+                            </div>
+                            <span>已卖1020</span>
+                        </div>
+                        <img class="shop" src="./img/39/shop car.png" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="bottom">
+                <img src="./img/39/yinfu.png" alt="">
+                <span>你像花儿一样美（DJ）版</span>
+            </div>
+        </div>
+        <div class="user">
+            <div class="touxiang">
+                <img src="./img/39/touxiang.png" alt="">
+                <img src="./img/39/plus.png" alt="">
+            </div>
+            <ul>
+                <li>
+                    <a href="">
+                        <img src="./img/39/like.png" alt="">
+                        <span>71.1W</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <img src="./img/39/share.png" alt="">
+                        <span>分享</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <img src="./img/39/comment.png" alt="">
+                        <span>评论</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        <img src="./img/39/shop.png" alt="">
+                        <span>购物袋</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+
+
+
+    <ul class="fooder">
+        <li class="active">首页</li>
+        <li>好友</li>
+        <li>圈子</li>
+        <li>购物车</li>
+        <li>我的</li>
+    </ul>
+</body>
+
+</html>
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/46.html
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/46.html
@@ -0,0 +1,223 @@
+<!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>46</title>
+    <script src="./rem.js"></script>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/46.css">
+</head>
+
+<body>
+    <div class="header">
+        <div></div>
+        <ul>
+            <li>圈子</li>
+            <li class="active">附近</li>
+        </ul>
+        <img src="./img/46/camer.png" alt="">
+    </div>
+    <div class="content">
+        <img class="background" src="./img/46/background.png" alt="">
+        <ul class="main">
+            <li>
+                <div class="left">
+                    <img src="./img/46/shoppictu.png" alt="">
+                    <img src="./img/46/home.png" alt="">
+                </div>
+                <div class="right">
+                    <div>
+                        <!-- 店铺名 -->
+                        <div class="name">
+                            <span>护肤品专卖店</span>
+                            <span>>200km</span>
+                        </div>
+                        <p>我亲测好用我亲测好用我亲测好用我亲测好用我亲测好
+                            用我亲测好用我亲测好用我亲测好用我亲测好用我亲好
+                            用我亲测我亲测我亲测我亲测</p>
+                        <!-- 三个图片 -->
+                        <ul class="goods">
+                            <li>
+                                <div class="tupian">
+                                    <img src="./img/46/picture.png" alt="">
+                                    <img src="./img/46/black.png" alt="">
+                                </div>
+                                <div class="price">
+                                    <img src="./img/46/money.png" alt="">
+                                    <div>
+                                        <span>289.</span>
+                                        <span>00</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="tupian">
+                                    <img src="./img/46/picture.png" alt="">
+                                    <img src="./img/46/black.png" alt="">
+                                </div>
+                                <div class="price">
+                                    <img src="./img/46/money.png" alt="">
+                                    <div>
+                                        <span>289.</span>
+                                        <span>00</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="tupian">
+                                    <img src="./img/46/picture.png" alt="">
+                                    <img src="./img/46/black.png" alt="">
+                                </div>
+                                <div class="price">
+                                    <img src="./img/46/money.png" alt="">
+                                    <div>
+                                        <span>289.</span>
+                                        <span>00</span>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="under">
+                        <!-- 时间 -->
+                        <div class="hour">
+                            <div class="time">
+                                <span>3 </span>
+                                <span>分钟前</span>
+                            </div>
+                            <div class="drop">
+                                <img src="./img/46/drop.png" alt="">
+                            </div>
+                        </div>
+                        <!-- 评论 -->
+                        <div class="comment">
+                            <div class="like line">
+                                <img src="./img/46/linke.png" alt="">
+                                <span>张三</span>
+                                <span>、</span>
+                                <span>李</span>
+                            </div>
+                            <ul class="discuss">
+                                <li>
+                                    <span>小可</span>
+                                    <span>:精彩</span>
+                                </li>
+                                <li>
+                                    <span>小可</span>
+                                    <span>:精彩</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="left">
+                    <img src="./img/46/shoppictu.png" alt="">
+                    <img src="./img/46/home.png" alt="">
+                </div>
+                <div class="right">
+                    <div>
+                        <!-- 店铺名 -->
+                        <div class="name">
+                            <span>护肤品专卖店</span>
+                            <span>>200km</span>
+                        </div>
+                        <p>我亲测好用我亲测好用我亲测好用我亲测好用我亲测好
+                            用我亲测好用我亲测好用我亲测好用我亲测好用我亲好
+                            用我亲测我亲测我亲测我亲测</p>
+                        <!-- 三个图片 -->
+                        <ul class="goods">
+                            <li>
+                                <div class="tupian">
+                                    <img src="./img/46/picture.png" alt="">
+                                    <img src="./img/46/black.png" alt="">
+                                </div>
+                                <div class="price">
+                                    <img src="./img/46/money.png" alt="">
+                                    <div>
+                                        <span>289.</span>
+                                        <span>00</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="tupian">
+                                    <img src="./img/46/picture.png" alt="">
+                                    <img src="./img/46/black.png" alt="">
+                                </div>
+                                <div class="price">
+                                    <img src="./img/46/money.png" alt="">
+                                    <div>
+                                        <span>289.</span>
+                                        <span>00</span>
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="tupian">
+                                    <img src="./img/46/picture.png" alt="">
+                                    <img src="./img/46/black.png" alt="">
+                                </div>
+                                <div class="price">
+                                    <img src="./img/46/money.png" alt="">
+                                    <div>
+                                        <span>289.</span>
+                                        <span>00</span>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="under">
+                        <!-- 时间 -->
+                        <div class="hour">
+                            <div class="time">
+                                <span>3 </span>
+                                <span>分钟前</span>
+                            </div>
+                            <div class="drop">
+                                <img src="./img/46/drop.png" alt="">
+                            </div>
+                        </div>
+                        <!-- 评论 -->
+                        <div class="comment">
+                            <div class="like line">
+                                <img src="./img/46/linke.png" alt="">
+                                <span>张三</span>
+                                <span>、</span>
+                                <span>李</span>
+                            </div>
+                            <ul class="discuss">
+                                <li>
+                                    <span>小可</span>
+                                    <span>:精彩</span>
+                                </li>
+                                <li>
+                                    <span>小可</span>
+                                    <span>:精彩</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </div>
+
+    <ul class="fooder">
+        <li>首页</li>
+        <li>好友</li>
+        <li class="active">圈子</li>
+        <li>购物车</li>
+        <li>我的</li>
+    </ul>
+
+</body>
+
+</html>
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/70.html
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/70.html
@@ -0,0 +1,64 @@
+<!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="http://at.alicdn.com/t/font_3445167_it6ine1mov8.css">
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/70.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <img class="background" src="./img/70/picture.png" alt="">
+        <div class="information">
+            <div class="data">
+                <img class="touxiang" src="./img/70/picture.png" alt="">
+                <span>新手体验店</span>
+                <div>
+                    <img src="./img/70/location.png" alt="">
+                    <span>广东东莞厂家直供一层 30号</span>
+                </div>
+            </div>
+            <div class="QRcode">
+                <img src="./img/70/QRcode.png" alt="">
+                <span>长按二维码马上逛店铺</span>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="fooder">
+        <div class="top">
+            <span></span>
+            <span>更多分享</span>
+            <img src="./img/70/close.png" alt="">
+        </div>
+        <ul>
+            <li>
+                <img src="./img/70/qq.png" alt="">
+                <div>QQ</div>
+            </li>
+            <li>
+                <img src="./img/70/space.png" alt="">
+                <div>QQ空间</div>
+            </li>
+            <li>
+                <img src="./img/70/weibo.png" alt="">
+                <div>微博</div>
+            </li>
+            <li>
+                <img src="./img/70/link.png" alt="">
+                <div>复制链接</div>
+            </li>
+        </ul>
+    </div>
+</body>
+
+</html>
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/133.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/133.css
@@ -0,0 +1,248 @@
+body {
+    background: #f2f2f6;
+}
+
+.header {
+    width: 100%;
+    background: #fff;
+    padding: 0.23rem 0.3rem 0 0.21rem;
+    position: fixed;
+    z-index: 999;
+    box-sizing: border-box;
+}
+
+
+.header .screach {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start
+}
+
+.header .screach .left {
+    width: 0.2rem;
+    height: 0.35rem;
+    margin-right: 0.48rem;
+}
+
+.header .screach div {
+    width: 6.31rem;
+    height: 0.6rem;
+    background-color: #f2f2f2;
+    border-radius: 0.3rem;
+    display: flex;
+    align-items: center;
+}
+
+.header .screach div img {
+    width: 0.32rem;
+    height: 0.34rem;
+    margin-left: 0.24rem;
+    margin-right: 0.18rem;
+}
+
+.header .screach div input {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.26rem;
+    letter-spacing: 0rem;
+    color: #808080;
+    background: #f2f2f2;
+}
+
+
+
+.menu {
+    width: 100%;
+    overflow-x: scroll;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    padding: 0.47rem 0.36rem 0.31rem 0.36rem;
+    white-space: nowrap;
+    box-sizing: border-box;
+}
+
+.menu li {
+    font-family: SimHei;
+    font-size: 0.3rem;
+    color: #424242;
+    margin-right: 0.39rem;
+}
+
+
+.menu li:first-child {
+    color: #5697f4;
+    position: relative;
+}
+
+
+.menu .active::after {
+    content: " ";
+    width: 0.31rem;
+    height: 0.04rem;
+    position: absolute;
+    bottom: 0;
+    left: 0.1rem;
+    background: #5697f4;
+    bottom: -0.27rem;
+    left: 50%;
+    transform: translate(-50%);
+    background: #5697f4;
+}
+
+.content {
+    position: absolute;
+    margin-top: 1.91rem;
+}
+
+.content>ul {}
+
+.content ul li {
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 0.3rem 0.28rem 0.26rem 0.28rem;
+    margin-top: 0.12rem
+}
+
+.content .title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.content .title div {
+    display: flex;
+    align-items: center;
+
+}
+
+.content .title div img {
+    width: 0.24rem;
+    height: 0.25rem;
+}
+
+.content .title div span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.26rem;
+    letter-spacing: 0.006rem;
+    color: #333333;
+    margin: 0 0.18rem
+}
+
+.content .title div img:last-child {
+    width: 0.1rem;
+    height: 0.18rem;
+}
+
+.content .title .comment {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.26rem;
+    letter-spacing: 0.006rem;
+    color: #5697f4;
+}
+
+.product {
+    width: 100%
+}
+
+.product li {}
+
+
+
+.product li img {
+    width: 1.36rem;
+    height: 1.37rem;
+}
+
+.product li .middle {}
+
+.product li .name {
+    width: 3.86rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.product li .name span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.3rem;
+    color: #444444;
+    margin-bottom: 0.29rem;
+}
+
+.product li .name span:last-child {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #aaaaaa;
+}
+
+.product li .price {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end
+}
+
+.product li .price span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.3rem;
+    color: #000000;
+
+}
+
+.product li .price span:last-child {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #aaaaaa;
+}
+
+.content .money {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: 100%;
+}
+
+.content .money span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #000000;
+}
+
+.money .bottom {
+    display: flex;
+    margin-top: 0.2rem;
+}
+
+.content .money .bottom .delete {
+    width: 1.28rem;
+    height: 0.46rem;
+    border-radius: 0.23rem;
+    border: solid 0.01rem #dddddd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.11rem;
+}
+
+.content .money .bottom .delete span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #888888;
+}
+
+.content .money .bottom .pingjia {
+    width: 1.28rem;
+    height: 0.46rem;
+    border-radius: 0.23rem;
+    border: solid 0.01rem #5697f4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content .money .bottom span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #5697f4;
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/22.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/22.css
@@ -0,0 +1,361 @@
+body {
+    background: #f2f2f2;
+}
+
+.header {
+    width: 100%;
+    height: 0.88rem;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    position: fixed;
+    z-index: 999;
+    box-sizing: border-box;
+    top: 0
+}
+
+
+
+.header img {
+    width: 0.2rem;
+    height: 0.33rem;
+    margin-left: 0.3rem;
+
+}
+
+.header div {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.34rem;
+    color: #333333;
+    margin-left: 2.58rem;
+}
+
+
+
+.centent {
+    margin-top: 0.88rem;
+    margin-bottom: 1rem;
+}
+
+.address {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    justify-content: space-between;
+    background-image: url(../img/22/blue.png);
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+
+
+
+
+.address .left {
+    align-items: center;
+    margin-left: 0.3rem;
+}
+
+.address .left .xinxi {
+    margin-top: 0.21rem;
+
+}
+
+.address .left .xinxi .name {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.3rem;
+    color: #333333;
+    margin-right: 0.56rem;
+}
+
+.address .left .xinxi .number {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.3rem;
+    color: #333333;
+}
+
+
+.address .left .dizhi {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #333333;
+    margin-top: 0.17rem;
+}
+
+.address img {
+    width: 0.14rem;
+    height: 0.26rem;
+    margin-top: 0.37rem;
+    margin-bottom: 0.63rem;
+    margin-right: 0.3rem;
+}
+
+
+
+
+.centent .pay {
+    width: 100%;
+    height: 0.84rem;
+    background-color: #ffffff;
+    border-radius: 0.1rem;
+    margin-top: 0.19rem;
+    margin-bottom: 0.16rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center
+}
+
+.pay span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.28rem;
+    color: #333333;
+}
+
+.pay .left {
+    margin-left: 0.26rem;
+}
+
+.pay .right {
+    display: flex;
+    align-items: center
+}
+
+.pay .right img {
+    margin-left: 0.07rem;
+    width: 0.31rem;
+    height: 0.1rem;
+    margin-right: 0.44rem;
+}
+
+
+.store {}
+
+.store li {
+    background: #ffffff;
+}
+
+.store li .shang {
+    margin-left: 0.24rem;
+}
+
+.store li .xia {
+    margin-left: 0.3rem;
+}
+
+/* 店铺名 */
+.store li .name {
+    border-radius: 0.1rem 0.1rem 0rem 0rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.17rem;
+}
+
+.store li .name .home {
+    width: 0.24rem;
+    height: 0.22rem;
+    margin-right: 0.06rem;
+}
+
+.store li .name span {
+    font-size: 0.26rem;
+    color: #333333;
+    margin-right: 0.16rem;
+
+}
+
+.store li .name .more {
+    width: 0.1rem;
+    height: 0.19rem;
+}
+
+
+/* 商品信息 */
+.goods {
+    padding-top: 0.29rem;
+}
+
+.goods li {
+    display: flex;
+    margin-bottom: 0.31rem;
+}
+
+.goods li img {
+    width: 2rem;
+    height: 1.65rem;
+    margin-right: 0.36rem;
+}
+
+.goods .right {}
+
+.goods .right .top {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.28rem;
+    color: #333333;
+    margin-right: 1.72rem;
+}
+
+.goods .right .middle .color {
+    margin-right: 0.36rem;
+}
+
+
+.goods .right .bottom {
+    margin-right: 0.76rem;
+}
+
+.goods .right .bottom .price {
+    margin-right: 2.64rem;
+    display: inline
+}
+
+.goods .right .bottom .price span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.34rem;
+    color: #ea4e3d;
+}
+
+.goods .right .bottom .price span:first-child {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.2rem;
+}
+
+.goods .right .bottom .price span:last-child {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.24rem;
+}
+
+.goods .right span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.2rem;
+    color: #999999;
+}
+
+/* 订单备注 */
+.remarks {
+    width: 100%;
+    padding-top: 0.3rem;
+    padding-bottom: 0.29rem;
+}
+
+.remarks span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.3rem;
+    color: #333333;
+    margin-right: 0.31rem;
+
+}
+
+.remarks input {
+    width: 4.15rem;
+    height: 0.27rem;
+    font-family: PingFang-SC-Medium;
+    font-size: 0.26rem;
+    color: #aaaaaa;
+    border: 0;
+}
+
+
+.discount {
+    padding-top: 0.22rem;
+    padding-bottom: 0.04rem;
+}
+
+.discount li {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    margin-right: 0.28rem;
+    margin-bottom: 0.12rem;
+}
+
+.discount li span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #333333;
+}
+
+.discount li .five {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #f09c48;
+}
+
+
+.xia .price {
+    padding-top: 0.3rem;
+    padding-bottom: 0.25rem;
+}
+
+.xia .price span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.3rem;
+    color: #333333;
+    margin-right: 4.3rem
+}
+
+.xia .price span:last-child {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.34rem;
+    color: #ea4e3d;
+    margin-right: 0.26rem !important;
+
+}
+
+.footer {
+    margin-top: 0.22rem;
+    padding-top: 0.16rem;
+    padding-bottom: 0.1rem;
+    background: #ffffff;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    z-index: 999;
+    bottom: 0;
+    width: 100%;
+}
+
+.footer span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.26rem;
+    line-height: 0.2rem;
+    color: #999999;
+}
+
+.footer span:nth-child(2) {
+    margin-left: 0.14rem;
+}
+
+.footer span:nth-child(3) {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.24rem;
+    line-height: 0.2rem;
+    color: #000000;
+    margin-left: 0.27rem;
+}
+
+.footer span:nth-child(4) {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.3rem;
+    line-height: 0.2rem;
+    color: #000000;
+    margin-left: 0.06rem;
+}
+
+.footer div {
+    width: 1.92rem;
+    height: 0.66rem;
+    background-color: #5697f4;
+    border-radius: 0.33rem;
+    margin-right: 0.24rem;
+    margin-left: 0.42rem;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.footer div span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.28rem;
+    line-height: 0.2rem;
+    color: #ffffff;
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/39.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/39.css
@@ -0,0 +1,282 @@
+body {
+    width: 100%;
+    height: 100%;
+    background-image: url(../img/39/background.png);
+    background-size: cover;
+}
+
+.header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.37rem 0.37rem 0rem 0.37rem;
+    position: fixed;
+    z-index: 999;
+    box-sizing: border-box;
+    top: 0;
+}
+
+.header .picture {
+    width: 0.43rem;
+    height: 0.43rem;
+}
+
+.header div {
+    display: flex;
+    flex-direction: column;
+}
+
+.header .font {
+    display: flex;
+}
+
+.header ul li {
+    font-size: 0.3rem;
+    color: #fefefe;
+    text-shadow: 0.03rem 0.05rem 0.03rem rgb(0 0 0 / 74%);
+    margin-right: 0.23rem;
+    position: relative;
+}
+
+.header ul .active::after {
+    content: " ";
+    background-image: url(../img/39/underli.png);
+    position: absolute;
+    bottom: -0.1rem;
+    left: 50%;
+    transform: translate(-50%);
+    width: 0.35rem;
+    height: 0.02rem;
+}
+
+.content {
+    display: flex;
+    width: 100%;
+    height: calc(100vh - 1rem);
+    position: relative;
+}
+
+.left {
+    position: absolute;
+    bottom: 0;
+    left: 0.37rem
+}
+
+.left .top {
+    margin-bottom: 0.22rem;
+    display: flex;
+    align-items: center;
+}
+
+.left .top img {
+    width: 0.28rem;
+    height: 0.26rem;
+    margin-right: 0.1rem;
+}
+
+.left .top span {
+    font-family: PingFangSC-Regular;
+    font-size: 0.26rem;
+    color: #ffc600;
+}
+
+.left .top span:last-child {
+    padding-left: 0.3rem
+}
+
+.left .middle {
+    width: 5.65rem;
+    height: 1.68rem;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    padding-left: 0.09rem;
+}
+
+.left .middle .tupian {
+    width: 1.48rem;
+    height: 1.48rem;
+}
+
+.left .middle .right {
+    margin-left: 0.15rem;
+}
+
+.left .middle .right span,
+.left .middle .right .xia .price span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.28rem;
+    color: #333333;
+}
+
+.left .middle .right .xia {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 0.2rem
+}
+
+.left .middle .right .xia div {}
+
+.left .middle .right .xia .price {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.14rem;
+}
+
+
+.left .middle .right .xia .price .red {
+    width: 0.6rem;
+    height: 0.24rem;
+    background-color: #ea4e3d;
+    border-radius: 0.12rem;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.left .middle .right .xia .price .red span {
+    font-family: PingFang-SC-Regular;
+    font-size: 0.2rem;
+    color: #fffefe;
+    zoom: 0.8
+}
+
+.left .middle .right .xia div span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.2rem;
+    color: #626262;
+    display: block
+}
+
+.left .middle .right .shop {
+    width: 0.46rem;
+    height: 0.46rem;
+}
+
+.left .bottom {
+    display: flex;
+    align-items: center;
+    margin-top: 0.27rem;
+    margin-bottom: 0.13rem;
+}
+
+.left .bottom img {
+    width: 0.27rem;
+    height: 0.28rem;
+    margin-right: 0.13rem;
+}
+
+.left .bottom span {
+    font-family: PingFangSC-Regular;
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+
+
+.content .user {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.content .user .touxiang {
+    position: relative;
+}
+
+.content .user .touxiang img {
+    width: 0.96rem;
+    height: 0.97rem;
+}
+
+.content .user .touxiang img:last-child {
+    width: 0.34rem;
+    height: 0.33rem;
+    position: absolute;
+    left: 0.34rem;
+    bottom: -0.165rem;
+}
+
+.content .user ul {
+    margin-bottom: 0.14rem;
+    margin-left: 0.39rem;
+    margin-right: 0.35rem;
+    margin-top: 0.1rem;
+}
+
+.content .user ul li {
+    margin-top: 0.32rem;
+}
+
+.content .user ul li a {
+    display: flex;
+    flex-direction: column;
+    align-items: center
+}
+
+.content .user ul li a img {
+    width: 0.68rem;
+    height: 0.63rem;
+    margin-bottom: 0.1rem;
+}
+
+.content .user ul li a span {
+    font-family: SourceHanSansCN-Regular;
+    font-size: 0.2rem;
+    color: #ffffff;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.fooder {
+    width: 100%;
+    height: 1rem;
+    position: fixed;
+    z-index: 999;
+    background-color: #000000;
+    padding-left: 0.39rem;
+    padding-right: 0.54rem;
+    display: flex;
+    bottom: 0;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+
+.fooder li {
+    font-family: SourceHanSansCN-Regular;
+    font-size: 0.24rem;
+    color: #ffffff;
+    position: relative;
+}
+
+.fooder li:first-child {
+    font-family: AdobeHeitiStd-Regular;
+    font-size: 0.3rem;
+    color: #ffffff;
+}
+
+.fooder .active::after {
+    content: " ";
+    position: absolute;
+    width: 0.51rem;
+    height: 0.03rem;
+    background: #fff;
+    left: 50%;
+    transform: translate(-50%);
+    bottom: -50%;
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/46.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/46.css
@@ -0,0 +1,301 @@
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.4rem;
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+    padding-top: 0.38rem;
+    box-sizing: border-box;
+    top: 0;
+}
+
+
+
+
+.header ul {
+    display: flex;
+}
+
+.header ul li {
+    font-family: AdobeHeitiStd-Regular;
+    font-size: 0.36rem;
+    color: #ffffff;
+    margin-left: 0.34rem;
+    position: relative;
+}
+
+.header ul .active::after {
+    content: " ";
+    position: absolute;
+    bottom: -0.1rem;
+    width: 0.4rem;
+    height: 0.04rem;
+    background-color: #ffffff;
+    left: 50%;
+    transform: translate(-50%);
+    border-radius: 0.02rem;
+}
+
+
+.header img {
+    width: 0.62rem;
+    height: 0.48rem;
+}
+
+
+.content {
+    margin-bottom: 1rem;
+}
+
+.content .background {
+    width: 7.5rem;
+    height: 5.5rem;
+}
+
+.main {
+    margin-left: 0.24rem;
+    margin-right: 0.41rem;
+}
+
+.main>li {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.42rem;
+}
+
+.main .left {
+    width: 0.86rem;
+    height: 0.86rem;
+    margin-right: 0.23rem;
+    position: relative;
+}
+
+.main .left img {
+    width: 0.86rem;
+    height: 0.86rem;
+}
+
+.main .left img:last-child {
+    width: 0.27rem;
+    height: 0.29rem;
+    position: absolute;
+    bottom: 0;
+    right: 0
+}
+
+
+
+.main .right {}
+
+.main .right .name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.23rem;
+}
+
+.main .right .name span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.3rem;
+    color: #5a6f92;
+}
+
+.main .right .name span:last-child {
+    font-family: PingFangSC-Regular;
+    font-size: 0.24rem;
+    color: #999999;
+}
+
+.main .right p {
+    font-family: PingFangSC-Regular;
+    font-size: 0.24rem;
+    color: #686868;
+    margin-bottom: 0.26rem;
+
+}
+
+.main .right .goods {
+    display: flex;
+}
+
+.main .right .goods li {
+    position: relative;
+}
+
+.main .right .goods li:nth-child(2) {
+    margin-left: 0.11rem;
+    margin-right: 0.11rem;
+}
+
+.main .right .goods li .tupian {
+    position: relative;
+}
+
+.main .right .goods li .tupian img {
+    width: 1.85rem;
+    height: 1.85rem
+}
+
+.main .right .goods li .tupian img:last-child {
+    height: 0.4rem;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+.main .right .goods li .price {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: 0;
+    left: 0.85rem
+}
+
+.main .right .goods li .price img {
+    width: 0.12rem;
+    height: 0.16rem;
+    margin-right: 0.07rem;
+}
+
+.main .right .goods li .price span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+
+.main .right .goods li .price span:last-child {
+    font-size: 0.2rem;
+}
+
+.main .right .under {
+    margin-top: 0.27rem;
+    margin-right: 0.13rem
+}
+
+.main .right .hour {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.main .right .time {}
+
+.main .right .time span {
+    font-family: PingFangSC-Regular;
+    font-size: 0.24rem;
+    color: #989898;
+}
+
+.main .right .time span:last-child {
+    font-family: PingFangSC-Regular;
+    font-size: 0.2rem;
+}
+
+.main .right .drop {
+    width: 0.39rem;
+    height: 0.27rem;
+    background-color: #f1f1f1;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.main .right .drop img {
+    width: 0.2rem;
+    height: 0.05rem;
+}
+
+
+.comment {
+    margin-top: 0.38rem;
+    width: 5.7rem;
+    background-color: #f7f7f7;
+    border-radius: 0.1rem;
+    padding-left: 0.29rem;
+    padding-top: 0.28rem;
+    box-sizing: border-box;
+    padding-bottom: 0.2rem
+}
+
+.comment .like {
+    padding-bottom: 0.21rem
+}
+
+.comment .like img {
+    width: 0.29rem;
+    height: 0.26rem;
+    margin-right: 0.22rem;
+}
+
+.comment .like span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.3rem;
+    color: #5a6f92;
+}
+
+.comment .like span:nth-child(3) {
+    color: #3c3c3c;
+}
+
+.comment .discuss {}
+
+.comment .discuss li {
+    margin-top: 0.21rem;
+}
+
+.comment .discuss li span {
+    font-family: PingFang-SC-Bold;
+    font-size: 0.3rem;
+    color: #5a6f92;
+}
+
+.comment .discuss li span:last-child {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.3rem;
+    color: #0e0e0e;
+}
+
+
+
+.fooder {
+    height: 1rem;
+    background-color: #000000;
+    position: fixed;
+    z-index: 999;
+    width: 100%;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.39rem;
+    padding-right: 0.54rem;
+    box-sizing: border-box;
+}
+
+.fooder li {
+    font-family: AdobeHeitiStd-Regular;
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+
+.fooder .active::after {
+    content: " ";
+    width: 0.51rem;
+    height: 0.03rem;
+    border-radius: 0.015rem;
+    position: absolute;
+    background: #ffffff;
+    background: #ffffff;
+    left: 50%;
+    transform: translate(-50%);
+    bottom: -0.2rem;
+}
+
+.fooder li:nth-child(3) {
+    font-family: AdobeHeitiStd-Regular;
+    font-size: 0.3rem;
+    color: #ffffff;
+    position: relative;
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/70.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/70.css
@@ -0,0 +1,152 @@
+body {
+    width: 100%;
+    height: 100%;
+    background-image: url(../img/70/background.png);
+    background-size: cover;
+}
+
+.background {
+    width: 7.5rem;
+    position: absolute;
+    z-index: -1;
+}
+
+.content {
+    width: 6rem;
+    height: 7rem;
+    background-color: #ffffff;
+    border-radius: 0.2rem;
+    position: relative;
+    left: 0.75rem;
+    top: 2.05rem;
+}
+
+.content>.background {
+    width: 6rem;
+    height: 4.57rem;
+    position: absolute;
+    z-index: 2;
+}
+
+.content .information {}
+
+.content .data {
+    position: absolute;
+    z-index: 3;
+}
+
+.content .data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    top: 1.3rem;
+    left: 1.14rem;
+}
+
+.touxiang {
+    width: 1.08rem;
+    height: 1.08rem;
+    border-radius: 100%;
+    border: 0.05rem solid #ffffff;
+    margin-bottom: 0.51rem;
+}
+
+.content .data span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.28rem;
+    color: #ffffff;
+    margin-bottom: 0.26rem;
+}
+
+.content .data div {}
+
+.content .data div img {
+    width: 0.18rem;
+    height: 0.24rem;
+    margin-right: 0.13rem;
+}
+
+.content .data div span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+
+
+.content .QRcode {
+    position: absolute;
+    bottom: 0.29rem;
+    left: 1.59rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center
+}
+
+.content .QRcode img {
+    width: 1.95rem;
+    height: 1.95rem;
+    position: relative;
+    z-index: 2;
+    margin-bottom: 0.26rem
+}
+
+.content .QRcode span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.28rem;
+    color: #333333;
+}
+
+
+.fooder {
+    background-color: #ffffff;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 0.44rem 0.4rem 0.35rem 0.4rem;
+    box-sizing: border-box;
+}
+
+.fooder .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center
+}
+
+.fooder .top span {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.34rem;
+    color: #333333;
+}
+
+.fooder .top img {
+    width: 0.24rem;
+    height: 0.24rem;
+}
+
+.fooder ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 0.34rem;
+
+}
+
+.fooder ul li {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 0.8rem;
+}
+
+
+.fooder ul li img {
+    width: 1.08rem;
+    height: 1.08rem;
+}
+
+.fooder ul li div {
+    font-family: PingFang-SC-Medium;
+    font-size: 0.26rem;
+    color: #333333;
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/clear.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/clear.css
@@ -0,0 +1,35 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li,
+p {
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    font-size: 0px;
+}
+
+html {
+    font-size: 0;
+}
+
+li {
+    list-style: none;
+}
+
+input {
+    border: none;
+    outline: none;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/public.css
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/css/public.css
@@ -0,0 +1,3 @@
+.line {
+    border-bottom: 0.01rem solid #f2f2f2
+}
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/blue.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/blue.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/home.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/home.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/left.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/left.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/porduct1.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/porduct1.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/right.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/right.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/screach.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/133/screach.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/blue.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/blue.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/fanhui.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/fanhui.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/home.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/home.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/product.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/product.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/right1.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/right1.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/right2.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/right2.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/three
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/22/three
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/background.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/background.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/comment.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/comment.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/home.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/home.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/like.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/like.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/plus.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/plus.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/scan.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/scan.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/searc.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/searc.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/share.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/share.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/shop
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/shop
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/shop.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/shop.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/touxiang.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/touxiang.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/tupian.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/tupian.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/underli.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/underli.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/yinfu.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/39/yinfu.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/background.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/background.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/black.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/black.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/camer.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/camer.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/drop.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/drop.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/home.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/home.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/linke.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/linke.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/money.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/money.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/picture.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/picture.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/shop.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/shop.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/shoppictu.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/shoppictu.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/underline.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/46/underline.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/QRcode.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/QRcode.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/background.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/background.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/close.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/close.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/link.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/link.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/location.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/location.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/picture.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/picture.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/qq.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/qq.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/space.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/space.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/weibo.png
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/img/70/weibo.png
--- a/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/rem.js
+++ b/历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/6-8作业/rem.js
@@ -0,0 +1,12 @@
+; (function (doc, win, undefined) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (clientWidth === undefined) return;
+            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+        };
+    if (doc.addEventListener === undefined) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false)
+})(document, window);