iosapp做网站,做网站宣传费用记什么科目,布吉网站建设哪家技术好,网站建设 宣传IT廉连看——Uniapp——页面样式与布局
目标#xff1a;
了解样式与布局的规范
熟记px和rpx的区别
全局样式与index样式的区别
一、查看uniapp框架简介——尺寸单位 px尺寸单位的使用是贯穿始终的。
[IT廉连看]
二、尺寸单位——实操效果
1、打开Hbuilder X并进入in…IT廉连看——Uniapp——页面样式与布局
目标
了解样式与布局的规范
熟记px和rpx的区别
全局样式与index样式的区别
一、查看uniapp框架简介——尺寸单位 px尺寸单位的使用是贯穿始终的。
[IT廉连看]
二、尺寸单位——实操效果
1、打开Hbuilder X并进入index.vue页面 2、删除初始化代码 3、删除date中保存的数据 4、删除样式 5、删除后运行至微信开发者工具查看效果 是一个空白的效果后边我们就可以自己添加东西啦
6、添加一些组件添加一些效果
6.1添加view组件APIview回车 添加后效果 接下来一起添加一些样式 200px微信开发者工具查看效果 200rpx微信开发者工具查看效果发现效果不一样 为什么会有这样的问题
知道的同学奖励一根烤肠。
咱们把像素调整成屏幕的一半来看一看750/2
[IT廉连看] 三、样式导入简介——实操效果
样式导入使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用;表示语句结束。
styleimport ../../common/uni.css;
.uni-card {box-shadow: none;}
/style
内联样式框架组件上支持使用 style、class 属性来控制组件的样式。 style静态的样式统一写到 class 中。style 接收动态的样式在运行时会进行解析请尽量避免将静态的样式写进 style 中以免影响渲染速度。 view :style{color:color} / class用于指定样式规则其属性值是样式规则中类选择器名(样式类名)的集合样式类名不需要带上.样式类名之间用空格分隔。 view classnormal_view / 选择器 目前支持的选择器有 选择器样例样例描述.class.intro选择所有拥有 classintro 的组件#id#firstname选择拥有 idfirstname 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容仅 vue 页面生效::beforeview::before在 view 组件前边插入内容仅 vue 页面生效注意 在 uni-app 中不能使用 * 选择器。 微信小程序自定义组件中仅支持 class 选择器 page 相当于 body 节点例如 !-- 设置页面背景颜色使用 scoped 会导致失效 -- page {background-color: #ccc;
}
进入全局样式的编写 注在这里编写的样式在各个页面都可以使用。
添加全局使用的样式如背景颜色、全局使用的字体大小 随后回到index.vue文件中给它起一个class名title。 小提问
如果我们也在index中写了一个title那么它会优先使用哪个样式呢那么它们的区别在哪里
[IT廉连看]
扫盲
这里是用来写自定义组件的地方。
templateview这是一个自定义组件/view
/templatescript
/scriptstyle
/style
小结
px和rpx的区别
全局样式与index样式的区别 [IT廉连看]
