目录
遍历数组 forEach方法！！！——加强版的for循环，数组对象的时候使用
一、头部的搜索栏以及底部的图标
它俩都为固定定位，后面用js实现点击底部图标可跳转出对应的内容，但是底部栏一直都是纯在的，顶部搜索在某些页面需要隐藏
（ps：这里就出现了一个问题我自己也搞不明白display：none和display：flex是不兼容的，因为隐藏等再次点击之后排版的flex不起效，求一个大佬告诉我咋整【哭】）
HTML：
<body>
<!-- 头部搜索栏固定 -->
<header>
<div class="left">
<p>广州<i class="iconfont icon-right"></i></p>
</div>
<div class="search">
<input type="text" placeholder="美甲依你锁定">
<a href="#">
<i class="iconfont icon-search"></i>
</a>
</div>
<div class="right">
<i class="iconfont icon-scan"></i>
<!-- <img src="../js/vidio.html" alt=""> -->
</div>
</header>
<!-- 底部
1、五个字体图标+五个底部说明字 -->
<footer>
<div class="home active">
<i class="iconfont icon-home_light"></i>
<p>首页</p>
</div>
<div class="home">
<i class="iconfont icon-we "></i>
<p>优推</p>
</div>
<div class="home">
<i class="iconfont icon-cart_light"></i>
<p>go物车</p>
</div>
<div class="home">
<i class="iconfont icon-message_light"></i>
<p>消息</p>
</div>
<div class="home">
<i class="iconfont icon-discover"></i>
<p>我滴</p>
</div>
</footer>
</body> LESS:（在渲染的时候，可以添加类似于美团搜索栏的那种渐变效果，显得不是那么呆板）
//运用简单的引用提高效率
@color:powderblue;
@color1:#fff;
@vw:3.75vw;body{
background-color: #f4f4f4;
}
header {
/* 头部固定 */
position: fixed;
display: flex;
// 主轴对齐方式
justify-content: space-between;
// 侧轴对齐方式
align-items: center;
top: 0;
left: 0;
width: 100%;
height: (60 / @vw);
padding: 0 (10 / @vw) (10 / @vw);
// background-color: powderblue;
background-image: linear-gradient(to bottom, @color,#f4f4f4);
.left {
font-size: 14px;
.iconfont{
font-size: 14px;
}
}
.search {
position: relative;
}
.search a {
position: absolute;
top: (5 / 3.75vw);
right: (20 / 3.75vw);
}
.search input {
width: (250 / 3.75vw);
height: (30 / 3.75vw);
border-radius: (30 / 3.75vw);
padding-left: 10px;
color: #ddd;
}
.right i {
font-size: 30px;
}
}
footer {
position: fixed;
bottom: 0;
left: 0;
display: flex;
// 主轴对齐方式
justify-content: space-around;
// 侧轴对齐方式
align-items: center;
width: 100%;
height: (55 / 3.75vw);
background-color: #fff;
border-top: 1px dashed #eee;
// background-color: powderblue;
div {
text-align: center;
width: 15%;
height: 100%;
padding-top: (6 / @vw );
// line-height: 100%;
.iconfont{
// display: inline-block;
font-size: (26 / @vw);
}
p{
font-size: (12 / @vw);
}
}
.home.active {
// background-color: @color;
font-weight: 600;
color: @color;
p {
color: black;
}
}
} 二、首页
首页的话是以商品为主，还有一些其他的小功能（小图标），商品的话是做出一个，后面其他都是直接用forEach进行遍历渲染出来的
HTML：
<!-- 底部菜单栏对应内容 -->
<section class="content">
<!-- 里面需要放置五个div也就是底部栏其对应的内容 -->
<div class="shouye active" data-id="0">
<!-- 其他功能模块 -->
<div class="top">
<div class="rk">
<i class="iconfont icon-goods_hot_fill"></i>
<p>热款</p>
</div>
<div class="yy">
<i class="iconfont icon-community_fill_light
"></i>
<p>预约</p>
</div>
<div class="diy">
<i class="iconfont icon-skinfill"></i>
<p>DIY</p>
</div>
<div class="hd">
<i class="iconfont icon-shopfill"></i>
<p>好店</p>
</div>
</div>
<!-- 商品内容渲染 -->
<div class="bottom">
<!-- <a href="#" class="item">
<div class="pic">
<img src="../image/img1.jpg" alt="">
</div>
<div class="text">
<h5>店铺</h5>
<h6>热度/评价类</h6>
<p>
<i>￥<span class="money">458</span></i>
<span class="right">
进店<i class="iconfont icon-right"></i>
</span>
</p>
</div>
</a> -->
</div>
</div>
</section>LESS：
.content {
padding:(5 / @vw) 0;
div {
display: none;
}
div.active{
display: block;
}
.shouye{
// position: relative;
margin: (60 / @vw) (5 / @vw);
.top {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: (70 / @vw);
border-radius: (6 / @vw);
background-color: #fff;
div {
text-align: center;
.iconfont{
font-size: (34 / @vw);
}
p{
margin-top: (2 / @vw);
font-size: (13 / @vw);
}
}
}
.bottom {
display: flex;
flex-wrap: wrap;
margin:(10 / @vw) 0 (50 / 3.75vw) 0;
.item {
width: 48.3%;
display: inline-block;
margin: 0 (3 / @vw) ;
background-color: @color1;
border-radius: (4 / @vw);
background-color: @color1;
margin-bottom: (6 / @vw);
// margin-right: (5 / @vw);
.pic img{
border-radius: (4 / @vw);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
.text{
padding: (5 / @vw);
h5 {
font-size: (14 / @vw);
font-weight: 500;
}
h6 {
margin: (2 / @vw) 0 (3 / @vw);
font-size: (4 / @vw);
font-weight: normal;
color: #aaa;
}
p {
display: flex;
justify-content: space-between;
align-items: center;
.money{
display: inline-block;
color: rgb(255, 85, 6);
font-size: (18 / @vw);
i {
display: inline-block;
font-size: (4 / @vw);
}
}
.right {
text-align: center;
font-size: (12 / @vw);
.iconfont{
font-size: (12 / @vw);
}
}
}
}
}
}
}
}script：商品渲染
</script>
// 渲染首页
// 1创建数据数据
// 2封装在一个函数里面
// 3用forEach方法实现遍历渲染
// 4一定要记得调用函数才执行
function shouye(){
const arr = [
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'34'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'100'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'56'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'45'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'78'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'100'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'233'
},
{
img:'../image/img1.jpg',
short:'简介名称',
comment:'热度|热销',
money:'100'
},
]
let str = ''
arr.forEach(item =>{
str += `
<a href="#" class="item">
<div class="pic">
<img src="../image/img1.jpg" alt="">
</div>
<div class="text">
<h5>店铺</h5>
<h6>热度/评价类</h6>
<p>
<i>￥<span class="money">458</span></i>
<span class="right">
进店<i class="iconfont icon-right"></i>
</span>
</p>
</div>
</a>
`
console.log();
//把遍历渲染好的字符串添加给对应的父级
document.querySelector('.shouye .bottom').innerHTML = str
})
}shouye()
</script>三、购物车
头部的搜索栏需要隐藏，购物模板的一些渲染
<div class="buycar">
<!-- 头部是固定的分成两个部分
1“go物车“
2类别 -->
<!-- 内容部分 -->
<div class="top">
<span>go物车<i>(46)</i></span>
<p>管理<i class="iconfont icon-moreandroid"></i></p>
</div>
<div class="sort">
<button>美甲</button>
<button>预约</button>
</div>
<div class="goods">
<!-- <a href="#">
<div class="store">
店名<i class="iconfont icon-right"></i>
</div>
<div class="item">
<div class="pic">
<img src="../image/img1.jpg" alt="">
</div>
<div class="text">
<h5>百柿可乐 柿柿如意 好柿发生...</h5>
<p>鹅黄</p>
<div class="bottom">
<div class="price">
<span>￥<i>244</i></span>
</div>
<div class="sum">
<i>x</i>
<span>4</span>
</div>
</div>
</div>
</div>
</a> -->
</div>
</div>
LESS：
header {
display: none;
}
.buycar {
width: 100%;
// margin: 0 (5 / @vw);
// padding: (60 / @vw) (5 / @vw) 0;
.top {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: (55 / @vw);
padding: (15 / @vw) (15 / @vw) 0;
background-color: #f4f4f4;
span {
font-weight: 600;
font-size: (18 / @vw);
i {
font-size: (10 / @vw);
color: #aaa;
font-weight: normal;
margin-left: (5 / @vw);
}
}
p {
font-size: (14 / @vw);
.iconfont {
font-size: (14 / @vw)
}
}
}
.sort {
position: fixed;
top: (55 / @vw);
left: 0;
width: 97%;
height: (50 / @vw);
line-height: (50 / @vw);
margin: 0 (5 /@vw);
padding: 0 (15 / @vw);
background-color: #fff;
// border-radius: (10 /@vw);
border-top-left-radius: (15 / @vw);
border-top-right-radius: (15 / @vw);
// border-bottom: 1px solid #aaa;
button {
margin-left:(5 / @vw) ;
width: (40 / @vw);
text-align: center;
border: 0px solid @color;
background-color: #fff;
// border-radius: 35%;
}
}
.goods {
width: 97%;
margin: (110 / @vw) (5 / @vw) 0;
// .item {
// display: flex;
// justify-content: space-between;
// align-items: center;
// width: 94%;
// height: (40 / @vw);
// padding: 0 (10 / @vw);
// }
a {
display: inline-block;
width: 100%;
padding: (15 / @vw) (15 / @vw) (15 / @vw);
background-color: #fff;
.store {
height: (20 / @vw);
line-height: (20 / @vw);
margin: 0 0 (10 / @vw) (5 / @vw);
font-size: (14 / @vw);
font-weight: 600;
.iconfont {
font-weight: normal;
font-size: (14 / @vw);
}
}
}
.item {
display: flex;
// display: inline-block;
width: 100%;
// height: (100 / @vw);
// margin-top: (30 / @vw);
.pic {
width: 25%;
// height: 50%;
margin-right: (10 / @vw);
img{
border-radius: (10 / @vw);
}
}
.text {
flex: 1;
h5 {
font-size: (14 / @vw);
font-weight: normal;
color: #262626;
}
p{
font-size: (10 / @vw);
color: #aaa;
margin: (5 / @vw) 0 (15 / @vw);
}
.bottom {
display: flex;
justify-content: space-between;
.price {
color: rgb(250, 7, 7);
font-size: (10 / @vw);
i {
font-size: (16 / @vw);
font-weight: 600;
}
}
.sum {
font-size: (12 / @vw);
width: (30 / @vw);
height: (30 / @vw);
text-align: center;
line-height: (30 / @vw);
border: 1px solid #ddd;
border-radius: (5 / @vw);
}
}
}
// .sum {
// width: 44px;
// height: 44px;
// /* background-color: rgb(120, 168, 145); */
// text-align: center;
// line-height: 44px;
// }
// .text p {
// /* 设置为行内来撑开宽高不能定死，内容会变 */
// display: inline-block;
// font-size: 11px;
// color: #888;
// /* width: 80px;
// height: 16px; */
// margin: 5px 0;
// border-radius: 2px;
// background-color: #f7f7f8;
// }
// .price span {
// font-size: 11px;
// }
// .price i {
// font-size: 16px;
// }
// .price del {
// padding-left: 4px;
// font-size: 11px;
// color: #999;
// }
}
}
}script：
<script>
function buycar(){
const buyArr=[
{
store:'商店',
pic:'../image/img1.jpg',
name:'美甲',
detail:'规格',
price:'34'
},
{
store:'商店',
pic:'../image/img1.jpg',
name:'美甲',
detail:'规格',
price:'34'
},
{
store:'商店',
pic:'../image/img1.jpg',
name:'美甲',
detail:'规格',
price:'34'
},
{
store:'商店',
pic:'../image/img1.jpg',
name:'美甲',
detail:'规格',
price:'34'
},
{
store:'商店',
pic:'../image/img1.jpg',
name:'美甲',
detail:'规格',
price:'34'
}
]
let str = ''
buyArr.forEach(item =>{
const{store,pic,name,detail,price} = item
str += `
<a href="#">
<div class="store">
${store}<i class="iconfont icon-right"></i>
</div>
<div class="item">
<div class="pic">
<img src=${pic} alt="">
</div>
<div class="text">
<h5>${name}</h5>
<p><span>${detail}</span> <span>贩卖美好</span></p>
<div class="bottom">
<div class="price">
<span>￥<i>${price}</i></span>
</div>
<div class="sum">
<i>x</i>
<span>4</span>
</div>
</div>
</div>
</div>
</a>
`
console.log(str);
document.querySelector('.goods').innerHTML = str
})
}buycar()
</script>四、搜索页面
搜索页面其实是参考了美团和小红书，然后再返回键'<'添加点击事件，实现页面跳转回首页，而首页的搜索框也是同样的设置点击事件实现页面跳转
HTML：
<body>
<div class="search">
<div class="top">
<!-- 背景灰色 -->
<div class="left">
<i class="iconfont icon-fanhui"></i>
</div>
<div class="search">
<input type="text" placeholder="美甲依你锁定">
<a href="#">
<button>搜索</button>
<!-- <i class="iconfont icon-search"></i> -->
</a>
</div>
</div>
<div class="bottom">
<!-- 全部背景白色
再分成3个模块 -->
<div class="tab1">
<span>历史记录<i class="iconfont icon-ashbin"></i></span>
<p>
<a href="#">
<i>美甲</i>
</a>
<a href="#">
<i>甲油胶</i>
</a>
<a href="#">
<i>ins风手工制作</i>
</a>
<a href="#">
<i>ins风手工制作</i>
</a>
<a href="#">
<i>指甲油</i>
</a>
</p>
</div>
<div class="tab2">
<span>猜你想搜<i class="iconfont icon-browse"></i></span>
<div class="text">
<p class="left">
<a href="#">美甲</a>
<a href="#">甲油胶</a>
<a href="#">ins风手工制作</a>
<a href="#">指甲油</a>
</p>
<p class="right">
<a href="#">ins风手工制作</a>
<a href="#">甲油胶</a>
<a href="#">ins风手工制作</a>
<a href="#">美甲</a>
</p>
</div>
</div>
<div class="tab3">
<!-- 分成四个2行，一个是占49%剩下的为边距 -->
<div class="box">
<span>大家都在搜</span>
<div class="text">
<a href="#">ins风手工制作</a>
<a href="#">甲油胶</a>
<a href="#">ins风手工制作</a>
<a href="#">美甲</a>
</div>
</div>
<div class="box">
<span>大家都在搜</span>
<div class="text">
<a href="#">ins风手工制作</a>
<a href="#">甲油胶</a>
<a href="#">ins风手工制作</a>
<a href="#">美甲</a>
</div>
</div>
<div class="box">
<span>大家都在搜</span>
<div class="text">
<a href="#">ins风手工制作</a>
<a href="#">甲油胶</a>
<a href="#">ins风手工制作</a>
<a href="#">美甲</a>
</div>
</div>
<div class="box">
<span>大家都在搜</span>
<div class="text">
<a href="#">ins风手工制作</a>
<a href="#">甲油胶</a>
<a href="#">ins风手工制作</a>
<a href="#">美甲</a>
</div>
</div>
</div>
</div>
</div>
</body>LESS：
.search{
width: 100%;
// height: 100%;
// background-image: linear-gradient(to bottom, @color,#f4f4f4);
.top{
width: 100%;
height: (50 / @vw);
// padding: 0 (10 / @vw) (10 / @vw);
background-color: #f4f4f4;
display: flex;
// 主轴对齐方式
justify-content: space-between;
// 侧轴对齐方式
align-items: center;
.left {
width: (40 / @vw);
font-size: (14 / @vw);
text-align: center;
margin-right: (5 / @vw);
}
.search{
position: relative;
// display: flex;
// justify-content: space-between;
// align-items: center;
input {
// margin-top: (8 / @vw);
width: (320 / @vw);
height: (35 / @vw);
border-radius: (30 / @vw);
padding-left: (10 / @vw);
color: #ddd;
}
button{
position: absolute;
top: (5 / @vw);
right: (20 / @vw);
width: (45 / @vw);
height: (25 / @vw);
line-height: (25 / @vw);
text-align: center;
border-radius: (10 / @vw);
background-color: @color;
border: 0px solid #000;
}
}
}
.bottom{
width: 100%;
height: 80%;
background-color: #fff;
padding: (10 / @vw) (10 / @vw) (30 / @vw);
.tab1{
margin-bottom: (15 / @vw);
span {
// display: inline-block;
display: flex;
justify-content: space-between;
font-size: (16 / @vw);
font-weight: 600;
margin-bottom: (5 / @vw);
.iconfont{
font-weight: normal;
font-size: (18 / @vw);
}
}
a{
display: inline-block;
height: (25 / @vw);
font-size: (12 / @vw);
padding: (5 / @vw) (10 / @vw);
margin: (6 / @vw) (3 / @vw) 0;
background-color: #f4f4f4;
border-radius: (15 / @vw);
}
}
.tab2{
margin-bottom: (15 / @vw);
span {
display: flex;
justify-content: space-between;
font-size: (16 / @vw);
font-weight: 600;
margin-bottom: (5 / @vw);
.iconfont{
font-weight: normal;
font-size: (18 / @vw);
}
}
.text {
width: 100%;
display: flex;
justify-content: space-between;
p {
width: 50%;
a{
display: inline-block;
width: 100%;
height: (25 / @vw);
font-size: (12 / @vw);
padding: (5 / @vw) (10 / @vw);
margin: 0 (3 / @vw) 0;
}
}
}
}
.tab3 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
.box{
// background-image: linear-gradient(to bottom, rgb(253, 149, 183),rgb(254, 223, 233));
background-color:#ffeef4;
width: 49%;
border-radius: (10 / @vw);
// padding-bottom:(4 / @vw);
padding: 0 (5 / @vw) (4 / @vw);
margin-bottom: (20 / @vw);
span {
display: inline-block;
width: 100%;
// height: (25 / @vw);
margin-top: (10 / @vw);
padding-left: (10 / @vw);
font-size: (16 / @vw);
font-weight: 600;
color: #fd498a;
}
.text{
width: 99%;
background-color: #fff;
border-radius: (10 / @vw);
// padding: 0 (10 / @vw);
margin: (5 / @vw) 0 0;
a{
display: inline-block;
width: 100%;
height: (25 / @vw);
font-size: (12 / @vw);
padding: (5 / @vw) (10 / @vw);
// margin: 0 (3 / @vw) 0;
}
}
}
.box:nth-child(2){
// background-image: linear-gradient(to bottom, #83a73f,rgb(206, 252, 206));
background-color: #ffeacf;
span{
color: #fc7911;
}
}
.box:nth-child(3){
background-color: #eefde0;
span{
color: #4ed820;
}
}
.box:nth-child(4){
// background-image: linear-gradient(to bottom, #83a73f,rgb(206, 252, 206));
background-color: #ffeefe ;
span{
color: #bd4ef5;
}
}
}
}
}script：用location实现点击页面跳转
<script>
const dian = document.querySelector('.top')
dian.addEventListener('click', function(e){
console.log(e.target.tagName);
if(e.target.tagName === 'I'){
location.href = './total.html'
}
})
</script>五、总结
之前一直用for进行数组遍历，学习了forEach之后感觉更加方便 ，可直接遍历渲染，省去了中间重复的遍历
遍历数组 forEach方法！！！——加强版的for循环，数组对象的时候使用
（不需要for得那些条件就可以实现遍历，可用于多同样式得渲染）不返回数组
（被遍历的数组）.forEach(function(item（当前数组元素）, index（当前数组索引号）){
内容
}
Location对象
可能看到location就会先想到本地存储，它其实也可以实现页面跳转
（案例：可以是平时网站的登录页面，当你输入账号密码提交form表单的时候页面跳转至网站首页，或则是完成支付之后页面跳转提示支付成功）
location.href = '网页地址' 可以得到地址 / 以及实现页面的跳转
固定定位
（越学到后面越是回忘记css的知识点，一定要偶尔写写css和html加强以下记忆，多实践动手比你只会背诵管用）
position: fixed;
bottom: 0; //（数值和方向根据你自己需要来改变）
left: 0; //（反向最好是哪边距离小就定位那边）
背景色渐变（日常用得比较少）
background-image: linear-gradient(to bottom, @color,#f4f4f4)
括号里面（从哪里开始渐变——渐变的方向，第一个颜色，第二个颜色）
1253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
