Web前端开发（HTML5+CSS3）6编写可复用的header_第1页
Web前端开发（HTML5+CSS3）6编写可复用的header_第2页
Web前端开发（HTML5+CSS3）6编写可复用的header_第3页
Web前端开发（HTML5+CSS3）6编写可复用的header_第4页
Web前端开发（HTML5+CSS3）6编写可复用的header_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

编写可复用的header.htmlWeb前端开发（HTML5+CSS3）编写可复用的header.html

在观察效果图的时候我们发现pc端的三个页面均有可以复用的部分，那就是头部和底部，接下来我们就来编写顶部导航。我们先在common-html文件夹下创建一个header.html，继续观察效果图中的header，我们发现header中分为两个部分。企业logo和菜单，根据效果图我们在外部使用一个div来包裹这两个部分并给这个父级元素定义一个class名，这里我们就定义为header_top。<divclass="header_top"></div>编写可复用的header.html

父元素定义完了，接下来我们就要增加header的内容，在父元素内部我们添加一个img用于展示企业logo，class名设置为logo，src设置为logo图片的路径（图片素材在附件中），在img同级我们再添加一个ul用于展示菜单，仔细观察header效果图我们会发现导航按钮会根据当前选择的页面不同而展示不同的样式，所以我们先在首页a标签上加上active的class名，用于编写不同的样式。根据效果图我们发现下载app按钮的样式和其他跳转tab的样式不同，所以我们单独给它加上不同的class。编写可复用的header.html

基础的dom结构编写好后我们需要给header添加样式，我们在css文件夹下新建一个common.css用于编写通用组件的css，这里我就不过多的阐述css如何编写，但是有几个知识点我需要单独讲一下，那就是display：flex和float。为什么我要单独来讲这两个样式呢？有了解过css3的同学应该知道display：flex是将父元素转变为弹性盒模型，使父元素内的子元素脱离文档流，使父元素内的元素可以显示在一行内。而float则是使被设置属性的元素脱离文档流。这两者的还是有很大区别的，flex的只作用在父元素下第一级的子元素，而float则会影响到兄弟元素，有的时候使用不当还有可能会影响到父元素的兄弟元素。在这里我使用的float，具体的cs

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论