微信小程序(一)
学习目标
环境准备:编辑器/浏览器
前置知识准备:html/css、flex布局【重要】、盒子模型
学习内容:
开发环境:
1、vs code
常用扩展和快捷键之前发过介绍文章:vs code初次使用必备
https://blog.csdn.net/liuxin_2/article/details/113568602
2、谷歌浏览器----开发必备
新建网页
1、新建文件夹
2、在vs code 内新建网页文件 .html
3、编写网页代码
英文的!再按 回车即可自动生成下图
注意:网页的后缀要保存为.html才可自动生成
4、双击网页显示效果
简单回顾html和css
html 简单
1.块级元 素默认会换行,如 div
2.行内元素 默认不会换行,如 span
css 难知识
1、宽度和高度
- px % 简单
- vw vh 简单,好用;新技术;
- vw viewport width视口的宽度
- 100vw等于整个屏幕的宽度
- vw是可视窗口的宽度单位,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1200px,那么1vw = 12px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百
分比和其父元素的宽度有关
2.字体颜色 背景颜色
■值为颜色名称——red / yellow ;
■值为十六进制值的颜色—— #ffff ;#000000;
■值为rgb代码的颜色——rgb(255,255,255)
div{
width: 50vw;
height: 50vh;
/* background- color: aquamarine; */