微信小开发,左图右文 代码
时间: 2024-03-12 08:17:42 浏览: 67
微信开发代码
5星 · 资源好评率100%
以下是一个简单的示例代码,实现了一个左图右文的微信小程序布局:
```xml
<view class="container">
<view class="left-image"></view>
<view class="right-text">
<view class="title">标题</view>
<view class="content">内容</view>
</view>
</view>
```
```css
.container {
display: flex;
align-items: center;
padding: 10px;
background-color: #fff;
}
.left-image {
width: 100px;
height: 100px;
background-image: url('图片地址');
background-size: cover;
background-position: center;
margin-right: 10px;
}
.right-text {
flex: 1;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.content {
font-size: 14px;
color: #999;
}
```
你可以将该代码放入微信小程序的对应页面的 wxml 和 wxss 文件中,然后替换图片地址和标题、内容文字即可。
阅读全文