⼩程序css框架,⼩程序的样式：wxss《⼩程序：框架》⼩程序⾥⾯⽤的样式叫 wxss， wx 表⽰，ss 是 style sheets .. 它跟我们平时⽤的 css 差不多 .. 你可以把它理解成⼩程序定制版的 css ...
在⼩程序的有个主要的样式⽂件，每个页⾯也可以有属于⾃⼰的样式⽂件 .. 打开 index 页⾯的 wxml ⽂件 .. 在这个 view 组件上⾯，可以⽤⼀个 class ，在组件上⾯添加⼀个类 .. 名字是 container .. 这个 container 类的样式在其它页⾯上也应该会⽤到 .. 所以我们可以把它的样式定义到⼩程序的主样式⽂件⾥ ..
在⼩程序的根⽬录下⾯，创建⼀个样式⽂件 .. 名字是 app.wxss .. ⼩程序的主样式⽂件必须是这个名字 .. 添加⼀个 .container .. 作为样式的选择器 ..
先把组件的 box-sizing 的值设置成 border-box .. 再设置⼀下它的 height ，也就是⾼度 .. 值可以是 100vh ..
再⽤⼀个 padding ，添加⼀点边距 .. 值是 8px .. 然后⽤⼀个 background 属性，设置⼀下页⾯的背景 .. #f8f8f8 ...
再设置⼀下⽂字的样式，⽤⼀个 color 属性，值可以使⽤ rgba 来表⽰ .. 颜⾊是⿊⾊ .. 不透明度设置成 0.85 ...
现在我想让页⾯上的内容⽔平还有垂直都居中 .. 我们可以使⽤ css 的 flexbox 去实现 .. 先改造⼀下页⾯的 wxml .. 在这个 view 组件上⾯，再添加两个类 .. vertical centered .. 然后在它⾥⾯再嵌套⼀个 view 组件 ..
css设置文字垂直居中回到⼩程序的主样式⽂件 ... 先定义⼀下 .centered 这个类的样式 .. 如果组件上带这个样式，我们就让它⽔平居中 .. 把组件的 display 的值设置成 flex ，让它变成⼀个 flexbox ..
flex-direction 的值设置成 column ... 然后再设置⼀下它⾥⾯的元素的对齐 ... ⽤的是 align-items ... 设置成 center ..
你会看到，现在页⾯上的这个元素会⽔平居中显⽰ ..
再添加⼀个样式选择器 .. 同时带 .vertical 还有 .centered 类的组件 .. 设置⼀下它的 view 这个⼦元素的样式 ..
把这个组件也设置城 flexbox ... display: flex ... 然后把 height 的值设置成 100vh .. 再把 flex-direction 设置成 row .. 最后再⽤ align-items .. 让组件居中对齐 ...
现在页⾯上的这个组件会⽔平居中，同时也会垂直居中 ..
⼩程序页⾯上共⽤的样式，你都可以把它放在这个 app.wxss ⽂件⾥⾯ .. 这样你就可以在⼩程序的所有的页⾯上使⽤在这个⽂件⾥定义的样式 ..
页⾯样式
每个页⾯也可以有⾃⼰单独的样式 .. ⽐如我们给这个 index 页⾯创建⼀个样式⽂件 .. ⽂件的名字应该就是页⾯的名字 .. 这⾥就是 index，后缀是 wxss ..
在打开页⾯的 wxml ⽂件 .. 在这个 text 组件上⾯，添加⼀个类 .. 名字是 header ... 我们把这个 header 的样式放在页⾯的样式⽂件⾥ ...
⼀个 .header ... ⽤⼀个 font-size 设置⼀下字号 ... 再⽤⼀个 font-family 设置⼀下字体 ..

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。