微信小程序简单常见首页demo

wxml
<view class='index-contier'>
<view class="index-left">
<view>电池剩余</view>
<view>62%</view>
</view>
<view class="index-center">
<view class="logo">头像</view>
<view>小猪快跑</view>
</view>
<view class="index-right">
<view>绑定手环</view>
<view>62%</view>
</view>
</view>
<view class='inform'>
<view class='phone'>
<span>手机</span>
<span>123456788</span>
</view>
<view class='name'>
<span>姓名</span>
<span>王婷</span>
</view>
<view class='sex'>
<span>性别</span>
<span>女</span>
</view>
<view class='age'>
<span>年龄</span>
<span>13</span>
</view>
<view class='manger'>
<span>部门</span>
<span>软件部门</span>
</view>
</view>
wxss
.index-contier {
color: #ffffff;
font-size: 12px;
width: 100%;
height: 150px;
background: linear-gradient(#e0f1f7, #0a99c9);
}
.index-left {
float: left;
width: 30%;
text-align: center;
margin-top: 92px;
}
.index-center {
float: left;
width: 40%;
text-align: center;
margin-top: 30px;
}
.logo {
margin: 0 auto;
width: 80px;
height: 80px;
background: #ffffff;
border: 1px solid #0a99c9;
border-radius: 40px;
}
.index-right {
float: left;
width: 30%;
text-align: center;
margin-top: 92px;
}
.inform {
padding: 0 6px;
font-size: 12px;
}
.phone {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.phone span {
margin: 0 10px;
}
.phone span:nth-child(2) {
float: right;
}
.name {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.name span {
margin: 0 10px;
}
.name span:nth-child(2) {
float: right;
}
.sex {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.sex span {
margin: 0 10px;
}
.sex span:nth-child(2) {
float: right;
}
.age {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.age span {
margin: 0 10px;
}
.age span:nth-child(2) {
float: right;
}
.manger {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.manger span {
margin: 0 10px;
}
.manger span:nth-child(2) {
float: right;
}
微信小程序简单常见首页demo的更多相关文章
- 图解微信小程序---scroll_view实现首页排行榜布局
图解微信小程序---scroll_view实现首页排行榜布局 什么是scroll-view? 滚动视图可滚动视图区域.使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 h ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序简单入门1
参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1 创建项目 开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项 ...
- 微信小程序初体验与DEMO分享
前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝 ...
- 微信小程序入门学习-- 简易Demo:计算器
简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...
- 微信小程序简单入门理解
简单的小程序示例结构: (一):理解小程序结构app.js,app.json,app.wxss ①app.js,app.json是小程序结构必要的部分,app.wxss可选择 ②app.js用于创建小 ...
- 微信小程序简单介绍 一
一 组件及api网址: 组件 :https://developers.weixin.qq.com/miniprogram/dev/component/view.html api:https://dev ...
- 微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gi ...
- 【福利】微信小程序130个精选Demo合集
小编最近在开发小程序,也读到了不少优秀的小程序源码,项目中有些需求可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码,但比较是给公司做项目啊,秉着效率第一的原则,简直没有什么比ctrl+c ...
随机推荐
- CentOS 中使用yum出现的“UnicodeDecodeError: 'ascii' codec”问题解决方法
问题 新装了CentOS 6.5系统,打算使用yum安装程序是出现了例如以下错误: Loading mirror speeds from cached hostfile Traceback (most ...
- 开源项目 AllJoyn 基础服务
AllJoyn 基础服务主要包含 Onboarding,Notification 和 Control Panel三个大项. 这三个也是编写App的最基础的,最经常使用的部分. Onboarding 提 ...
- [Java][log4j]支持同一时候按日期和文件大小切割日志
依据DailyRollingFileAppender和RollingFileAppender改编,支持按日期和文件大小切割日志. 源文件: package com.bao.logging; impo ...
- c# 读取导入的excel文件,循环批量处理数据
dt = FM_HR_ShiftMaintenanceManager.GetCsvToDataTable(strConn, excelName,"XJSQMonthlyImportExcel ...
- JAVA学习书籍
1 java编程思想(第四版) 2 head first servlet &jsp
- 51nod 最大子段和问题
给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大? 用f[i]表示以i为结尾的最大字段和,也就是说i一定要取, 那么f[i] = max(a[ ...
- 【TC SRM 718 DIV 2 A】RelativeHeights
[Link]: [Description] 给你n个数字组成原数列; 然后,让你生成n个新的数列a 其中第i个数列ai为删掉原数列中第i个数字后剩余的数字组成的数列; 然后问你这n个数列组成的排序数组 ...
- ecshop微信通中微信自动登录的设置方法
ecshop微信通中微信自动登录的设置方法 来 源:共享世纪 作 者:网络 时间:2015-12-03 点击: 4017 注意:微信自动登录,必须同时满足两个条件: 第一.微信公众号必须是服务号经过认 ...
- 洛谷 P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L…
P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L… 题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many simi ...
- 生成ssh公有密钥而且注冊到Github Generate ssh rsa keys and register public key on Github
私有密钥和公有密钥是成对的两个文件,私有文件保存在自己的本机,公有密钥保存到还有一端的server,站点等. github就是一种站点. 仅仅有保存了私有密钥的机器才干訪问远程的server等. 使用 ...