• 微信群
  • 棋牌群
  • 个人微信
  • 公众帐号
  • 微商货源
  • 红包软件
  • 微商学院
  • 福利活动
千万群发布须知!
首页 >微商学院 >头条 >微信小程序入门教程之二:页面样式(一)
资讯详情 发布信息>>
微信小程序入门教程之二:页面样式(一)
资讯类别: 头条 浏览次数: 2195 人已查看 发布时间: 2020-11-06 16:11:22
  微信程序制作超简单,只要跟我小编上一篇教程,一定上手了吧!上一次教大家写了一个最简单的Hello world微信小程序。但是,那只是一个裸页面,并不好看。今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的页面。
微信小程序入门教程之二:页面样式
  一、总体样式

  微信小程序允许在顶层放置一个app.wxss文件,里面采用CSS语法设置页面样式。这个文件的设置,对所有页面都有效。

  注意,小程序虽然使用CSS样式,但是样式文件的后缀名一律要写成.wxss。

  打开上一篇教程的示例,在项目顶层新建一个app.wxss文件,内容如下。

  page{

  background-color:pink;

  }

  text{

  font-size:24pt;

  color:blue;

  }

  上面代码将整个页面的背景色设为粉红,然后将<text>标签的字体大小设为24磅,字体颜色设为蓝色。

  开发者工具导入代码之后,得到了下面的渲染结果。

  可以看到,页面的背景色变成粉红,文本字体变大了,字体颜色变成了蓝色。

  实际开发中,直接对<text>标签设置样式,会影响到所有的文本。一般不这样用,而是通过class属性区分不同类型的文本,然后再对每种class设置样式。

  打开pages/home/home.wxml文件,把页面代码改成下面这样。

     <view>

       <text class="title">hello world</text>

       </view>


  上面代码中,我们为&lt;text&gt;标签加上了一个class属性,值为title。

  然后,将顶层的app.wxss文件改掉,不再直接对&lt;text&gt;设置样式,改成对class设置样式。

  page{

  background-color:pink;

  }

  .title{

  font-size:24pt;

  color:blue;

  }

  上面代码中,样式设置在class上面(.title),这样就可以让不同的class呈现不同的样式。修改之后,页面的渲染结果并不会有变化。
热门信息 更多>>
相关推荐 更多>>
推荐货源 更多>>
福利活动 更多>>
微商资讯 更多>>
最新发布
网友问答
微商是怎么 什么是微商营销 什么是微商怎么解释 什么是微商联盟 央视新闻微商 微商央视报道视频
用户须知|市场合作|免责声明|版权声明|隐私保护|服务协议|内容发布须知!|关于我们|帮助中心| 联系客服
千万群为您提供: 微信群大全棋牌群金花群斗牛群个人微信微信公众号微商货源行业软件微商学院红包网赚, 等信息
Copyrights(c) 2015-2018 qianwanqun.com All Rights Reserved 沪ICP备14023674号
确 定