微信小程序(一)简单的结构及样式演示

注释很详细,直接上代码

涉及内容:

  1. view和text标签的使用
  2. 类的使用
  3. flex布局
  4. 水平方向上均匀分布子元素
  5. 垂直居中对齐子元素
  6. 字体大小
  7. 文字颜色
  8. 底部边框的宽和颜色

源码:

index.wxml

<view class="navs"><text class="active">精选</text><text>手机</text><text>食品</text><text>内衣</text><text>生鲜</text><text>母婴</text>
</view>

index.wxss

.navs{display: flex;justify-content: space-evenly;background-color: pink;height:40px;align-items: center;font-size: 14px;
}.active{color: #37b626;border-bottom: 1px solid #00b26a;
}

效果演示:

在这里插入图片描述
下一篇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/626139.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python多线程和多进程内存共享方式

目录 一:介绍 二:多线程共享内存方式 三:多进程共享内存方式 一:介绍 在Python中,多线程和多进程都有各自的内存管理机制,并且它们的内存共享方式也不同。 对于多线

Android 11.0 mtp模式下连接pc后显示的文件夹禁止删除copy重命名功能实现

1.前言 在11.0的系统rom定制化开发中,usb连接pc端的时候有好几种模式,在做otg连接pc端的时候,改成mtp模式的时候,在pc端可以看到产品设备 的显示的文件夹的内容,对于产品设备里面的文件在pc端禁止做删除重命名拷贝等操作功能的实现 2.mtp模式下连接pc后显示的文件夹禁止删…

Linux中文件名修改的多种方法

找一个不算漂亮的普通女孩&#xff0c;一起柴米油盐&#xff0c;一起日出日落&#xff0c;一起田间地头&#xff0c;一起春花冬雪&#xff01;要一个不算大的小房子&#xff0c;生两个健康可爱的宝宝&#xff0c;这样就很好。。。。。。 简介&#xff1a; 在Linux系统中&#x…

第二百六十八回

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了跟手指移动的小球相关的内容&#xff0c;本章回中将介绍自定义组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 在项目中有些内容无法通过现有的组件来实现&#xff0c;因此需要自定义组件&#xff0…

docker 部署xxl-job-admin

导言 xxl-job是一款开源的分布式任务调度平台,支持在线管理任务和调度任务。本文将详细介绍如何基于2.2.0版本进行xxl-job的部署,包括数据库的初始化、镜像的拉取和运行、以及Nginx的配置。 部署数据库 首先,我们需要部署MySQL数据库作为xxl-job的后端存储。执行以下命令:…

MongoDB Compass当前版本及历史版本下载安装

mongoDB compass 当前版本下载 官网 https://www.mongodb.com/try/download/compass 官网下载一般只能下载最新版本。 github https://github.com/mongodb-js/compass MongoDB Compass与MongoDB的版本对应关系 MongoDB CompassMongoDB1.9.12MongoDB 2.6.11 Community

mysql表的约束问题

目录 1. 表的约束问题: 主键约束: 案例&#xff1a; 非空约束 唯一约束: 默认值约束: 案例&#xff1a; 2.表的结构 前提:接上一张博客内容经行操作 1. 表的约束问题: 用来保证数据插入的安全性、完整性、正确性 主健,外键,唯一,默认值,非空,检查 1.1…

设计模式之多线程分工模式--- Thread-Per-Message模式

系列文章目录 设计模式之避免共享的设计模式Immutability&#xff08;不变性&#xff09;模式 设计模式之并发特定场景下的设计模式 Two-phase Termination&#xff08;两阶段终止&#xff09;模式 设计模式之避免共享的设计模式Copy-on-Write模式 设计模式之避免共享的设计模…

UL2034详细介绍UL 安全单站和多站一氧化碳报警器标准

