first commit

历届学生/fontendseven/项目练习/个人练习/两个作业/CSS/css/clear.css

@@ -0,0 +1,31 @@
+body,p,ul,li,h1,h2,h3,h4,h5,h6,input{
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+
+
+li {
+    list-style: none;
+}
+
+input {
+    /* 去除选中input时候产生的外边框 */
+    outline: none;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+input{
+    background: none;
+    border: none;
+    outline: none;
+}
+
+
+
+
+
+

历届学生/fontendseven/项目练习/个人练习/两个作业/CSS/css/index.css

@@ -0,0 +1,284 @@
+.header{
+    width: 100%;
+    height: 0.88rem;
+    /* margin-top: 0.32rem; */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 00.3rem;
+    box-sizing: border-box;
+    border-bottom: 0.01rem solid #e9e6e6;
+    background-color: #ffffff;
+}
+.header img{
+    width: 0.2rem;
+	height: 0.33rem;
+	background-color: #333333;
+}
+.header .header_order{
+	font-size: 0.34rem;
+	color: hsl(0, 0%, 20%);
+}
+
+
+
+
+.content{
+    width: 100%;
+    height: calc(100vh - 0.88rem - 0.92rem);
+}
+
+
+.content_address{
+    width: 100%;
+    height: 1.216rem;
+    background-color: #ffffff;
+    margin-bottom: 0.19rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.3rem;
+    box-sizing: border-box;
+}
+.content_address .content_address_l{
+   
+}
+.content_address .content_address_t{
+    font-size: 0.3rem;
+	color: #333333;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    
+}
+.content_address_t .name{
+	margin-right: 0.52rem;
+}
+.content_address_t .phone{
+    
+}
+.content_address_detailed{
+	font-size: 0.24rem;
+	color: #333333;
+}
+.content_address img{
+    width: 0.14rem;
+	height: 0.26rem;
+}
+
+
+
+.content .conment_payment{
+    height: 0.84rem;
+
+	border-radius: 0.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #ffffff;
+    padding-left: 0.26rem;
+    padding-right: 0.43rem;
+    margin-bottom: 0.16rem;
+}
+.content .conment_payment .conment_payment_mode{
+	font-size: 0.28rem;
+	color: #333333;
+}
+.content .conment_payment .conment_payment_onli{
+    /* width: 1.34rem; */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+	font-size: 0.28rem;
+	color: #333333;
+}
+.conment_payment_onli span{}
+.conment_payment_onli img{
+    width: 0.31rem;
+	height: 0.06rem;
+    text-align: center;
+}
+
+
+
+.content .content_details{
+    background: #ffffff;
+}
+.content .content_details>li{
+    border-bottom: 0.01rem solid #e9e6e6;
+}
+.content .content_details .content_details_shop{
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding-left: 0.24rem;
+    height: 0.62rem;
+    border-bottom: 0.01rem solid #e9e6e6;
+}
+.content_details_shop .shop_title_l{
+    width: 0.24rem;
+	height: 0.22rem;
+    margin-right: 0.06rem;
+}
+.content_details_shop .shop_title{
+	font-size: 0.26rem;
+	color: #333333;
+    margin-right: 0.16rem;
+}
+.content_details_shop .shop_title_r{
+    width: 0.1rem;
+	height: 0.19rem;
+}
+
+
+
+.content_details .skirt{
+}
+.content_details .skirt .skirt_text{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    padding: 0.29rem 0.28rem 0.24rem;
+}
+.skirt_text img{
+    width: 2rem;
+	height: 1.65rem;
+    margin-right: 0.36rem;
+}
+.skirt_text.skirt .real{}
+.skirt_text .real .real_title{
+    width: 3.18rem;
+	font-size: 0.28rem;
+	color: #333333;
+    margin-bottom: 0.14rem;
+}
+.real .real_category{
+    font-size: 0.2rem;
+    color: #999999;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.18rem;
+}
+.real_category_t{
+    margin-right: 0.36rem;
+}
+.real.real_category .real_category_b{}
+.real_price{
+	font-size: 0.34rem;
+	color: #ea4e3d;
+}
+.skirt .number{
+    position: absolute;
+    right: 0.76rem;
+    bottom: 0.47rem;
+	font-size: 0.2rem;
+	color: #999999;
+}
+
+.content_details .remarks{
+    display: flex;
+    align-items: center;
+    padding: 0.3rem 0 0.29rem 0.3rem;
+}
+.remarks .remarks_text{
+	font-size: 0.3rem;
+	color: #333333;
+    margin-right: 0.31rem;
+}
+.remarks input{
+    width: 4.15rem;
+	font-size: 0.26rem;
+    color: #aaaaaa;
+	letter-spacing: 0rem;
+    
+}
+
+.coupon{}
+.coupon .serve{
+    padding: 0.22rem 0.23rem 0.16rem 0.33rem;
+}
+.coupon .serve .serve_purpose{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.serve_purpose .use{
+	font-size: 0.24rem;
+	color: #333333;
+}
+.serve_purpose .pass{
+	font-size: 0.24rem;
+	color: #f09c48;
+}
+.coupon .serve .serve_post{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.serve_post .other{
+    font-size: 0.24rem;
+	color: #333333;
+}
+.serve_post .run{
+	font-size: 0.24rem;
+	color: #333333;
+}
+
+
+.content_details .money{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.3rem 0.26rem 0.25rem 0.31rem;
+    margin-bottom: 0.16rem;
+}
+.content_details .money .money_l{
+	font-size: 0.3rem;
+	color: #333333;
+}
+.content_details .money .money_r{
+	font-size: 0.34rem;
+	color: #ea4e3d;
+}
+
+
+
+
+
+
+.footer{
+    width: 7.5rem;
+	height: 0.92rem;
+	background-color: #ffffff;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    /* justify-content: space-between; */
+    padding: 0.16rem 0.24rem 0.1rem 1.67rem;
+    box-sizing: border-box;
+}
+.footer .footer_total{
+    font-size: 0.26rem;
+	color: #999999;
+    margin-right: 0.27rem;
+}
+.footer .footer_dollar{
+    font-size: 0.26rem;
+	color: #000000;
+    margin-right: 0.42rem;
+}
+.footer .footer_settlement{
+    width: 1.92rem;
+    font-size: 0.28rem;
+	color: #ffffff;
+    background-color: #5697f4;
+	border-radius: 0.33rem;
+    text-align: center;
+    line-height: 0.66rem;
+}
+.footer_settlement span{
+}

历届学生/fontendseven/项目练习/个人练习/两个作业/CSS/css/index2.css

@@ -0,0 +1,222 @@
+.header{}
+.header .header_top{
+    /* width: 4.32rem; */
+	height: 0.8rem;
+	background-color: #828282;
+	border-radius: 0.4rem;
+    position: fixed;
+    top: 0.54rem;
+    left: 0.24rem;
+    display: flex;
+    align-items: center;
+    padding: 0.05rem 0.34rem 0.05rem 0.07rem;
+    box-sizing: border-box;
+    z-index: 9999;
+
+}
+.header .header_top_img{
+    width: 0.7rem;
+	height: 0.7rem;
+    border-radius: 100%;
+    margin-right: 0.09rem;
+}
+.header .header_top .user{
+  margin-right: 0.13rem;
+}
+.header .header_top .user .id{
+	font-size: 0.26rem;
+	color: #ffffff;
+}
+.header .header_top .user .addres{
+	font-size: 0.22rem;
+	color: #ffffff;
+}
+
+.header .header_top .follow{
+    /* width: 1.05rem; */
+	height: 0.45rem;
+    background: #ea4e3d;
+    border-radius: 30%;
+    display: flex;
+    align-items: center;
+    margin-left: 0.01rem;
+    padding-left: 0.08rem;
+    box-sizing: border-box;
+}
+.header .header_top .follow .follow_img{
+    width: 0.34rem;
+	height: 0.24rem;
+    margin-right: 0.1rem;
+}
+.header .header_top .follow .follow_text{
+	font-size: 0.24rem;
+	color: #ffffff;
+    margin-right: 0.1rem;
+}
+.content{
+    background-image:url("../kobe_1.jpg") ;
+    width: 100%;
+    height: calc(100vh - 1rem);
+    position: relative;
+}
+.content .content_text{
+    width: 100%;
+    position: fixed;
+    bottom:1rem;
+    left: 0.14rem;
+}
+.content .content_text .content_text_follow{
+    /* width: 3.59rem; 
+	height: 0.5rem;  */
+    background-color: #4799ee;
+	border-radius: 0.1rem;
+    padding: 0.13rem 0.18rem 0.1rem 0.17rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.31rem;
+    display: inline-block;
+}
+.content .content_text_follow img{
+    width: 0.34rem;
+	height: 0.24rem;
+    margin-right: 0.14rem;
+}
+.content .content_text_follow .thank{
+	font-size: 0.26rem;
+	color: #ffffff;
+}
+
+
+.content .content_text .evaluate{
+
+}
+.content .content_text .evaluate li{
+    width: 3.8rem;
+	/* height: 0.5rem; */
+
+    background-color:  #828282;
+	border-radius: 0.25rem;
+    padding: 0.13rem 0.17rem 0.12rem 0.23rem;
+    margin-bottom: 0.13rem;
+    box-sizing: border-box;
+}
+.content .evaluate li .evaluate_fly{
+	font-size: 0.26rem;
+	color: #4799ee;
+}
+.content .evaluate li .evaluate_order{
+    font-size: 0.26rem;
+    color: #ffffff;
+}
+
+
+ .commodity{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.3rem 0.25rem 0.09rem 0.3rem;
+    width: 100%;
+    z-index: 9999;
+    position: fixed;
+    bottom: 1rem;
+    box-sizing: border-box;
+  background-image: url(../kobe_2.jpg);
+}
+ .commodity li{
+    margin-right: 0.1rem;
+}
+ .commodity li:last-child{
+    margin-right: 0rem;
+}
+.commodity .img{
+    width: 0.1rem;
+	height: 0.65rem;
+    margin-bottom: 0.08rem;
+}
+.commodity .brand{
+	font-size: 0.2rem;
+	color: #000000;
+    margin-bottom: 0.17rem;
+}
+.commodity .sinze{
+	font-size: 0.2rem;
+	color: #ea4e3d;
+}
+
+
+
+
+
+
+.footer{
+    width: 100%;
+    height:1rem;
+    position: fixed;
+    bottom: 0rem;
+    left: 0rem;
+    display: flex;
+    align-items: center;
+    padding: 0.14rem 0.29rem 0.28rem 0.4rem;
+    box-sizing: border-box;
+    z-index: 99999;
+    background-image: url(../kobe_3.jpg);
+    
+}
+.footer .footer_left{
+    width: 0.63rem;
+	height: 0.63rem;
+	background-color: #4799ee;
+    border-radius: 50%;
+    margin-right: 0.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+   
+}
+
+.footer .footer_left img{
+    width: 0.36rem;
+	height: 0.34rem;
+}
+  
+.footer input{
+    width: 3.59rem;
+	height: 0.62rem;
+    background-color: #828282;
+	border-radius: 0.31rem;
+    margin-right: 0.29rem;
+
+}
+.footer .footer_right{
+    width: 2.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.footer .footer_right li{
+    background: #828282;
+    width: 0.63rem;
+	height: 0.63rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.footer .footer_right li img{
+   
+}
+.footer .footer_right li:nth-child(1) img{
+    width: 0.4rem;
+	height: 0.3rem;
+  
+   
+}
+.footer .footer_right li:nth-child(2) img{
+    width: 0.34rem;
+	height: 0.3rem;
+}
+.footer .footer_right li:nth-child(3) img{
+    width: 0.34rem;
+	height: 0.34rem;
+}

历届学生/fontendseven/项目练习/个人练习/两个作业/CSS/css/public.css

@@ -0,0 +1,5 @@
+/* 存放使用率高的css代码 */
+body {
+    font-size: 0px;
+    background-color:#f2f2f2;
+}

历届学生/fontendseven/项目练习/个人练习/两个作业/index.html

@@ -0,0 +1,148 @@
+<!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/css/clear.css">
+    <link rel="stylesheet" href="./CSS/css/public.css">
+    <link rel="stylesheet" href="./CSS/css/index.css">
+</head>
+<body>
+    <div class="header">
+        <img src="./img/back.png" alt="">
+        <div class="header_order">填写订单</div>
+        <div></div>
+    </div>
+    <div class="content">
+        <div class="content_address">
+            <div class="content_address_l">
+                <div class="content_address_t">
+                    <div class="name">张晓明</div>
+                    <div class="phone">186****0019</div>
+                </div>
+                <div class="content_address_detailed">
+                    上海市黄浦区中山南路128号千古美城1楼1210室
+                </div>
+            </div>
+            <img src="./img/zhankai.png" alt="">
+        </div>
+        <div class="conment_payment ">
+            <div class="conment_payment_mode">选择支付方式</div>
+            <div class="conment_payment_onli">
+                <span>在线支付</span>
+                <img src="./img/24gl-ellipsis.png" alt="">
+            </div>
+        </div>
+        <ul class="content_details">
+            <li class="content_details_shop">
+                <img src="./img/lihe.png" alt="" class="shop_title_l">
+                <div class="shop_title">路易斯女装旗舰店</div>
+                <img src="./img/r_zhankai.png" alt="" class="shop_title_r">
+            </li>
+            <li class="skirt">
+                <div class="skirt_text">
+                    <img src="./img/qunzi.png" alt="">
+                    <div class="real">
+                        <div class="real_title">真丝连衣裙2019春夏新款杭州大牌气质修…… </div>
+                        <div class="real_category">
+                            <div class="real_category_t">颜色：黑白</div>
+                            <div class="real_category_b">尺码：L</div>
+                        </div>
+                        <div class="real_price">￥160.00</div>
+                    </div>
+                    <div class="number">X1</div>
+                </div>
+            </li>
+            <li class="remarks">
+                <div class="remarks_text">订单备注</div>
+                <input type="text" value="有什么想对商家留言的可以在这里说">
+            </li>
+            <li class="coupon">
+                <ul class="serve">
+                    <li class="serve_purpose">
+                        <div class="use">优惠抵用</div>
+                        <div class="pass">-￥5</div>
+                    </li>
+                    <li class="serve_post">
+                        <div class="other">快递费用</div>
+                        <div class="run">免费包邮</div>
+                    </li>
+                </ul>
+            </li>
+            <li class="money">
+                <div class="money_l">商品金额</div>
+                <div class="money_r">￥155.00</div>
+            </li>
+        </ul>
+
+
+
+
+        <ul class="content_details">
+            <li class="content_details_shop">
+                <img src="./img/lihe.png" alt="" class="shop_title_l">
+                <div class="shop_title">路易斯女装旗舰店</div>
+                <img src="./img/r_zhankai.png" alt="" class="shop_title_r">
+            </li>
+            <li class="skirt">
+                <div class="skirt_text">
+                    <img src="./img/qunzi.png" alt="">
+                    <div class="real">
+                        <div class="real_title">真丝连衣裙2019春夏新款杭州大牌气质修…… </div>
+                        <div class="real_category">
+                            <div class="real_category_t">颜色：黑白</div>
+                            <div class="real_category_b">尺码：L</div>
+                        </div>
+                        <div class="real_price">￥160.00</div>
+                    </div>
+                    <div class="number">X1</div>
+                </div>
+            </li>
+            <li class="skirt">
+                <div class="skirt_text">
+                    <img src="./img/qunzi.png" alt="">
+                    <div class="real">
+                        <div class="real_title">真丝连衣裙2019春夏新款杭州大牌气质修…… </div>
+                        <div class="real_category">
+                            <div class="real_category_t">颜色：黑白</div>
+                            <div class="real_category_b">尺码：L</div>
+                        </div>
+                        <div class="real_price">￥160.00</div>
+                    </div>
+                    <div class="number">X1</div>
+                </div>
+            </li>
+            <li class="remarks">
+                <div class="remarks_text">订单备注</div>
+                <input type="text" value="有什么想对商家留言的可以在这里说">
+            </li>
+            <li class="coupon">
+                <ul class="serve">
+                    <li class="serve_purpose">
+                        <div class="use">优惠抵用</div>
+                        <div class="pass">-￥5</div>
+                    </li>
+                    <li class="serve_post">
+                        <div class="other">快递费用</div>
+                        <div class="run">免费包邮</div>
+                    </li>
+                </ul>
+            </li>
+            <li class="money">
+                <div class="money_l">商品金额</div>
+                <div class="money_r">￥155.00</div>
+            </li>
+        </ul>
+    </div>
+    <div class="footer">
+        <div class="footer_total">共3件,合计</div>
+        <div class="footer_dollar">¥5999.00</div>
+        <div class="footer_settlement">
+            <span>结算(2)</span>   
+        </div>
+    </div>
+</body>
+</html>

历届学生/fontendseven/项目练习/个人练习/两个作业/index2.html

@@ -0,0 +1,92 @@
+<!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/css/clear.css">
+    <link rel="stylesheet" href="./CSS/css/public.css">
+    <link rel="stylesheet" href="./CSS/css/index2.css">
+</head>
+<body>
+    <div class="header">
+        <div class="header_top">
+            <img src="./img/pazhe_gou.png" alt="" class="header_top_img">
+            <div class="user">
+                <div class="id">昵称 | ID：12345</div>
+                <div class="addres">7455观看| 首尔市</div>
+            </div>
+            <div class="follow">
+                <img src="./img/关注.png" alt="" class="follow_img">
+                <span class="follow_text">关注</span>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_text">
+            <div class="content_text_follow">
+                <img src="./img/关注.png" alt="">
+                <span class="thank">我是嘟嘟嘴 关注了主播</span>
+            </div>
+            <ul class="evaluate">
+                <li>
+                    <span class="evaluate_fly">小飞仙：</span>
+                    <span class="evaluate_order">我下单啦查看下</span>
+                </li>
+                <li>
+                    <span class="evaluate_fly">小飞仙：</span>
+                    <span class="evaluate_order">我下单啦查看下</span>
+                </li>
+                <li>
+                    <span class="evaluate_fly">小飞仙：</span>
+                    <span class="evaluate_order">我下单啦查看下</span>
+                </li>
+                <li>
+                    <span class="evaluate_fly">小飞仙：</span>
+                    <span class="evaluate_order">我下单啦查看下</span>
+                </li>
+                <li>
+                    <span class="evaluate_fly">小飞仙：</span>
+                    <span class="evaluate_order">我下单啦查看下</span>
+                </li>
+            </ul>
+            
+        </div>
+        <ul class="commodity">
+            <li>
+                <img src="./img/shop.png" alt="">
+                <div class="brand">品牌经典多…</div>
+                <div class="sinze">￥160.00</div>
+            </li>
+            <li>
+                <img src="./img/shop.png" alt="">
+                <div class="brand">品牌经典多…</div>
+                <div class="sinze">￥160.00</div>
+            </li>
+            <li>
+                <img src="./img/shop.png" alt="">
+                <div class="brand">品牌经典多…</div>
+                <div class="sinze">￥160.00</div>
+            </li>
+            <li>
+                <img src="./img/shop.png" alt="">
+                <div class="brand">品牌经典多…</div>
+                <div class="sinze">￥160.00</div>
+            </li>
+        </ul>
+    </div>
+    <div class="footer">
+        <div class="footer_left">
+            <img src="./img/礼物 活动.png" alt="">
+        </div>
+        <input type="text" value="说些什么...">
+        <ul class="footer_right">
+            <li><img src="./img/return.png" alt=""></li>
+            <li><img src="./img/爱心 (1).png" alt=""></li>
+            <li><img src="./img/开关.png" alt=""></li>
+        </ul>
+    </div>
+</body>
+</html>

历届学生/fontendseven/项目练习/个人练习/两个作业/js/rem.js

@@ -0,0 +1,14 @@
+
+window.onload = function(){
+    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
+      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
+    getRem(720,100)
+};
+window.onresize = function(){
+    getRem(720,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";
+}