实验三智能手机互联网程序设计（微信程序方向）实验报告

樱花Cherry Blossoms2024-03-29 14:10

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| * 实验目的和要求 |
| * 请编写下方商品列表页面，展示商品名称和价格； |
| 二、实验步骤与结果（给出对应的代码或运行结果截图） Index.WXML <view class="shop" wx:for="{{10}}"> <view class="shop_left"> <image src="../../images/book.jpg" mode="" /> </view> <view class="shop_right"> <view>名称：微信小程序开发实战</view> <view>价格：￥50</view> </view> </view> Index.WXSS .shop { width: 100%; height: 140rpx; border: 1px solid #ccc; } .shop_left { padding-left: 5rpx; display: inline-block; } .shop_right { padding-left: 200rpx; position: relative; display: inline-block; color: #ccc; bottom: 20rpx; } image { width: 100rpx; height: 100rpx; border: 2rpx solid #ffffff; margin-top: 20rpx; } .shopright view { font-size: 30rpx; } page { border: 1px solid #ccc; background-color: #000; } |