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,346 @@
+
+
+.header{
+    height: 0.88rem;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    width: 100%;
+    padding-left: 0.3rem;
+    top: 0;
+    left: 0;
+    z-index: 999;
+}
+.header img{
+    width: 0.2rem;
+	height: 0.33rem;
+}
+.header span{	
+	font-size: 0.34rem;
+	color: #333333;
+}
+
+.content{
+    margin-top: 1rem;
+    background-color: #ffffff;
+    
+ 
+}
+.content .top{ 
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid #efefef;
+}
+.content .top .top_left{
+    margin-left: 0.3rem;
+    margin-right: 0.29rem;
+}
+.content .top .top_left .name{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  
+    
+}
+.content .top .top_left .name span{
+    font-size: 0.3rem; 
+    color: #333333; 
+    margin-right: 0.52rem;
+      
+}
+.content .top .top_left .name p{
+    font-size: 0.3rem;
+    color: #333333;
+
+}
+
+
+.content .top .top_left .address{
+	font-size: 0.24rem;
+	color: #333333;
+}
+.content .top .top_right_img{
+    width: 0.14rem;
+	height: 0.26rem;
+	
+    padding-right: 0.3rem;
+
+} 
+
+.content .middle{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.26rem;
+    padding-right: 0.43rem;
+    
+    border: 1px solid #efefef;
+}
+.content .middle .middle_left{
+	font-size: 0.28rem;
+	color: #333333;
+    padding-top: 0.31rem;
+    padding-bottom: 0.26rem;
+
+}
+
+.content .middle .middle_right{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.content .middle .middle_right span{
+	font-size: 0.28rem;
+	color: #333333;
+    padding-top: 0.31rem;
+    padding-bottom: 0.26rem;
+ 
+}
+.content .middle .middle_right img{
+    width: 0.31rem;
+	height: 0.06rem;
+   
+  
+	
+} 
+
+.content ul{}
+.content ul li{}
+.content ul li .store{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 0.16rem;
+    border: 1px solid #efefef;
+}
+.content ul li .store img{
+    width: 0.24rem;
+	height: 0.22rem;
+    margin-left: 0.24rem;
+    margin-right: 0.06rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.17rem;
+	
+}
+.content ul li .store span{
+   
+	font-size: 0.26rem;
+	
+	color: #333333;
+    margin-right: 0.16rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.17rem;
+}
+.content ul li .store img{
+    width: 0.1rem;
+	height: 0.19rem;
+    padding-top: 0.2rem;
+    padding-bottom: 0.17rem;
+	
+}
+
+.content ul li .gw{
+    display: flex;
+    align-items: center;
+    padding-top: 0.2rem;
+    border: 1px solid #efefef;
+  
+   
+   
+    
+}
+.content ul li .gw .gw_img{
+    width: 2rem;
+	height: 1.65rem;
+    margin-left: 0.24rem;
+    margin-right: 0.36rem;
+    margin-bottom: 0.28rem;
+  
+}
+.content ul li .gw .gw_text{
+   
+
+}
+.content ul li .gw .gw_text .gw_name{
+	font-size: 0.28rem;
+	color: #333333;
+  
+}
+.content ul li .gw .gw_text .gw_color{
+    display: flex;
+    margin-top: 0.14rem;
+    
+    
+}
+.content ul li  .gw_color .black{
+	font-size: 0.2rem;
+	color: #999999;
+    
+}
+.content ul li  .gw_color .chima{
+	font-size: 0.2rem;
+	color: #999999;
+}
+
+.content ul li .gw .gw_text .gw_pr{
+    margin-top: 0.18rem;
+}
+.content ul li .gw .gw_text .gw_pr .pr{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.content ul li .gw .gw_text .gw_pr .pr span {
+	font-size: 0.2rem;
+	color: #ea4e3d;
+    margin-right: 2.82rem;
+    margin-bottom: 0.49rem;
+}
+.content ul li .gw .gw_text .gw_pr .pr p {
+	font-size: 0.2rem;
+	color: #999999;
+    margin-bottom: 0.47rem;
+}
+
+.content ul li .beizhu{
+  
+    border:1px solid #efefef;
+    display: flex;
+    align-items: center;
+    
+
+}
+
+
+
+.content ul li .beizhu span{
+	font-size: 0.3rem;
+	color: #333333;
+    padding-left: 0.3rem;
+   
+
+}
+.content ul li .beizhu .as{
+  
+	font-size: 0.26rem;
+    padding-left: 0.31rem;
+	
+	color: #aaaaaa;
+}
+
+    
+    
+
+.content ul li .zhekou{
+    padding-left: 0.3rem;
+    padding-right: 0.18rem;
+    border:1px solid #efefef;
+}
+.content ul li .zhekou .youhui{}
+.content ul li .zhekou .youhui .diyong{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+} 
+.content ul li .zhekou .youhui .diyong span{
+	font-size: 0.24rem;
+	color: #333333;
+    
+}
+.content ul li .zhekou .youhui .diyong p{
+	font-size: 0.24rem;
+	color: #f09c48;
+}
+.content ul li .zhekou .kuaidi{}
+.content ul li .zhekou .kuaidi .feiyong{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    
+}
+.content ul li .zhekou .kuaidi .feiyong span{
+	font-size: 0.24rem;
+	color: #333333;
+}
+.content ul li .zhekou .kuaidi .feiyong p{
+	font-size: 0.24rem;
+	color: #333333;
+}
+.content ul li .jiage{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 0.3rem;
+    padding-right: 0.18rem;
+    border: 1px solid #efefef;
+}
+.content ul li .jiage_left{
+  
+	font-size: 0.3rem;
+
+	color: #333333;
+}
+.content ul li .jiage_right{
+	font-size: 0.34rem;
+	color: #ea4e3d;
+}
+
+
+.footer{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    margin-top: 0.22rem;
+    background-color: #ffffff;
+    z-index: 999;
+}
+.footer .footer_text{
+    display: flex;
+   
+}
+.footer .footer_text span {
+	font-size: 0.26rem;
+	color: #c6c6c6;
+}
+.footer .footer_text p{
+	font-size: 0.26rem;
+	color: #999999;
+}
+.footer .jiesuan{
+    width: 1.92rem;
+	height: 0.66rem;
+	background-color: #5697f4;
+	border-radius: 0.33rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.footer .jiesuan span{
+   
+	font-size: 0.28rem;
+	
+	color: #ffffff;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

历届学生/front-end-team/项目练习/学生项目/缪虎/123.html/购物结算/index.html

@@ -0,0 +1,165 @@
+<!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">
+        <img src="./img/back.png" alt="">
+        <span>填写订单</span>
+        <div class=""></div>
+    </div>
+    <div class="content">
+        <div class="top">
+            <div class="top_left">
+                <div class="name">
+                    <span>张晓明</span>
+                    <p>186****0019</p>
+                </div>
+                <div class="address">上海市黄浦区中山南路128号千古美城1楼1210室</div>
+            </div>
+            <img class="top_right_img" src="./img/you.png" alt="">
+        </div>
+
+
+        <div class="middle">
+            <div class="middle_left">选择支付方式</div>
+            <div class="middle_right">
+                <span>在线支付</span>
+                <img src="./img/dian.png" alt="">
+            </div>
+        </div>
+
+
+        <ul >
+            <li>
+                <div class="store">
+                    <img src="./img/wuzi.png" alt="">
+                    <span>路易斯女装旗舰店</span>
+                    <img src="./img/you.png" alt="">
+                </div>
+                <div class="gw">
+                    <img class="gw_img" src="./img/tupian.png" alt="">
+                    <div class="gw_text">
+                        <div class="gw_name">真丝连衣裙2019春夏新款
+                                <br> 杭州大牌气质修……</div>
+                        <div class="gw_color">
+                            <div class="black">颜色：黑白</div>
+                            <div class="chima">尺码：L</div>
+                        </div>
+                        <div class="gw_pr">
+                            <div class="pr">
+                                
+                                <span>￥160.00</span>
+                                <p>X1</p>
+                            </div>
+                           
+                        </div>
+                    </div>
+                </div>
+                <div class="beizhu">
+                    <span>订单备注</span>
+                    <textarea class="as" name="" id="" cols="40" rows="1"  placeholder="有什么想对商家留言的可以在这里说"></textarea>
+                    
+                </div>
+                <div class="zhekou">
+                    <div class="youhui">
+                        <div class="diyong">
+                            <span>优惠抵用</span>
+                            <p>-￥5</p>
+
+                        </div>
+                        <div class="kuaidi">
+                            <div class="feiyong">
+                                <span>快递费用</span>
+                                <p>免费包邮</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+                <div class="jiage">
+                    <div class="jiage_left">商品金额</div>
+                    <div class="jiage_right">￥155.00</div>
+                </div>
+            </li>
+            
+
+
+            <li>
+                <div class="store">
+                    <img src="./img/wuzi.png" alt="">
+                    <span>路易斯女装旗舰店</span>
+                    <img src="./img/you.png" alt="">
+                </div>
+                <div class="gw">
+                    <img class="gw_img" src="./img/tupian.png" alt="">
+                    <div class="gw_text">
+                        <div class="gw_name">真丝连衣裙2019春夏新款
+                                <br> 杭州大牌气质修……</div>
+                        <div class="gw_color">
+                            <div class="black">颜色：黑白</div>
+                            <div class="chima">尺码：L</div>
+                        </div>
+                        <div class="gw_pr">
+                            <div class="pr">
+                                
+                                <span>￥160.00</span>
+                                <p>X1</p>
+                            </div>
+                           
+                        </div>
+                    </div>
+                </div>
+                <div class="beizhu">订单备注</div>
+                <div class="zhekou">
+                    <div class="youhui">
+                        <div class="diyong">
+                            <span>优惠抵用</span>
+                            <p>-￥5</p>
+
+                        </div>
+                        <div class="kuaidi">
+                            <div class="feiyong">
+                                <span>快递费用</span>
+                                <p>免费包邮</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+                <div class="jiage">
+                    <div class="jiage_left">商品金额</div>
+                    <div class="jiage_right">￥315.00</div>
+                </div>
+            </li>                 
+
+
+
+
+
+            
+
+        </ul>
+    </div>
+    <div class="footer">
+        <div class="footer_text">
+            <span>共3件,合计：</span>
+            <p>¥ 5999.00</p>
+        </div>
+        <div class="jiesuan">
+            <span>结算(2)</span>
+        </div>
+    </div>
+
+</body>
+
+</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";
+}