组件的开发与使用方法
组件是什么
*组件相当于将网页中的元素按块分割，将整个网页分成一块一块的小区域
组件有什么用
*组件分为复用组件和专用组件
*组件可以节省大量重复代码和写代码的时间，同时减少出错及排查时间
组件的使用方法
*将一个个组件按照约定语法拼接即可组成一个完整的网页界面
*垂直排列用:@import
*水平排列用: @import + Grid
flex项目上的6个属性
一个网站顶部导航的例子
最终效果
HTML代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>组件开始练习</title><link rel="stylesheet" href="public_header.css"><link rel="stylesheet" href="../../../static/font/iconfont.css"></head><body><!--网页头部开始--><div class="public-header"><a href="" class="on">网站首页</a><a href="">网站专题</a><a href="">网站地图</a><a href="">网站商城</a><a href="">讨论区</a><a href="">联系我们</a><span><a href=""><i class="iconfont icon-huiyuan21"></i>登陆</a><a href="">免费注册</a></span></div></body></html>
添加公共样式表代码后的显示效果
公共样式代码:public_reset.css
/*初始化浏览器*/* {margin: 0;padding: 0;/*添加一个参考线，方便 调整,调整完后需要删掉或注释掉*//*outline: 1px dashed greenyellow;*/}body {font-size: 14px;color: #282c31;background-color: #cccccc;}a {color: #EBEBEB;/*去掉字体下划线*/text-decoration: none;font-size: 14px;}
添加头部导航组件的样式代码后的显示效果
头部导航组件的样式代码
/*引入公共样式表*/@import "../public_reset.css";/*定义头部导航*/.public-header {height: 44px;background-color: #282c31;padding: 0 20px;/*转为flex，这样里面的元素就可以设置宽度了*/display: flex;/*设置里面的行内块元素水平不换行*//*这是默认值可以不写，但写了方便理解,并且对新手熟悉代码有帮助*/flex-flow: row nowrap;}/*定义导航链接的样式*/.public-header a{/*设置a链接的行高，一般同父元素同高，设置垂直居中显示*/line-height: 44px;color: #EBEBEB;padding: 0 10px;}/*定义鼠标经过a链接时的显示效果*//*a 标签前面用 > 表示这个样式只对flex子元素中的 a 标签起作用*/.public-header >a:hover{background-color: #EBEBEB;color: #282c31;}/*添加网站首页显示样式*/.public-header .on {background-color: #EBEBEB;color: #282c31;}/*定义会员登录链接样式*/.public-header > span {/*margin-right 不设置的话默认是0，下面margin-left取值为 auto ，则自动占据了剩余的全部宽度*/margin-left: auto;}/*设置会员登陆的字体图标*/.public-header > span i {font-size: 16px;color: #EBEBEB;padding-right: 10px;}
注意事项
*新手刚学习时多添加备注信息方便查找
*参照老师写法时要思考为什么这样设置架构
*组件的命名应当是一个HTML对应一个同名的CSS，并放在同名文件夹内
*HTML内的类名应当同组件文件名称一致（下划线改为中横）