first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/psd（46）/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（46）/css/index.css

@@ -0,0 +1,248 @@
+.footer{/*尾部*/
+    
+       width: 100%;
+       height: 1rem;
+       background-color: #000000;
+       position: fixed;
+       bottom: 0;
+       z-index: 999;
+}
+/*上下遮挡
+父容器高度*/
+.footer ul{
+    width: 100%;
+    height: 100%;
+    display:flex;
+    align-items:center;
+    justify-content: space-between;
+}
+.footer ul li{
+    font-size: 0.24rem;
+    color: #ffffff;
+}
+.footer ul li:first-child{
+    margin-left: 0.39rem;
+}
+.footer ul li:last-child{
+    margin-right: 0.39rem;
+}
+.footer ul li+.choice{
+    font-size: 0.3rem;
+    color: #ffffff;  
+    position: relative;
+}
+.footer ul li+.choice::after{
+    content: "";
+    width: 0.51rem;
+    height: 0.03rem;
+    background-color: #ffffff;
+    border-radius: 0.015rem;
+    position: absolute;
+    bottom: -0.24rem;
+    right: 50%;
+    transform: translateX(50%);
+    margin-top: 0.36rem;
+}
+/*头部*/
+.header{
+	width:100%;
+	height: 5.5rem;
+    background: url(../img/back.png);
+    background-size: cover;
+}
+.header_top{
+    /* width: 100%;
+    height: 0.36rem; */
+    display: flex;
+    align-items:center;
+    justify-content:flex-end;
+    padding-top: 0.7rem;
+}
+.header_top span{
+	font-size: 0.36rem;
+	color: #ffffff;
+    margin-left: 0.35rem;
+}
+.header_top img{
+ margin-right: 0.43rem;
+ margin-left: 1.91rem;
+}
+.header_top .choice{
+    position: relative;
+}
+.header_top .choice::after{
+    content: "";
+    width: 0.4rem;
+	height: 0.04rem;
+	background-color: #ffffff;
+	border-radius: 0.02rem;
+    position: absolute;
+    bottom: -0.1rem;
+    right: 50%;
+    transform: translateX(50%);
+
+}
+/*中部*/
+.content{
+    background: #ffffff;
+    margin-bottom: 60px;
+}
+.content_1{
+    display: flex;
+    font-size: 0;
+    margin-top: 0.42rem;
+    margin-left: 0.24rem;
+}
+/*图片*/
+.photo{
+    position: relative;
+
+        width: 1.1rem;
+        height: 0.88rem;
+    
+    
+}
+.photo .user{
+    width: 0.86rem;
+	height: 0.86rem;
+    border-radius: 100%;
+
+}
+.photo .shop{
+	width: 0.3rem;
+	height: 0.3rem;
+    position: absolute;
+    bottom: -0.02rem;
+    left: 0.67rem;}
+/*布局*/
+.layout{
+    width: 5.9rem;
+    font-size: 0px;
+}
+/*顶部*/
+.layout_top{
+    width: 5.7rem;
+    display: flex;
+    justify-content:space-between
+}
+.layout_top .top_1{
+    font-size: 0.3rem;
+    color: #5a6f92;
+    
+}
+.layout_top .top_2{
+    font-size: 0.24rem;
+    color: #999999;
+}
+.layout_worder{
+    margin-top: 0.1rem;
+    font-size: 0.24rem;
+    line-height: 0.36rem;
+    color: #686868;
+}
+/*图片*/
+.tupian{
+    display:flex;
+}
+.tupian li{
+    position: relative;
+    margin-right: 0.11rem;
+}
+.tupian li:last-child{
+    margin-right:0;
+}
+.tupian li .kh{
+	width: 1.85rem;
+	height: 1.85rem;
+}
+.tupian li .bj{
+    background: url(../img/yinying.png);
+    width: 1.85rem;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content:flex-end;
+}
+.tupian li .bj span{
+        font-size: 0.24rem;
+        color: #ffffff;
+}
+
+/*图片底部*/
+.dibu_1{
+    display: flex;
+    justify-content:space-between;
+    margin-top: 0.28rem;
+    margin-right: 0.3rem;
+}
+.dibu_1 img{
+width: 0.39rem;
+height: 0.27rem;
+    
+    
+}
+.dibu_1 .wenzi .dibu_2{
+   
+     
+        font-size: 0.24rem;
+       
+        color: #989898;
+    }
+.dibu_1 .wenzi .dibu_3{
+font-size: 0.2rem;
+color: #989898;
+}
+/*点赞评论*/
+/*点赞*/
+.love_pl{
+        width: 5.7rem;
+        background-color: #f7f7f7;
+        border-radius: 0.1rem;
+        margin-top: 0.16rem;
+}
+.love_pl .love {
+    height: 0.77rem;
+    width: 100%;
+    display: flex;
+    align-items:center;
+    justify-content: flex-start;
+    border-bottom: 1px solid #f2f2f2;
+    box-sizing: border-box;
+}
+.love_pl .love img{
+        margin-left: 0.28rem;
+        width: 0.29rem;
+        height: 0.26rem;
+        margin-right: 0.1rem;
+    
+}
+.love_pl .love span {
+    font-size: 0.3rem;
+    color: #5a6f92;
+    font-weight: 550;
+}
+.love_pl .love p{
+    font-size: 0.3rem;
+    margin-left: 0.15rem;
+    color: #3c3c3c;
+    
+}
+/*评论*/
+.discuss{
+    margin-top: 0.2rem;
+    margin-left: 0.29rem;
+    
+
+}
+.discuss li{ 
+    padding-bottom: 0.15rem;
+}
+.discuss .discuss_1{
+   font-size: 0.3rem;
+	color: #5a6f92;
+}
+.discuss .discuss_2{
+    font-size: 0.3rem;
+    color: #0e0e0e;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/psd（46）/index.html

@@ -0,0 +1,176 @@
+<!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(46)</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">
+        <div class="header_top">
+            <span class="choice">圈子</span>
+            <span>附近</span>
+            <img src="./img/camera.png" alt="">
+        </div>
+    </div>
+    <div class="content">
+        <div class="content_1">
+            <!--当作ul-->
+            <div class="photo">
+                <img class="user" src="./img/user.png" alt="">
+                <img class="shop" src="./img/shop.png" alt="">
+            </div>
+            <div class="layout">
+                <div class="layout_top"><!--顶部-->
+                    <h3 class="top_1">护肤品专卖店</h3>
+                    <span class="top_2">>200km</span>
+                </div>
+                <div class="layout_worder"><!--文字部分-->
+                    我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲好用我亲测我亲测我亲测我亲测
+                </div>
+                <ul class="tupian"><!--图片部分-->
+                    <li>
+                        <img class="kh" src="./img/kh.png" alt="">
+                       <div class="bj">
+                        <span>￥</span>
+                        <span>289</span>
+                        <span>.00</span>
+                       </div>
+                    </li>
+                    <li>
+                        <img class="kh" src="./img/kh.png" alt="">
+                        <div class="bj">
+                            <span>￥</span>
+                            <span>289</span>
+                            <span>.00</span>
+                           </div>
+                    </li>
+                    <li>
+                        <img class="kh" src="./img/kh.png" alt="">
+                        <div class="bj">
+                            <span>￥</span>
+                            <span>289</span>
+                            <span>.00</span>
+                           </div>
+                    </li>
+                    
+                </ul>
+                <div class="dibu_1"><!--ul底部-->
+                    <div class="wenzi">
+                        <span class="dibu_2">3</span>
+                    <span class="dibu_3">分钟前</span>
+                    </div>
+                    <img src="./img/san.png" alt="">
+                </div>
+                <div class="love_pl">
+                    <div class="love"><!--点赞-->
+                        <img src="./img/xin.png" alt="">
+                        <span>张三</span>
+                        <p>、</p>
+                        <span>李</span>
+                    </div>
+                    <ul class="discuss">
+                        <li>
+                            <span class="discuss_1">小可</span>
+                            <span class="discuss_2">:精彩</span>
+                        </li>
+                        <li>
+                            <span class="discuss_1">小可</span>
+                            <span class="discuss_2">:精彩</span>
+                        </li>
+                      
+                    </ul>
+                </div>
+                
+            </div>
+        </div>
+        <div class="content_1">
+            <!--当作ul-->
+            <div class="photo">
+                <img class="user" src="./img/user.png" alt="">
+                <img class="shop" src="./img/shop.png" alt="">
+            </div>
+            <div class="layout">
+                <div class="layout_top"><!--顶部-->
+                    <h3 class="top_1">护肤品专卖店</h3>
+                    <span class="top_2">>200km</span>
+                </div>
+                <div class="layout_worder"><!--文字部分-->
+                    我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲测好用我亲好用我亲测我亲测我亲测我亲测
+                </div>
+                <ul class="tupian"><!--图片部分-->
+                    <li>
+                        <img class="kh" src="./img/kh.png" alt="">
+                       <div class="bj">
+                        <span>￥</span>
+                        <span>289</span>
+                        <span>.00</span>
+                       </div>
+                    </li>
+                    <li>
+                        <img class="kh" src="./img/kh.png" alt="">
+                        <div class="bj">
+                            <span>￥</span>
+                            <span>289</span>
+                            <span>.00</span>
+                           </div>
+                    </li>
+                    <li>
+                        <img class="kh" src="./img/kh.png" alt="">
+                        <div class="bj">
+                            <span>￥</span>
+                            <span>289</span>
+                            <span>.00</span>
+                           </div>
+                    </li>
+                    
+                </ul>
+                <div class="dibu_1"><!--ul底部-->
+                    <div class="wenzi">
+                        <span class="dibu_2">3</span>
+                    <span class="dibu_3">分钟前</span>
+                    </div>
+                    <img src="./img/san.png" alt="">
+                </div>
+                <div class="love_pl">
+                    <div class="love"><!--点赞-->
+                        <img src="./img/xin.png" alt="">
+                        <span>张三</span>
+                        <p>、</p>
+                        <span>李</span>
+                    </div>
+                    <ul class="discuss">
+                        <li>
+                            <span class="discuss_1">小可</span>
+                            <span class="discuss_2">:精彩</span>
+                        </li>
+                        <li>
+                            <span class="discuss_1">小可</span>
+                            <span class="discuss_2">:精彩</span>
+                        </li>
+                      
+                    </ul>
+                </div>
+                
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        <ul>
+            <li>首页</li>
+            <li>好友</li>
+            <li class="choice">圈子</li>
+            <li>购物车</li>
+            <li>我的</li>
+        </ul>
+    </div>
+</body>
+
+</html>

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