微信小程序文章界面简单布局
来源:互联网 发布:网易uu加速器mac版 编辑:程序博客网 时间:2024/06/05 04:29
效果图:
wxml文件:
<view class="content"> <!-- 头像 --> <view class="author-date"> <image src="/images/4.png" class="author"></image> <text class="date">logo 2017年七月</text> </view> <!-- 标题内容 --> <text class="title">那年夏天你在哪里</text> <image class="image" src="/images/6.jpg"></image> <text class="article-content">天不言自高,地不言自厚,奇迹,是不会在容易的道路上绽放的。人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。</text> <view > <image class="article-images" src="../../images/icon/chat.png"></image> <text class="article-text">66</text> <image class="article-images" src="../../images/icon/view.png"></image> <text class="article-text">88</text> </view> </view>
wxss样式文件:
swiper{ width:100%; height:500rpx;}swiper image{ width:100%; height:500rpx;}.content{ /* display: flex; */ flex-direction: colum; margin-top: 30rpx; margin-bottom: 30rpx; background-color: #fff; /* border-bottom: 1px solid #ededed; */ border-top: 1px solid #ededed; padding-bottom: 5px; } .author-date{ /* margin-top: 10rpx; margin-bottom: 20rpx; margin-left: 10rpx; */ margin: 10rpx 0 20rpx 10rpx;}.author{ width: 60rpx; height: 60rpx; vertical-align: middle; }.date{ margin-left: 20rpx; vertical-align: middle; margin-bottom: 5px; font-size: 26rpx; }.title{ font-size: 34rpx; font-weight: 600; color:#333; margin-bottom: 20px;}.image{ margin-left: 16px; width: 100%; height: 200px; margin: auto 0; margin-top: 10px; margin-bottom: 10px;}.article-content{ color: #666; font-size: 28rpx; margin-bottom: 20rpx; margin-left: 30rpx; line-height: 40rpx; letter-spacing: 2rpx;}.article-images{ width: 16px; height: 16px; margin-right: 8px; vertical-align: middle;}.article-text{ vertical-align: middle;}
清晨日暮,有你的光阴,值得虚度。
阅读全文
1 0
- 微信小程序文章界面简单布局
- Android 程序优化 - 界面布局
- 界面卡片布局小程序
- MFC简单界面程序
- 【微信小程序开发•系列文章五】主界面
- GridBagLayout布局实现简单电子邮件发送界面
- Android界面布局的简单介绍
- 使用布局实现简单手机信息界面
- QT之简单界面布局设计
- Qt布局最简单程序
- 微信小程序UI------实现携程首页顶部的界面(弹性布局)
- 界面布局
- 界面布局
- 界面布局
- 一个简单的登陆界面程序
- 简单的用户登陆界面c程序
- 16.2 最简单界面程序(1)
- 16.2 最简单界面程序(2)
- 高清加载巨图方案-拒绝压缩图片
- Codeforces 827A/828C String Reconstruction[线段树单点更新]
- LeetCode: 35. Search Insert Position
- Codeforces 827B. High Load 【构造】
- 活动的启动
- 微信小程序文章界面简单布局
- Laravel 及 composer 安装及使用
- 文章标题
- 块级元素内容过长点点显示(XXXX....)
- Oracle安装过后怎么解锁Scott账户
- nodejs操作图片
- 最常被遗忘的 Web 性能优化:浏览器缓存
- Internet of Lights and Switches湖南省第十一届大学生计算机程序设计竞赛
- 动态修改Application中的属性