first commit

历届学生/fontendsix/项目练习/学生项目/王安民/10-27/css/t50.css

@@ -0,0 +1,400 @@
+
+.header {
+    width: 100%;
+    height: 0.9rem;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    top: 0;
+    padding: 0.15rem 0.3rem;
+    box-sizing: border-box;
+    z-index: 999;
+}
+
+.header .return {
+    width: 0.2rem;
+	height: 0.33rem;
+    margin-right: 0.4rem;
+    margin-top: 0.14rem;
+}
+
+.search {
+	background-color: #f2f2f2;
+	border-radius: 0.3rem;
+    flex: 1;
+}
+
+.search {
+    display: flex;
+    padding: 0.13rem 0.24rem;
+}
+
+.search img {
+    margin-right: 0.18rem;
+}
+
+.search input {
+    border: none;
+    background-color: rgba(255, 255, 255, 0);
+    font-size: 0.26rem;        
+	color: #808080;
+}
+
+.shop {
+	height: 3.09rem;
+    background: url(../img/shop_top.png);
+    background-size: contain;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    padding: 0 0.3rem;
+}
+
+.shop_rel {
+    width: 100%;
+    height: 0.9rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.12rem;
+}
+.shop_left {
+    display: flex;
+}
+.shop_left img {
+    margin-right: 0.25rem;
+    width: 0.9rem;
+	height: 0.9rem;
+}
+.shop_name {
+    font-size: 0.3rem;
+	color: #ffffff;
+    margin-bottom: 0.18rem;
+}
+.shop_fans {
+    font-size: 0.22rem;
+	color: #ffffff;
+}
+.shop_right {
+    width: 1.08rem;
+	height: 0.48rem;
+	background-color: #ea4e3d;
+	border-radius: 0.24rem;
+    font-size: 0.26rem;
+	color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}  
+
+.shop_list {
+    width: 100%;
+    align-items: flex-end;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+    margin-top: 0.33rem;
+
+}
+
+.shop_list li {
+    font-size: 0.26rem;
+	color: #ffffff;
+    
+}
+
+.Discount {
+    display: flex;
+    background: url(../img/shop_bottom.png);
+    padding-top: 0.21rem;
+    padding-bottom: 0.29rem;
+    padding-left: 0.24rem;
+    overflow-y: scroll;
+}
+.Discount li{
+    width: 2.93rem;
+	height: 1.28rem;
+	background:url(../img/Discount.png);
+    background-size: contain;
+	border-radius: 0.25rem;
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    align-items: center;
+    margin-right: 0.11rem;
+}
+.Discount {
+    
+}
+.Discount_left {
+    width: 1.56rem;
+}
+.Discount_right {
+    width: 1.33rem;
+}
+.Discount_left p{
+    font-size: 0.58rem;
+	color: #ffffff;
+}
+
+.Discount_left div{
+    font-size: 0.2rem;
+	color: #ffffff;
+    zoom: 0.8;
+    
+}
+
+.Discount_right p{
+    font-size: 0.3rem;
+	color: #659fdc;
+}
+
+.Discount_right div{
+    width: 1.05rem;
+	height: 0.36rem;
+	border-radius: 0.18rem;
+    background-color: #659fdc;
+    font-size: 0.2rem;
+	color: #ffffff;
+    margin: 0 auto;
+    margin-top: 0.18rem;
+}
+.turn {
+    position: relative;
+    height: 7.5rem;
+}
+.turn img {
+    width: 100%;
+}
+.turn ul {
+    position: absolute;
+    bottom: 0.08rem;
+    left: 50%;
+    display: flex;
+    justify-content: space-between;
+    transform: translateX(-50%);
+}
+.turn li {
+    width: 0.16rem;
+	height: 0.16rem;
+	background-color: #ffffff;
+	opacity: 0.5;
+    border-radius: 50%;
+    margin-right: 0.08rem;
+}
+.turn li:last-child {
+    margin-right: 0;
+}
+ 
+.live {
+    display: flex;
+    width: 7.02rem;
+	height: 1.9rem;
+    margin: 0.48rem 0.25rem;
+    justify-content: space-between;
+}
+.live_left img {
+    width: 1.88rem;
+	height: 1.88rem;
+    margin-right: 0.26rem;
+}
+.live_red {
+    width: 1.07rem;
+	height: 0.38rem;
+    background-color: #ea3543;
+    font-size: 0.26rem;
+    color:#ffffffde;
+    border-radius: 0.1rem;
+    text-align: center;
+    margin-right: 0.13rem;
+    
+}
+
+.live_left {
+    display: flex;
+}
+.live_center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.live_center_zb {
+    display: flex;
+}
+
+.live_center p {
+    font-size: 0.32rem;;
+	color: #323232;
+    margin-bottom: 0.2rem;
+}
+.live_left span {
+    font-size: 0.26rem;
+	color: #595959;
+}
+.live_right p {
+    font-size: 0.22rem;
+	color: #ea363d;
+}
+.heart {
+    width: 0.44rem;
+	height: 0.44rem;
+    margin-bottom: 0.11rem;
+}
+.live_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.Second_purchase_title {
+    display: flex;
+    justify-content: space-between;
+    padding-left: 0.28rem;
+    padding-right: 0.26rem;
+    align-items: center;
+}
+
+.s_p_t_left {
+    display: flex;
+    align-items: center;
+}
+
+.s_p_t_left img {
+    width: 0.31rem;
+	height: 0.31rem;
+}
+
+.s_p_t_left p {
+    margin-left: 0.13rem;
+    font-size: 0.32rem;
+	color: #333333;
+}
+
+.s_p_t_right {
+    font-size: 0.26rem;
+	color: #999999;
+    display: flex;
+    align-items: center;  
+}
+
+.s_p_t_right span {
+    font-size: 0.26rem;
+	color: #999999;
+}
+.s_p_t_right ul {
+    margin-left: 0.09rem;
+    display: flex;
+    
+
+}
+.s_p_t_right li {
+    display: flex;
+}
+.s_p_t_right li p{
+    width: 0.32rem;
+	height: 0.32rem;
+	background-color: #eeeeee;
+	border-radius: 0.02rem;
+    font-size: 0.24rem;
+	color: #333333;
+    text-align: center;
+    
+}
+
+.s_p_t_right div {
+    width: 0.25rem;
+    text-align: center; 
+    font-size: 0.26rem;
+	color: #999999;
+}
+.Second_purchase_content {
+    margin: 0.42rem 0.24rem 0.19rem 0.24rem;
+}
+.Second_purchase_content img{
+    width: 1.6rem;
+    border-radius: 0.06rem;
+    margin-bottom: 0.19rem;
+}
+.Second_purchase_content {
+    display: flex;
+}
+.Second_purchase_content li {
+   margin-right: 0.21rem;
+}
+.Second_purchase_content p {
+    font-size: 0.32rem;
+	color: #ea4e3d;
+}
+
+.Second_purchase_content p span {
+    font-size: 0.24rem;
+	color: #ea4e3d;
+}
+
+.Second_purchase {
+    border-bottom: solid #f9f9f9 0.2rem;
+}
+.Second_purchase_content {
+    margin-bottom: 0.7rem;
+}
+.today_title {
+    padding-top: 0.43rem;
+    display: flex;
+    justify-content: center ;
+    padding-bottom: 0.32rem;
+    border-bottom: solid #f6f6f6 0.01rem;
+}
+.today_title  div{
+    font-size: 0.32rem;
+	color: #4799ee;
+    margin: 0 0.17rem;
+}
+.today_content li {
+    padding: 0.19rem;
+    display: flex;
+}
+
+.sp {
+    width: 1.7rem;
+	height: 2.06rem;
+    margin-right: 0.21rem;
+}
+
+.today_content_right {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+.today_content_right p {
+    font-size: 0.28rem;
+	color: #333333;
+}
+.today_content_num {
+    display: flex;
+    align-items: center;
+}
+.today_content_n {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.today_content_num p{
+    font-size: 0.34rem;
+	color: #ea4e3d;
+}
+
+.today_content_user img {
+    width: 0.42rem;
+	height: 0.42rem;
+}
+.today_content_user img:last-child {
+    position: relative;
+    right:0.15rem
+}
+
+.today_content_num span{
+    margin-left: 0.26rem;
+    font-size: 0.24rem;
+	color: #999999;
+}

历届学生/fontendsix/项目练习/学生项目/王安民/10-27/js/rom.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";
+}

历届学生/fontendsix/项目练习/学生项目/王安民/10-27/t50.html

@@ -0,0 +1,224 @@
+<!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>
+    <link rel="stylesheet" href="../clear.css">
+    <link rel="stylesheet" href="css/">
+    <link rel="stylesheet" href="css/t50.css">
+</head>
+<body>
+    <div class="header">
+        <img src="img/return.png" class="return" alt="">
+        <div class="search">
+            <img src="img/search.png" alt="">
+            <input type="text" value="试试搜索夏季连衣裙">
+        </div>
+    </div>
+    <div class="content">
+        <div class="shop">
+            <div class="shop_rel">
+                <div class="shop_left">
+                    <img src="img/headimg.png" alt="">
+                    <div>
+                        <p class="shop_name">菲尔斯盾旗舰店</p>
+                        <p class="shop_fans">粉丝3.4万 </p>
+                    </div>
+                </div>
+                <div class="shop_right">+ 关注</div>
+            </div>
+            <ul class="shop_list">
+                <li>首页</li>
+                <li>商品</li>
+                <li>上新</li>
+                <li>优惠</li>
+                <li>动态</li>
+            </ul>
+        </div>
+        <ul class="Discount">
+            <li>
+                <div class="Discount_left">
+                    <p>￥ 5</p>
+                    <div>满99元可使用</div>
+                </div>
+                <div class="Discount_right">
+                    <p>优惠券</p>
+                    <div>立即领取</div>
+                </div>
+            </li>
+            <li>
+                <div class="Discount_left">
+                    <p>￥ 5</p>
+                    <div>满99元可使用</div>
+                </div>
+                <div class="Discount_right">
+                    <p>优惠券</p>
+                    <div>立即领取</div>
+                </div>
+            </li>
+            <li>
+                <div class="Discount_left">
+                    <p>￥ 5</p>
+                    <div>满99元可使用</div>
+                </div>
+                <div class="Discount_right">
+                    <p>优惠券</p>
+                    <div>立即领取</div>
+                </div>
+            </li>
+            <li>
+                <div class="Discount_left">
+                    <p>￥ 5</p>
+                    <div>满99元可使用</div>
+                </div>
+                <div class="Discount_right">
+                    <p>优惠券</p>
+                    <div>立即领取</div>
+                </div>
+            </li>
+            <li>
+                <div class="Discount_left">
+                    <p>￥ 5</p>
+                    <div>满99元可使用</div>
+                </div>
+                <div class="Discount_right">
+                    <p>优惠券</p>
+                    <div>立即领取</div>
+                </div>
+            </li>
+        </ul> 
+    </div>
+    <div class="turn">
+        <img src="img/banner1.png" alt="">
+        <ul>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+    </div>
+
+    <div class="live">
+        <div class="live_left">
+            <img src="img/zb.png" alt="">
+            <div class="live_center">
+                <p>秒杀终极专场！！！</p>
+                <div class="live_center_zb">
+                    <div class="live_red ">●直播中</div>
+                    <span>3857观看</span>
+                </div>
+            </div>
+        </div>
+        <div class="live_right">
+            <img class="heart" src="img/heart.png"></img>
+            <p>2349</p>
+        </div>
+    </div>
+    <div class="Second_purchase">
+        <div class="Second_purchase_title">
+                <div class="s_p_t_left">
+                    <img src="img/clock.png" alt="">
+                    <p>限时秒购</p>
+                </div>
+                <div class="s_p_t_right">
+                    <span>距结束</span>
+                    <ul>
+                        <li>
+                            <p>30</p>
+                            <div>:</div>
+                        </li>
+                        <li>
+                            <p>08</p>
+                            <div>:</div>
+                        </li>
+                        <li>
+                            <p>42</p>
+                        </li>
+                    </ul>
+                </div>
+        </div>
+        <ul class="Second_purchase_content">
+            <li>
+                <img src="img/clock_img.png" alt="">
+                <p>388.<span>00</span></p>
+            </li>
+            <li>
+                <img src="img/clock_img.png" alt="">
+                <p>388.<span>00</span></p>
+            </li>
+            <li>
+                <img src="img/clock_img.png" alt="">
+                <p>388.<span>00</span></p>
+            </li>
+            <li>
+                <img src="img/clock_img.png" alt="">
+                <p>388.<span>00</span></p>
+            </li>
+        </ul>
+    </div>
+    <div class="today">
+        <div class="today_title">
+            <img src="img/left.png" alt="">>
+            <div>今日必拼</div>
+            <img src="img/right.png" alt="">
+        </div>
+        <ul class="today_content">
+            <li>
+                <img class="sp" src="img/sp.png" alt="">
+                <div class="today_content_right">
+                    <p>2019夏季新款牛仔短裤女宽松阔腿热裤韩
+                        版百搭胖mm夏装显瘦潮</p>
+                    <div class="today_content_n">
+                        <div class="today_content_num">
+                            <p>￥200.00</p>
+                            <span>已拼10万+件</span>
+                        </div>
+                        <div class="today_content_user">
+                            <img src="img/user1.png" alt="">
+                            <img src="img/user2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <img class="sp" src="img/sp.png" alt="">
+                <div class="today_content_right">
+                    <p>2019夏季新款牛仔短裤女宽松阔腿热裤韩
+                        版百搭胖mm夏装显瘦潮</p>
+                    <div class="today_content_n">
+                        <div class="today_content_num">
+                            <p>￥200.00</p>
+                            <span>已拼10万+件</span>
+                        </div>
+                        <div class="today_content_user">
+                            <img src="img/user1.png" alt="">
+                            <img src="img/user2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <img class="sp" src="img/sp.png" alt="">
+                <div class="today_content_right">
+                    <p>2019夏季新款牛仔短裤女宽松阔腿热裤韩
+                        版百搭胖mm夏装显瘦潮</p>
+                    <div class="today_content_n">
+                        <div class="today_content_num">
+                            <p>￥200.00</p>
+                            <span>已拼10万+件</span>
+                        </div>
+                        <div class="today_content_user">
+                            <img src="img/user1.png" alt="">
+                            <img src="img/user2.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            v
+        </ul>
+    </div>
+    <div class="footer"></div>
+</body>
+<script src="js/rom.js"></script>
+</html>