1.下面是flex六个属性的图片1.下面是flex六个属性的图片
2.下面是我对页面组件的理解2.下面是我对页面组件的理解
对于页面组件的感觉，我感觉就是HTML用link引用组件，一个是在直接在html中做样式，一个是在
css和js中对页面进行设计，不过通过组件开发，可以高效的进行页面设计，不用再做一些重复的操作，
大大提高效率。总的来说，组件开发很意义的。开发的组件，可以专门对某个部分，进行设计，对页面
的修改提供很大的便利。
实现过程：1.分析页面层次2.确定每个层次需要的组件3.按照页面格式，一步步设置样式4.实现样式5.进行调整优化。
3.默认的导航代码
首先是效果图
下面是代码
我把html和css代码写在一个文档方便查看，因为代码比较少，只是写一次，估计这个样式用不到了，以后做
完整网页的时候不会放一起的。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="public-header.css"><link rel="stylesheet" href="font/iconfont.css"><title>导航</title><style type="text/css">/*头部导航*/.public-header {height: 44px;background-color: black;padding: 0 20px;display: flex;flex-flow: row nowrap;}.public-header a {line-height: 44px;color: #ccc;padding: 0 10px;text-decoration: none;}.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-headline {padding: 30px;text-align: center;}.public-headline span {font-size: 30px;font-weight: bolder;padding-bottom: 7px;border-bottom: 3px solid red;</style></head><body><div class="public-header"><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>
以上就是我作业的全部内容，多谢观看
