first commit

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

@@ -0,0 +1,18 @@
+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;
+}

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

@@ -0,0 +1,311 @@
+.header {/*头部*/
+	height: 0.88rem;
+    width: 100%;
+	background-color: #ffffff;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    border-bottom: 1px solid #f2f2f2;
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 999;
+    top: 0;
+}
+.header img{
+	width: 0.2rem;
+	height: 0.33rem;
+    padding-left: 0.3rem;
+    
+}
+.header span{
+    padding-right: 0.3rem; /*问题1*/
+    font-size: 0.34rem;
+    color: #333333;
+    }
+
+    .footer{/*尾部*/
+width: 100%;
+        height: 0.92rem;
+        background-color: #ffffff;
+        font-size: 0;
+        box-sizing: border-box;
+        display:flex;
+        align-items:center;
+        justify-content:flex-end;
+         position: fixed;
+    z-index: 999;
+    bottom: 0;
+    
+}
+.footer .quantity{
+	font-size: 0.26rem;
+    color: #c6c6c6;
+    padding-right: 0.1rem;
+}
+
+.footer span{
+	font-size: 0.3rem ;
+	color: #000000;
+    padding-left: 0.06rem;
+}
+.footer .jiesuan{
+padding: 0.2rem 0.5rem;
+background-color: #5697f4;
+border-radius: 0.33rem;
+color: #ffffff;
+font-size: 0.28rem;
+margin-right: 0.24rem;
+margin-left: 0.42rem;
+}
+
+/*中间*/   
+.content{
+    background-color: #f2f2f2;
+    margin-top: 0.88rem;
+    margin-bottom: 0.92rem;
+} 
+
+
+/*收获地址*/
+.address{
+    width: 7.5rem;
+	height: 1.26rem;
+    background-color: #ffffff;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    font-size: 0;
+}
+.address .dizi{
+    align-content:center
+}
+.address .dizi span{
+	font-size: 0.3rem;
+	color: #333333;
+}
+.address .dizi span:first-child{
+    font-weight:600;
+    padding-right: 0.52rem;
+    padding-left: 0.3rem;
+}
+.address .dizi p{
+    font-size: 0.24rem;
+    color: #333333;
+    padding-top: 0.17rem;
+    padding-left: 0.3rem;
+}
+.address img{
+        width: 0.14rem;
+        height: 0.26rem;
+        padding-right: 0.3rem;
+    
+}
+ /*支付方式*/
+ .payment{
+    width: 7.49rem;
+    height: 0.84rem;
+    background-color: #ffffff;
+    border-radius: 0.1rem;
+    margin-top: 0.19rem;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    font-size: 0;
+    
+ }
+ .payment_you{
+    display:flex;
+    align-items:center;
+    padding-right: 0.43rem;
+
+ }
+ .payment p{   
+        font-size: 0.28rem;
+        color: #333333;
+        padding-left: 0.26rem;
+ }
+ .payment_you span{
+	font-size: 0.28rem;
+    color: #333333;
+}
+.payment_you img{
+        width: 0.31rem;
+        height: 0.06rem;
+        padding-left: 0.07rem;
+
+}
+/*列表部分*/
+.purchase{
+   font-size: 0;
+
+}
+/*店铺部分*/
+.purchase_top{
+	width: 7.5rem;
+	height: 0.62rem;
+	background-color: #ffffff;
+    margin-top: 0.16rem;
+    display:flex;
+    align-items:center;
+    justify-content:flex-start;
+    border-bottom: 1px solid #f2f2f2;
+    box-sizing: border-box;
+
+}
+.purchase_top .p_zuo{
+        width: 0.24rem;
+        height: 0.22rem;
+        margin-left: 0.24rem;
+}
+.purchase_top .p_you{
+
+        width: 0.1rem;
+        height: 0.19rem;
+      
+}
+.purchase_top span{
+        font-size: 0.26rem;
+        color: #333333;
+        margin-left: 0.06rem;
+        margin-right: 0.16rem;
+}
+/*窗口*/
+.list{
+       
+        
+}
+.list li{
+    width: 7.5rem;
+    height: 2.22rem;
+    background-color: #ffffff;
+    display:flex;
+    align-items:center;
+    position: relative;
+    border-bottom: 1px solid #f2f2f2;
+    box-sizing: border-box;
+}
+.list li img{
+padding: 0.29rem 0.36rem 0.29rem 0.24rem;
+width: 2rem;
+height: 1.65rem;
+}
+.shop_words .name{
+        font-size: 0.28rem;
+        color: #333333;
+        width: 80%;
+    }
+
+.shop_words span{
+     font-size: 0.2rem;
+    color: #999999;
+} 
+
+.price{
+   
+}
+.shuliang{
+    position: absolute;
+    right: 0.76rem;
+    bottom: 0.47rem;
+    font-size: 0.2rem;
+    color: #999999;
+    
+}
+.price .price_1{
+    font-size: 0.2rem;
+	color: #ea4e3d;
+}
+.price .price_2{
+    font-size: 0.34rem;
+	color: #ea4e3d;
+}
+.price  .price_3{
+    font-size: 0.24rem;
+	color: #ea4e3d;
+}
+.remarks{
+        width: 7.5rem;
+        height: 0.88rem;
+        background-color: #ffffff;
+        border-bottom: 1px solid #f2f2f2;
+        box-sizing: border-box;
+        display:flex;
+        align-items:center;
+
+}
+.remarks span{
+ font-size: 0.3rem;
+color: #333333;
+margin-left: 0.3rem;
+margin-right: 0.31rem;
+}
+.remarks input{
+        width: 4.15rem;
+        height: 0.25rem;
+        font-size: 0.26rem;
+
+        color: #aaaaaa;
+}
+.discount{
+    width: 7.49rem;
+	height: 1.08rem;
+	background-color: #ffffff;
+    border-bottom: 1px solid #f2f2f2;
+    box-sizing: border-box;
+
+}
+.discount .paper{
+    height: 50%;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    margin: 0 0.3rem;
+}
+.discount .paper span{
+    
+        font-size: 0.24rem;
+        
+        color: #333333;
+    }
+    .discount .paper .paper_1{
+    
+        font-size: 0.24rem;
+       
+        color: #f09c48;
+    
+}
+.discount .freight{
+    height: 50%;
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+}
+.discount .freight span{
+    font-size: 0.24rem;
+  color: #333333;
+  margin: 0 0.3rem;
+    
+}
+.money{
+
+        width: 7.5rem;
+        height: 0.84rem;
+        background-color: #ffffff;
+        border-radius: 0rem 0rem 0.1rem 0.1rem;
+        display:flex;
+    align-items:center;
+    justify-content:space-between;
+    
+    
+}
+.money .money_1{
+    font-size: 0.3rem;
+	margin-left: 0.3rem;
+	color: #333333;
+}
+.money .money_2{
+	
+font-size: 0.34rem;
+	margin-right: 0.3rem;
+color: #ea4e3d;
+}

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

