header区域开发
- 打开cmd,安装几个依赖包。
cnpm install stylus --save
cnpm install stylus-loader --save
这两个包是干什么的呢?相当于把css样式当模块写。
-
在index.html,中加入相关代码,防止页面被缩放和放大。
-
创建文件夹,注册并导入组件。
-
lang="stylus"导入我们的插件 scoped是指样式只对这个组件生效。
样式解析
<style lang="stylus" scoped>
.header
display: flex
line-height: .86rem
background: #00bcd4
color: #fff
.header-left
width: .64rem
float: left
.header-input
flex: 1
height: .64rem
line-height: .64rem
margin-top: .12rem
margin-left: .2rem
background: #fff
border-radius: .1rem
color: #ccc
.header-right
width: 1.24rem
float: right
text-align: center
</style>