Web前端开发案例教程（HTML5+CSS3）课件 任务9布局学院网站主页.pptxVIP

;;9.1任务描述;9.2知识准备;9.2.1HTML5新增结构标记;header标记表示页面或页面中某一个区块的页眉，通常放置标题，它可以包含页面标题、LOGO图片，搜索表单等，语法格式如下：;9.2.1HTML5新增结构标记;9.2.1HTML5新增结构标记;9.2.1HTML5新增结构标记;section标记用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。section标记通常用于文章的章节、页眉、页脚或文档中的其他部分。;例9-1：用section标记定义内容区块example01.html;浏览网页，效果如图9-5所示：;article标记;例9-2用article标记定义新闻内容example02.html。;浏览网页，效果如图9-6所示。;在HTML5中，article标记可以嵌套使用。article标记可以包含多个section标记，section标记也可以包含多个article标记。article标记可以被看成是一种特殊类型的section标记，它比section标记更强调独立性。即section标记侧重分段或分块，而article侧重独立性。如果一块内容相对来说比较独立、完整，就应该使用article标记；如果想将一块内容分成几段，就应该使用section标记。;例9-3在项目chapter09中再新建一个网页文件，用article标记和section标记定义新闻内容，文件名：example03.html。;浏览网页，效果如图9-7所示。;aside标记;例9-4：用aside标记定义网页的侧边栏导航example04.html。;浏览网页，效果如图9-8所示。;footer标记;学院网站中footer标记的结构代码如下。;9.2.2HTML5+CSS3布局;9.2.2HTML5+CSS3布局;9.2.2HTML5+CSS3布局;9.2.2HTML5+CSS3布局;9.2.2HTML5+CSS3布局;对于内容比较多的网站，有时需要采用三列布局。三列布局实际上是将中间内容分成左、中、右三部分。;9.2.2HTML5+CSS3布局;9.3任务实现;9.3任务实现;任务小结;任务小结