@@ -0,0 +1,145 @@
+<!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>PSD(22)</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">
+        <img src="./img/fh.png" alt="">
+        <span>填写订单</span>
+        <span></span>
+    </div>
+    <div class="content">
+        <div class="address">
+            <div class="dizi">
+            <span>张晓明</span>
+            <span>186****0019</span>
+            <p>上海市黄浦区中山南路128号千古美城1楼1210室</p>
+            </div>
+            <img src="./img/fhyou.png" alt="">
+        </div>
+        <div class="payment">
+            <p>选择支付方式</p>
+            <div class="payment_you">
+                <span>在线支付</span>
+                <img src="./img/dian.png" alt="">
+            </div>
+        </div>
+        <div class="purchase">
+            <div class="purchase_top"><!--店铺部分-->
+                <img class="p_zuo" src="./img/purchase_1.png" alt="">
+                <span>路易斯女装旗舰店</span>
+                <img class="p_you" src="./img/purchase_2.png" alt="">
+            </div>
+            <ul class="list"><!--窗口-->
+                <li>
+                    <img src="./img/product.png" alt=""><!--图片-->
+                    <div class="shop_words">
+                        <p class="name">真丝连衣裙2019春夏新款杭州大牌气质修……</p><!--大字-->
+                        <span>颜色：黑白</span><!--物品-->
+                        <span>尺码：L</span><!--尺码-->
+                        <div class="price">
+                            <span class="price_1">￥</span>
+                            <span class="price_2">160</span>
+                            <span class="price_3">.00</span>
+                            
+                        </div>
+                        <span class="shuliang">x1</span>
+                    </div><!--文字-->
+                </li>
+            </ul>
+            <div class="remarks"><!--订单备注-->
+                <span>订单备注</span>
+                <input type="text" placeholder="有什么想对商家留言的可以在这里说">
+            </div>
+            <div class="discount"><!--优惠-->
+                <div class="paper">
+                    <span>优惠抵用</span>
+                    <span class="paper_1">-￥5</span>
+                </div>
+                <div class="freight">
+                    <span>快递费用</span>
+                    <span>免费包邮</span>
+                </div>
+            </div>
+            <div class="money"><!--金额-->
+                <span class="money_1">商品金额</span>
+                <span class="money_2">￥155.00</span>
+            </div>
+        </div>
+
+
+        <div class="purchase">
+            <div class="purchase_top"><!--店铺部分-->
+                <img class="p_zuo" src="./img/purchase_1.png" alt="">
+                <span>路易斯女装旗舰店</span>
+                <img class="p_you" src="./img/purchase_2.png" alt="">
+            </div>
+            <ul class="list"><!--窗口-->
+                <li>
+                    <img src="./img/product.png" alt=""><!--图片-->
+                    <div class="shop_words">
+                        <p class="name">真丝连衣裙2019春夏新款杭州大牌气质修……</p><!--大字-->
+                        <span>颜色：黑白</span><!--物品-->
+                        <span>尺码：L</span><!--尺码-->
+                        <div class="price">
+                            <span class="price_1">￥</span>
+                            <span class="price_2">160</span>
+                            <span class="price_3">.00</span>
+                            
+                        </div>
+                        <span class="shuliang">x1</span>
+                    </div><!--文字-->
+                </li>
+                <li>
+                    <img src="./img/product.png" alt=""><!--图片-->
+                    <div class="shop_words">
+                        <p class="name">真丝连衣裙2019春夏新款杭州大牌气质修……</p><!--大字-->
+                        <span>颜色：黑白</span><!--物品-->
+                        <span>尺码：L</span><!--尺码-->
+                        <div class="price">
+                            <span class="price_1">￥</span>
+                            <span class="price_2">160</span>
+                            <span class="price_3">.00</span>
+                            
+                        </div>
+                        <span class="shuliang">x1</span>
+                    </div><!--文字-->
+                </li>
+            </ul>
+            <div class="remarks"><!--订单备注-->
+                <span>订单备注</span>
+                <input type="text" placeholder="有什么想对商家留言的可以在这里说">
+            </div>
+            <div class="discount"><!--优惠-->
+                <div class="paper">
+                    <span>优惠抵用</span>
+                    <span class="paper_1">-￥5</span>
+                </div>
+                <div class="freight">
+                    <span>快递费用</span>
+                    <span>免费包邮</span>
+                </div>
+            </div>
+            <div class="money"><!--金额-->
+                <span class="money_1">商品金额</span>
+                <span class="money_2">￥155.00</span>
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+<span class="quantity">共3件,</span>
+<span class="quantity">合计：</span>
+<span>¥</span>
+<span>5999.00</span>
+<span class="jiesuan">结算(2)</span>
+    </div>
+</body>
+</html>

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