小程序代码改编,现成模板的改编与开发 ,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;

}