如何在网站中做二级下拉菜单,网页升级访问自动,山东省工程造价信息网官网,做一个个人网站个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;给自己一个梦想#xff0c;给世界一个惊喜。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章目录 WXML 和HTML区… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭给自己一个梦想给世界一个惊喜。 **学习目标: 坚持每一次的学习打卡 文章目录 WXML 和HTML区别1.语法结构2.标签3.样式表4.事件处理 WXSS 和CSS区别1.作用范围2.语法规则3.像素单位4.样式导入5.适用范围 view组件相当于divimage组件相当于imgtext组件相当于P标签swiper组件轮播图组件flex布局案例练习 WXML 和HTML区别
wxml 和 HTML 是两种不同的标记语言分别用于小程序开发和网页开发。
1.语法结构
WXML 是微信小程序框架使用的标记语言语法结构和 HTML 类似但比 HTML 更简洁更符合小程序的开发规范。HTML 是用于网页的标记语言具有更多的标签元素和属性用于构建网页结构。
2.标签
WXML 中的标签是小程序框架提供的一组特定标签如 、 、 等用于构建小程序页面。 HTML 中的标签更加丰富如 div、p、a、span 等可以用于构建各种类型的网页。
3.样式表
WXML 中使用 WXSS类似 CSS来定义样式保持了与 WXML 文件的分离有利于代码维护和开发。HTML 中使用 CSS 来定义样式同样也是为了保持结构和样式的分离。
4.事件处理
WXML 可以通过在标签上绑定事件来实现交互如 bindtap、bindinput 等。 HTML 也可以通过事件监听器来实现交互如 onclick、onchange 等。
WXSS 和CSS区别
1.作用范围
WXSS 是微信小程序框架使用的样式表语言用于定义小程序页面的样式。CSS 是用于网页开发的样式表语言用于定义网页的样式。
2.语法规则
WXSS 在语法结构上与 CSS 类似但在一些细节上有所区别例如单位的写法、颜色的表示等。CSS 的语法规则比较成熟支持的属性和值更加丰富。
3.像素单位
在 WXSS 中可以使用 rpx响应式像素作为长度单位以适应不同的屏幕密度。在 CSS 中通常使用 px、em、rem 等单位来定义长度适用于网页的展示。
4.样式导入
在 WXSS 中可以使用 import 导入外部样式表类似于 CSS。 在 CSS 中也可以使用 import 导入外部样式表。
5.适用范围
WXSS 主要用于微信小程序的开发特别适用于小程序页面的样式定义。CSS 则广泛应用于网页开发中涵盖了更广泛的开发领域。
view组件相当于div text classgreenBigFont1.view组件 /text!-- hover-class:显示手指按下去的样式点击态 --view hover-classtouchClass第一个view/view!--hover-start-time:点击时多久后显示点击态单位为毫秒 --view hover-classtouchClass hover-start-time3000第二个view/viewview hover-classtouchClass hover-stay-time5000第三个view/view显示如下
image组件相当于img
text classtextClass2.image组件 /textimage src../../images/demo01.jpg /!-- aspectFit: --image src../../images/demo01.jpg modeaspectFit/image src../../images/demo02.jpg modeaspectFit/image src../../images/demo02.jpg modetop/image src../../images/demo02.jpg modebottom/image src../../images/demo02.jpg moderight/image src../../images/demo02.jpg modeleft/image src../../images/demo02.jpg modetop right/image src../../images/demo02.jpg modebottom right/text组件相当于P标签 text classtextClass4.text组件/texttext123/texttext user-selecttrueabc/text swiper组件轮播图组件 flex布局 案例练习
使用轮播图flex布局实现如下效果 WXML代码
!--pages/list/list.wxml--
navigation-bar title这是list页面 back{{false}} colorblack backgroundyellow/navigation-bar
scroll-view classscrollarea scroll-y typelistswiper interval2000 autoplaytrue indicator-dotstrue indicator-colorgray indicator-active-colorredswiper-itemimage src../../images/swiper01.jpg modewidthFix//swiper-itemswiper-itemimage src../../images/swiper02.jpg modewidthFix//swiper-item
/swiperview classListview classListGridimage src../../images/shi.png mode/text美食/text/viewview classListGridimage src../../images/xiu.png mode/text装修/text/viewview classListGridimage src../../images/yu.png mode/text洗浴/text/viewview classListGridimage src../../images/che.png mode/text汽车/text/viewview classListGridimage src../../images/chang.png mode/text唱歌/text/viewview classListGridimage src../../images/fang.png mode/text汽车/text/viewview classListGridimage src../../images/xue.png mode/text汽车/text/viewview classListGridimage src../../images/gong.png mode/text汽车/text/viewview classListGridimage src../../images/hun.png mode/text汽车/text/view/view/scroll-view
wxss
/* pages/list/list.wxss */
swiper {height: 350rpx;
}
swiper image {width: 100%;height: 100%;
}
.List{display: flex;flex-wrap: wrap;
}
.List .ListGrid{width: 250rpx;height: 250rpx;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
/* 九宫格区域中每一个格子中的图片和文字的样式 */
.List .ListGrid image {width: 70rpx;height: 70rpx;
}
.List .ListGrid text {color: #999;font-size: 28rpx;margin-top: 20rpx;
}
