微信小程序超跑阵容图片展示页面样式设计制作开发教程

本文给大家带来的是微信小程序选车中心车型大全展示列表页面样式设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
    <view id="car_title_cont">
        <text id="car_title">超跑阵容</text>
    </view>

    <view class="car_names">法拉利</view>
    <view class="img_cont">
      <swiper class="img_pic">
        <block>
          <swiper-item>
            <image src="http://img1.xcarimg.com/b70/s8124/c_20160708111430452859370711393.jpg" style="width: 100% height: 100%;"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="car_names">兰博基尼</view>
    <view class="img_cont">
      <swiper class="img_pic">
        <block>
          <swiper-item>
            <image src="http://img1.xcarimg.com/b67/s6633/c_20150710104510986162680120832.jpg" style="width: 100% height: 100%;"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="car_names">迈凯伦</view>
    <view class="img_cont">
      <swiper class="img_pic">
        <block>
          <swiper-item>
            <image src="http://img1.xcarimg.com/b226/s6991/c_20150629145006087467591186056.jpg" style="width: 100% height: 100%;"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
</view>

二、wxss样式文件代码如下：

.container {
    margin: 0 6px;
}
#car_title_cont {
    margin-top: 5px;
    border-bottom: 1px solid #E0E0E0;
}

#car_title {
    color: black;
    font-style: oblique;
    font-size: 18px;
    font-weight: bold;
}

.car_names {
    color: 	#888888;
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0;
}

.img_cont {
    margin: 10px;
    height: 225px;
    width: auto;
}
.img_pic {
    width: 100%;
    height: 225px;
}

模板简介：该模板名称为【微信小程序超跑阵容图片展示页面样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。