2..hbuilderx存放的是hbuilderx生成的文件目录
3.api存放的是接口地址
4.common文件目录
5.components组件列表存放一些组件以及组件的CSS样式和一些js方法
6.pages页面组件目录每一个功能对应一个页面
7.plugin存放的colorui的一些公用组件以及css样式
9.store存放vue来进行数据的统一管理
10.hbuilderx运行时候解析出来的文件
11.app.vue存放的是公共的样式以及一些公共的js方法
12.min.js存放的是一些全局使用的方法以及以解全局组件页面
下载
样式引入
colorui——导航组件属性以及参数
1.页面样式属性
页面使用参数的时候使用clss属性来定义属性值
1.1margin外边距
固定布局-size(5种)
比例布局-num(3种)
垂直对齐-v(5种)
水平对齐-h(5种)
flex布局代码
.flex{display:flex}/*对齐*/.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-center{align-items:center}.align-stretch{align-items:stretch}/*其他*/.flex-direction{flex-direction:column}.flex-wrap{flex-wrap:wrap}/*固定尺寸*/.basis-xs{flex-basis:20%}.basis-sm{flex-basis:40%}.basis-df{flex-basis:50%}.basis-lg{flex-basis:60%}.basis-xl{flex-basis:80%}/*比例分布*/.flex-sub{flex:1}.flex-twice{flex:2}.flex-treble{flex:3}/*自对齐*/.self-start{align-self:flex-start}.self-center{align-self:flex-center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.align-stretch{align-items:stretch}2.2Grid布局
辅助布局-size(6种)
辅助布局-position(6种)
3.背景颜色Background
3.1深色背景bg-{color}15个
3.2淡色背景bg-{color}后面加.light15个
3.3渐变.bg-gradual-{color}
4.图片背景
bg-shadeTop背景图片加一层黑色遮罩上面开始bg-shadeBottom背景图片加一层黑色遮罩下面开始
5.边框阴影颜色
6.文字Text
大小Size(8种)
颜色Color(15种)
color 颜色 内容red 嫣红#e54d42 redorange 桔橙#f37b1d orangeyellow 明黄#fbbd08 yellowolive 橄榄#8dc63f olivegreen 森绿#39b54a greencyan 天青#1cbbb4 cyanblue 海蓝#0081ff bluepurple 姹紫#6739b6 purplemauve 木槿#9c26b0 mauvepink 桃粉#e03997 pinkbrown 棕褐#a5673f browngrey 玄灰#8799a3 greygray 草灰#aaaaaa grayblack 墨黑#333333 backwhite 雅白#ffffff white