2019-08-07

蘑菇街网站的基本界面搭建
![7R]YMJW1@BTHG2]{J.png](https://upload-images.jianshu.io/upload_images/19122719-cc1211187ffc7195.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
下午两个半小时就主要搭建了这两个部分
第一部分是导航条
导航条分为了上下两个部分，两个部分都有版心
命名方面 导航条nav ；上下两个部分为nav-top，nav-bottom；版心为nav-in ；
![49CB1HH531VY%$NVSY11NA.png](https://upload-images.jianshu.io/upload_images/19122719-f11ae3b90d6dcbb2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 上面一部分，很明显有在版心里面放一个ul，之后用li里面加上字体图标和一些文字最后让ul浮动以下就可以完成。 ![BN_ACMY$NM9KCEON}7G8]M.png](https://upload-images.jianshu.io/upload_images/19122719-b0edc8f176f79b52.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
下面一部分，同样有版心，首先由一个h1的标签的logo，然后一个菜单menu，一个搜索框，一个ul的li字体图标和文字，最后一个登录样式。
都是在同一水平上的，将版心做成一个弹性盒，
display: flex; 伸缩布局
justify-content: left; //justify-content:flex-start;从头部开始排版
align-items: center; 垂直居中
不只是版心用了伸缩布局，搜索框和后面一部分都用了主要是要同一平面上。

再来还有用js做了一个吸顶的效果
function initNav() {
//1.拿到原有的顶部的导航
let oNav = document.querySelector(".nav");
let oNav2 = document.querySelector(".nav2");
//2.拿到原有的顶部导航的高度
let navHeight = oNav.offsetHeight;
//3.监听网页的滚动
window.onscroll = function () {
//4.获取到滚动的范围
let offsetY = getPageScroll().y;
//5.判断滚动出去的高度是否已经超出了原有顶部导航的高度
if (offsetY >= navHeight) {
//显示吸顶的导航
oNav2.style.top = "0px";
} else {
//隐藏吸顶的导航
oNav2.style.top = "-100px";
}
};
}
第二部分是一张图片，今天只做了一张样板，之后会用js动态添加做成瀑布流的布局。
首先做了一个基本的展示，后面鼠标移上去还有一个蒙版效果

html代码
<div class="main">
<div class="main-in">
<div class="item">
<div class="item-box">
<div class="item-top">
<img src="images/test.jpg" alt="">
<div class="play"><img src="images/play.png" alt=""></div>
<div class="title"><img src="images/sold.png" alt="">1件商品</div>
<div class="mask">
<ul>
<li>
<span>446</span>
</li>
<li></li>
</ul>
<div class="mask-info">
<div class="mask-title">
<img src="images/sold.png" alt="">
1件商品
</div>
<div class="mask-des">
#不止爱你三千遍#“人鱼姬”这个词在这两年突然风靡起来人鱼姬眼影人鱼姬腮红人鱼姬口红等等一直在找好看的人鱼姬面料给你做成衣服出来当时看到这个面料的时候再一次被惊喜到而且颜色太太美了版型优xiu满fen穿过我家类似版型的吊带裙的宝宝应该都知道的啦按喜欢的码数直接入手就对了胸前细条压褶加小卷边设计透出满满的小女人甜感这件裙子谁穿谁美不骗人对于小个子的宝宝这条裙子简直是宝藏连衣裙
</div>
</div>
</div>
</div>
<div class="item-bottom">
<a href="#">
<img src="https://s3.mogucdn.com/mlcdn/0ffcd9/180831_34lig093i41jdh2j9jlg7d99dd9a3_197x202.png_200x200.jpg_200x200.jpg" alt="">
H&M
</a>
</div>
</div>
</div>
</div>
</div>
scss代码
.main{
width: 100%;
.main-in{
width: 1200px;
margin: 0 auto;
.item{
width: 220px;
background: #FFFFFF;
border-radius: 15px;
overflow: hidden;
.item-box{
width: 100%;
position: relative;
left: 0;
top: 0;
transition:top 0.3s linear 0s;
.item-top{
position: relative;
&>img{
width: 100%;
}
.play{
position: absolute;
left: 10px;
top: 10px;
z-index: 666;
}
.title{
position: absolute;
left: 0;
bottom: 0;
padding: 0 10px;
box-sizing: border-box;
height: 40px;
line-height: 40px;
color: #FFFFFF;
img{
margin-right: 5px;
vertical-align: text-bottom;
}
}
.mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 0;
display: none;
ul{
position: absolute;
top: 10px;
right: 10px;
li{
width: 42px;
height: 42px;
background: url("./../images/icons.png") no-repeat;
&:nth-child(1){
background-position: -5px -5px;
margin-bottom: 10px;
span{
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #f46;
position: absolute;
top: -4px;
right: -4px;
color: #FFFFFF;

              }
            }
            &:nth-child(2){
              background-position: -5px -57px;
            }
          }
        }
        .mask-info{
          color: #FFFFFF;
          position: absolute;
          left: 0;
          bottom: 0;
          padding: 10px;
          .mask-title{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #FFFFFF;
            img{
              vertical-align: text-bottom;
            }
          }
          .mask-des{
            /*只能谷歌浏览器*/
            /*     overflow: hidden;
                 text-overflow: ellipsis;
                 display: -webkit-box;
                 -webkit-line-clamp:3;
                 -webkit-box-orient:vertical;*/
          }

        }
      }
    }
    .item-bottom{
      padding: 10px;
      a{
        color: #333333;
        background: #cccccc;
        padding: 2px;
        border-radius: 3px;
        img{
          width: 14px;
          vertical-align: text-bottom;
        }
      }

    }
  }
  &:hover{
    .item-box{
      top: -5px;
      .item-top{
        .title{
          display: none;
        }
        .mask{
          display: block;
        }
      }
      .item-bottom{
        background: #f1f1f1;
        a{
          background: #FFFFFF;
        }
      }
    }
  }
}

}
}

js初始化控制文字行数的代码
function initTextRow() {

/*   

//1.拿到需要操作的元素
let oDes=document.querySelector(".mask-des");
//2.拿到行高
let lineHeight=parseFloat(getComputedStyle(oDes).lineHeight);
//3.拿到元素的高度
let height=parseFloat(getComputedStyle(oDes).height);
//4.判断元素的高度是否超出了3倍的行高
if(height>lineHeight3){
oDes.style.height=(3lineHeight)+"px";
oDes.style.overflow="hidden";
}
*/

let oDes = document.querySelector(".mask-des");
$clamp(oDes, {clamp: 3});

}

css控制文字行数行数
.mask-des{
/只能谷歌浏览器/
/* overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;*/
}