Web前端开发（HTML5+CSS3）编写可复用的header.html 在观察效果图的时候我们发现pc端的三个页面均有可以复
用的部分，那就是头部和底部，接下来我们就来编写顶部导航。我们先在common-html文件夹下创建一个header.html，继续
观察效果图中的header，我们发现header中 分为两个部分。企业logo和菜单，根据效果图我们在外部使用一个div来包裹这两
个部分并给这个父级元素定义一个class名，这里我们就定义为header_top。编写可复用的header.html 父元素定义完了，接下来我们就要增加header的内容，在父元素内
部我们添加一个img用于展示企业logo，class名设置为logo，src设置为logo图片的路径（图片素材在附件中），在img
同级我们再添加一个ul用于展示菜单，仔细观察header效果图我们会发现导航按钮会根据当前选择的页面不同而展示不同的样式，所以我们
先在首页a标签上加上active的class名，用于编写不同的样式。根据效果图我们发现下载app按钮的样式和其他跳转tab的样式不
同，所以我们单独给它加上不同的class。编写可复用的header.html 基础的dom结构编写好后我们需要给he
ader添加样式，我们在css文件夹下新建一个common.css用于编写通用组件的css，这里我就不过多的阐述css如何编写，但
是有几个知识点我需要单独讲一下，那就是display：flex和float。为什么我要单独来讲这两个样式呢？有了解过css3的同学
应该知道display：flex是将父元素转变为弹性盒模型，使父元素内的子元素脱离文档流，使父元素内的元素可以显示在一行内。而fl
oat则是使被设置属性的元素脱离文档流。这两者的还是有很大区别的，flex的只作用在父元素下第一级的子元素，而float则会影响到
兄弟元素，有的时候使用不当还有可能会影响到父元素的兄弟元素。在这里我使用的float，具体的css文档我推荐同学们在MDN搜索并仔
细阅读（https://developer.mozilla.org/zh-CN/）编写可复用的header.html |
|
