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的更多相关文章

  1. 图解微信小程序---scroll_view实现首页排行榜布局

    图解微信小程序---scroll_view实现首页排行榜布局 什么是scroll-view? 滚动视图可滚动视图区域.使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 h ...

  2. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  3. 微信小程序简单入门1

    参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 1  创建项目 开发者工具安装完成后,打开并使用微信扫码登录.选择创建"项 ...

  4. 微信小程序初体验与DEMO分享

    前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝 ...

  5. 微信小程序入门学习-- 简易Demo:计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

  6. 微信小程序简单入门理解

    简单的小程序示例结构: (一):理解小程序结构app.js,app.json,app.wxss ①app.js,app.json是小程序结构必要的部分,app.wxss可选择 ②app.js用于创建小 ...

  7. 微信小程序简单介绍 一

    一 组件及api网址: 组件 :https://developers.weixin.qq.com/miniprogram/dev/component/view.html api:https://dev ...

  8. 微信小程序简单的数据表格及查询功能

    简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具 前端:界面布局样式和js的跳转 后端:依靠SpringBoot的业务逻辑层 项目的码云地址: https://gi ...

  9. 【福利】微信小程序130个精选Demo合集

    小编最近在开发小程序,也读到了不少优秀的小程序源码,项目中有些需求可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码,但比较是给公司做项目啊,秉着效率第一的原则,简直没有什么比ctrl+c ...

随机推荐

  1. CentOS 中使用yum出现的“UnicodeDecodeError: &#39;ascii&#39; codec”问题解决方法

    问题 新装了CentOS 6.5系统,打算使用yum安装程序是出现了例如以下错误: Loading mirror speeds from cached hostfile Traceback (most ...

  2. 开源项目 AllJoyn 基础服务

    AllJoyn 基础服务主要包含 Onboarding,Notification 和 Control Panel三个大项. 这三个也是编写App的最基础的,最经常使用的部分. Onboarding 提 ...

  3. [Java][log4j]支持同一时候按日期和文件大小切割日志

    依据DailyRollingFileAppender和RollingFileAppender改编,支持按日期和文件大小切割日志.  源文件: package com.bao.logging; impo ...

  4. c# 读取导入的excel文件,循环批量处理数据

    dt = FM_HR_ShiftMaintenanceManager.GetCsvToDataTable(strConn, excelName,"XJSQMonthlyImportExcel ...

  5. JAVA学习书籍

    1 java编程思想(第四版) 2 head first servlet &jsp

  6. 51nod 最大子段和问题

    给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大? 用f[i]表示以i为结尾的最大字段和,也就是说i一定要取, 那么f[i] = max(a[ ...

  7. 【TC SRM 718 DIV 2 A】RelativeHeights

    [Link]: [Description] 给你n个数字组成原数列; 然后,让你生成n个新的数列a 其中第i个数列ai为删掉原数列中第i个数字后剩余的数字组成的数列; 然后问你这n个数列组成的排序数组 ...

  8. ecshop微信通中微信自动登录的设置方法

    ecshop微信通中微信自动登录的设置方法 来 源:共享世纪 作 者:网络 时间:2015-12-03 点击: 4017 注意:微信自动登录,必须同时满足两个条件: 第一.微信公众号必须是服务号经过认 ...

  9. 洛谷 P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L…

    P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L… 题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many simi ...

  10. 生成ssh公有密钥而且注冊到Github Generate ssh rsa keys and register public key on Github

    私有密钥和公有密钥是成对的两个文件,私有文件保存在自己的本机,公有密钥保存到还有一端的server,站点等. github就是一种站点. 仅仅有保存了私有密钥的机器才干訪问远程的server等. 使用 ...