2019.12.25作业，由于工作原因，这几天未能完成作业，现开始补上作业。
flex项目的属性
flex的项目有6个属性：flex-basis,flex-grow,flex-shrink,flex,align-self,order,分别控制flex项目的宽度，扩展，收缩，单独对齐方式以及排序方式。
组件的开发
一个组件就是一个css样式表，通过样式表，像搭建积木一样将整个网页快速创建出来，分为公共组件和专用组件
使用的语法：@import
实现过程：
1、创建一个组件库components；
2、创建公共组件，例如：公共头部，公共底部，广告栏等等；
3、创建专用组件；
创建一个组件的过程
1、创建一个html文档，写好网页的元素
2、创建一个css文档，在css文档中写好html文档中元素的样式
3、在html文档中使用link导入css文档样式
默认导航页实例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>title</title><link rel="stylesheet" href="components/public/public_header/public_header.css"><link rel="stylesheet" href="components/public/public_headline/public_headline.css"></head><body><div class="public-header"><a href="">首页</a><a href="">导航</a><a href="">资讯</a><a href="">新闻</a><a href="">二手商品</a><a href="">讨论区</a><span><a href=""><i class="iconfont icon-huiyuan2"></i>登录</a><a href="">注册</a></span></div><div class="public_headline"><span>二手交易</span></div></body></html>
公共页面重置
*{margin: 0;padding: 0;/*参考线*//*outline: 1px dashed red;*/}body{font-size: 14px;color: #555555;background-color: #efefef;}a{color: #404040;text-decoration: none;font-size: 13px;}
公共导航
/*@import "pubilc_reset.css";*/@import url(../pubilc_reset.css);.public-header {height: 44px;background-color: black;padding: 0 20px;display: flex;flex-flow: row nowrap;}.public-header a{/*margin: auto 0;*/line-height: 44px;padding: 0 10px;color: #cccccc;}.public-header > a:hover{background-color: #fff;color: black;}.public-header > span {margin-left: auto;}.public-header> span i{font-size: 16px;color: #cccccc;padding-right: 10px;}.public-header > span a{/*margin: auto 0;*/line-height: 44px;padding: 0 10px;color: #cccccc;}
公共大标题
@import "../pubilc_reset.css";.public_headline{padding: 30px;text-align: center;}.public_headline span {font-size: 30px;font-weight: bolder;padding-bottom: 7px;border-bottom: 3px solid red;}