在介绍相关标准之前先介绍一下UL认证和UL测试报告的区别&#xff0c;检测认证行业6年老司机 UL认证是自愿性的认证&#xff0c;需要检测产品和审核工厂&#xff0c;每个季度审核一次&#xff0c;费用高、时间久&#xff0c;而且审厂非常的严格。 UL测试报告是根据产品选用相应…

C#学习笔记3-函数与单元测试

现在开始参考书籍变为&#xff1a;《C# 12 and .NET 8 – Modern Cross-Platform Development.Mark Price》 函数 Writing, Debugging, and Testing Functions 写函数Debug运行时 logging单元测试 写函数 一个有着 XML 注释的函数 这里直接举一个例子&#xff1a; Numbe…

使用@Slf4j后引入log,idea标红

引入Slf4j注解 idea标红Cannot resolve symbol ‘log’ 引入Lombok插件 如果在Marketplace查不到时&#xff0c;不妨关闭菜单再打开试下

Ceph集群修改主机名

修改主机名 #修改主机名 rootlk02--test:~# hostnamectl set-hostname lk02--test01 #修改hosts rootlk02--test:~# vi /etc/hosts #修改ceph.conf rootlk02--test:~# vi /etc/ceph/ceph.conf rootlk02--test:~# cat /etc/ceph/ceph.conf |grep mon mon host [v2:192.168.3.1…

android自启动

Android 开机自动启动一个Service 附源码_watchdogservice-CSDN博客 执行 adb push 本地地址 目标地址 时遇到错误&#xff1a; adb: error: failed to copy app-release.apk to /system/app/app-release.apk: remote couldnt create file: Read-only file system 解决方案…

【Java数据结构】04-图(Prim,Kruskal,Dijkstra,topo)

5 图 推荐辅助理解 【视频讲解】bilibili Dijkstra Prim 【手动可视化】Algorithm Visualizer &#xff08;https://algorithm-visualizer.org/&#xff09; 【手动可视化】Data Structure Visualizations (https://www.cs.usfca.edu/~galles/visualization/Algorithms.ht…

主流操作系统介绍

主流操作系统介绍 Windows&#xff1a;由微软&#xff08;Microsoft&#xff09;开发和维护&#xff0c;是个人电脑市场占有率最高的操作系统。目前最新的版本包括Windows 10以及更新的Windows 11。 macOS&#xff1a;苹果公司&#xff08;Apple Inc.&#xff09;为Macintosh系…

MathType中文网站2024最新版本下载及嵌入word教程

MathType是一款专业的数学公式编辑器,兼容Office word,excel等700多种程序,用于编辑数学试卷、书籍、报刊、论文、幻灯演示等文档轻松输入各种复杂的数学公式和符号。 MathType是一款功能强大的数学公式编辑器&#xff0c;广泛用于编写和编辑数学公式。Word是微软公司推出的文…

《设计模式的艺术》笔记 - 抽象工厂模式

介绍 提供了一个创建一系列相关或相互依赖的对象的接口&#xff0c;而无须指定它们具体的类。抽象工厂模式又称为Kit模式&#xff0c;它是一种对象创建型模式。 在抽象工厂模式中&#xff0c;每个具体工厂都提供了多个工厂方法用于产生多种不同类型的产品&#xff0c;这些产品构…

【智慧教室】东胜物联为智慧教室解决方案商提供丰富智能网关硬件产品

随着互联网、物联网技术的发展&#xff0c;各行各业迎来数字化转型的机遇。本文以智慧教室为例&#xff0c;阐述物联网技术对传统教室的影响&#xff0c;智慧教室解决方案的优势等。 智慧教室是指借助物联网技术、信息及互联网技术&#xff0c;将现代科技手段融入教育教学过程中…

设计模式—行为型模式之中介者模式

设计模式—行为型模式之中介者模式 中介者模式(Mediator Pattern)&#xff1a;用一个中介对象来封装一系列的对象交互&#xff0c;中介者使各对象不需要显式地相互引用&#xff0c;减少对象间混乱的依赖关系&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之…