微信小程序女童装商品分类页面样式模板制作设计下载
上一篇
下一篇
制作好以后效果图如下：
一、wxml页面代码如下：
<view class="container">
<view class="top">
<input type="text" placeholder="输入关键字搜索商品名"/>
<view class="search_btn"><image src="../../images/home_top_search@2x.png"></image></view>
</view>
<view class="left">
<view class="tablist">玩具婴幼</view>
<view class="tablist">玩具婴幼</view>
<view class="tablist">玩具婴幼</view>
<view class="tablist">玩具婴幼</view>
<view class="tablist">玩具婴幼</view>
</view>
<view class="right">
<view class="item">
<view class="item_top">
<view class="labpic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281636521441.jpg"></image></view>
<view class="labtit">童装&配饰</view>
</view>
<view class="item_bottom">
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
</view>
</view>
<view class="item">
<view class="item_top">
<view class="labpic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281636521441.jpg"></image></view>
<view class="labtit">童装&配饰</view>
</view>
<view class="item_bottom">
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
<view class="product_list">
<view class="product_list_pic"><image src="https://image.jlibom.com/xumengjuan/20161128/201611281637208375.jpg"></image></view>
<text>女童装</text>
</view>
</view>
</view>
</view>
</view>
|
二、wxss样式文件代码如下：
.top{
width: 100%;
height: 50px;
display: flex;
background-color: white;
padding: 5px 10px;
margin-bottom: 5px;
}
.top .search_btn{
width: 50px;
height: 50px;
}
.top .search_btn image{
width: 100%;
height: 100%;
}
.top input{
width: 80%;
height: 50px;
background-color: #ededed;
border-radius: 5px;
text-align: center;
}
.left{
width: 25%;
background-color: white;
float: left;
}
.left .tablist{
width: 100%;
text-align: center;
line-height: 50px;
border-bottom: 2px solid #f3f3f3;
}
.right{
width: 73%;
float: right;
}
.right .item{
background-color: #fff;
margin-bottom: 10px;
}
.right .item_top{
display: flex;
border-bottom: 1px solid #f3f3f3;
padding: 5px 10px;
}
.right .item_top .labpic{
width: 20px;
height: 20px;
}
.right .item_top .labpic image{
width: 100%;
height: 100%;
}
.item_bottom{
overflow: hidden;
padding: 5px 0;
font-size: 12px;
color: #696969;
}
.item_bottom .product_list{
width: 33.33%;
text-align: center;
float: left;
}
.item_bottom .product_list .product_list_pic{
width: 60%;
height:50px ;
margin: 0 auto;
}
.item_bottom .product_list .product_list_pic image{
width: 100%;
height: 100%;
}
|
模板简介：该模板名称为【微信小程序女童装商品分类页面样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
