软月互动-南京高端网页设计公司 软月互动-基于网络营销的完美网站建设服务商

    南京微信小程序:简单小程序DEMO的布局逻辑与样式练习

  • 来源:
    软月派
    栏目:
    小程序开发
  • 我们将按照以下的顺序逐个介绍:布局的实现、逻辑的实现,样式的实现。

    1、布局的实现

    最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分界线


    2、逻辑的实现

    只是注册了Page界面


    3、样式的实现

    .home-view1样式:display规定最大View布局为弹性布局,justify-content规定内容居中,竖直排列

    .home-view3样式:display规定了信息栏布局为弹性布局,justify-content规定内容水平平均分配 

    .home-view4样式:display规定了收藏图片和收藏数的父布局为弹性布局,align-items规定内容在竖直方向居中

    .home-image1样式:规定图片的高度

    .home-image-heart样式:规定收藏图片的大小

    .home-text1样式:规定描述文字的样式,text-align规定文字居中,line-height规定两行文字之间的高度

    .home-text-heart样式:规定收藏数的样式,border-radius规定边界圆角

    .home-view-line样式:是一条分界线

    .bgColor样式:规定收藏数的背景

    .home-view1{display:flex;justify-content:center;flex-direction:column;height: 100%;width:100%;margin: 6px;}

    .home-view3{display:flex;justify-content:space-between;}

    .home-view4{display:flex;align-items:center;}

    .home-image1{height:200px;}

    .home-image-heart{width:30px;height:30px;}

    .home-text1{text-align:left;line-height:25px;margin-top:6px;margin-right:6px;color: gray;}

    .home-text-heart{width:22px;height:22px;margin-left:10px;border-radius:20%;pad: 5px;text-align: center;}

    .home-text-time{text-align:center;margin-right:20px;padding-top:5px;color:gray;}

    .home-view-line{width:100%;height:6px;margin-top:5px;background-color:gainsboro;}

    .bgColor{background-color:lightblue;opacity:0.6;}

    软月互动成立于2008年,先后在南京江北新区、山东济南成立办事处,总部位于南京市大行宫。软月是一家集网站建设、网页设计、软件开发、企业画册设计、企业宣传片制作和动漫动画设计制作于一体的企业信息化服务机构。欢迎广大新老用户来电洽谈咨询,我们将竭诚为您服务!热线:025-81559996
      最新文章
  • Robots协议中致命的小细节 却最容易被忽略
    Robots协议中致命的小细节 却最容易被忽略

    在我看来Robots协议就是网站运营者行使网站支配权的一种执行文件,也是网站运营者最基本的权利。它是搜索引擎蜘蛛爬取网站之前重要的第一道关口,所以Robots协...

  • 滴滴将继续下架顺风车业务:坚决整改,将有33项问题逐条落实
    滴滴将继续下架顺风车业务:坚决整改,将有33项问题逐条落实

    站长之家(ChinaZ.com) 11月28日 消息:今天,交通部通报了近期针对网约车顺风车的安全检查情况,通报指出滴滴公司仍存在 7 方面 33 项问题,要求...

  • ofo激进商业化:视频广告175万一天 公众号48万一条
    ofo激进商业化:视频广告175万一天 公众号48万一条

    新浪科技讯 11月28日上午消息,资金困境中的ofo仍未放弃在商业化方面的探索。新浪科技获得的一份ofo B2B事业部的对外报价显示,其视频广告“试听风暴”的刊...

  • 最新百度搜索网页标题规范 网站标题不再“标题党”
    最新百度搜索网页标题规范 网站标题不再“标题党”

    对搜索用户来说,标题是一个网页最直观的认知渠道和展现方式,也是吸引用户点击搜索结果进入落地页的关键因素。为了保障搜索用户对所需资源的有效获取,保证搜索结果的公平...

  • 宝宝树IPO发行价定为6.8港元 明日在港交所挂牌上市
    宝宝树IPO发行价定为6.8港元 明日在港交所挂牌上市

    【TechWeb】2018年11月26日消息,母婴在线社区宝宝树今早发布公告称,该公司IPO(首次公开募股)发行价定为6.8港元,明天在港交所挂牌上市。宝宝树公...

  • 阿里宣布组织架构调整:天猫升级为大天猫 形成三大板块
    阿里宣布组织架构调整:天猫升级为大天猫 形成三大板块

    【TechWeb】11月26日消息,阿里巴巴集团CEO张勇今天发出全员公开信,宣布阿里最新一次面向未来的组织升级:阿里云升级阿里云智能,加强技术、智能互联网的投...

  • 小鸣单车最新破产审核结果:欠债1920余万元
    小鸣单车最新破产审核结果:欠债1920余万元

    【TechWeb】11月26日消息,据小鸣单车破产工作信息官方微信号显示,小鸣单车破产工作计划仍在进行中,管理人已完成对三十名非用户普通债权人申报债权的初步审核...

  • 腾讯QQ安全功能升级 不再提供单独账号申诉入口
    腾讯QQ安全功能升级 不再提供单独账号申诉入口

    【TechWeb】2018年11月26日消息,日前,腾讯发布《帐号改密、找密、更换密保手机服务升级及申诉服务下线的公告》,公告称不再提供单独账号申诉入口。公告显...

    • 实验室

      LABORATORY

  • 织梦开发
  • 小程序开发
  • 工作时间:周一至周五 9:00-18:00
  • 创意部地址:南京市中山东路198号龙台国际大厦1717室
  • CopyRight © 2008-2019 All Rights Reserved. 南京软月科技有限公司 苏公网安备 32010402000332号 苏ICP备08110927号-6