小程序代码改编,现成模板的改编与开发 ,WXSS源代码
微信WXSS,现成代码的改编。 改编成您自个公司用的代码。
/**index.wxss**/
.swiper-item{
display: block;
}
.slide-image {
width: 100%;
display: initial;
}
swiper {
width: 100%;
}
.headimg{
display:initial;
}
.headline{
box-sizing: border-box;
width: 100%;
padding: 10px;
font-size: 14px;
color:#333;
overflow: hidden;
}
.headline-img{
float:left;
width:25%;
height:22px;
box-sizing: border-box;
padding-right:5px;
border-right:1px solid #808080;
vertical-align: middle;
}
.headline-text{
float: left;
width:75%;
box-sizing: border-box;
padding-left: 15px;
white-space: normal;
height:16px;
line-height: 16px;
margin: 3px 0;
overflow: hidden;
text-overflow: ellipsis;
}
.classifytitle{
font-size:14px;
text-align: center;
margin-top: 10px;
padding:10px;
}
.goodclassifyimg{
width: 100%;
min-height: 80px;
}
.classifyimg{
width: 100%;
max-height: 80px;
}
.goods{
display: flex;
/* flex 是布局 */
flex-wrap: wrap;
width: 100%;
}
.gooditem{
width:33.3333%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.goodview{
/* 可以加注释的地方。
*/
width:3.2rem;
height:3.2rem;
}
.goodimg{
/* 图片的宽度,高度设置的地方。 */
width:100%;
height:100%;
}
.goodprice{
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
/* 字体大小,修改的地方。修改后页面文字大小就改变了。 */
font-size: 15px;
margin-top: 5px;
color:rgb(238, 13, 62);
}
.goodtext{
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size:12px;
padding: 5px 0;
}