Web前端技术（HTML5+CSS3+响应式设计 课件 7--网页布局.ppt

Web前端技术（html5+css3+响应式设计）第7章网页布局

问题的导入网页的信息是可以用html语言进行标记。如何让这些元素，整齐、美观的排放在网页，就是网页的布局要解决的问题。网页版面的设计延续了传统纸媒的特点，把内容分布在一列或多列中，又比传统的纸媒更灵活，它可以根据内容自适应宽度和高度。导入问题

教学内容3如何实现布局2Html5中页面标签1常见的布局形式4布局案例

7.1网页布局思想网页布局采用了传统纸媒的“网格”布局思想，这种布局优势在于：基于网格的设计可以使大量的页面保持很好的一致性，视觉风格统一。均匀的网格以合理的比例将页面划分为一定数目的等宽列，这样在设计中产生很好的均衡感。使用网格可以帮助开发者把标题、导航、文字、图片等各种元素合理地分配到适当的区域，这样可以为内容繁多的页面创建出一种良好的秩序。网格设计不但使网页版面布局产生一致性，也可以通过跨列的方式，创建出各种变化的形式，这样既保持了页面的一致性，有可以打破网格的呆板性。网格设计可大大提高整个页面的可读性。如果一行文字过长，读者在换行时，眼球就必须跟随运动，造成阅读的疲劳。通过网格，可以把一行文字的长度限制在适当的范围内，使得阅读既方便又舒适。

7.1版面布局网页布局的原理是将页面在整体上用进行div标记的分块，然后对各个块用CSS进行定位，最后再在各个版块中添加相应样式。大多数的网站采用一套通用的排版模式，页眉、页脚、侧边栏和内容区域。页眉，页脚的内容在每个页面都是一样。只有中间的内容各不相同。这样形成了整体风格统一。

7.1常见的几种布局单列布局

7.1常见的几种布局——二列布局（a）（b）二列布局

二列布局7.1常见的几种布局——二列布局

7.1常见的几种布局——三列布局三列布局

7.1常见的几种布局——混合布局混合布局

混合布局7.1常见的几种布局——混合布局

常见的几种布局——混合布局

常见的几种布局——混合布局

7.2页面布局标签 HTML5提供了用于语义化的标签定义页面结构的元素，主要包括如下几个元素：1.header常用于设置一个页面的头部2.footer常用于设置一个页面的底部区域。3.nav常用来定义导航栏。4.section元素用来定义文档中的区块，可视为一个区域分组元素，用来给页面上的内容分块。

7.2页面布局标签5.article元素用于定义一个独立的内容区块，比如一篇文章、一篇博客、一个帖子、论坛的一段用户评论，一篇新闻消息等。article是一个特殊的section标签，它比section具有更明确的语义,代表一个独立的、完整的相关内容块。6.aside元素通常用来设置侧边栏，用于定义元素之外的内容，前提是这些内容与article元素内的内容相关，同时也可作为article内部元素使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释

7.3如何实现布局单列布局标签

二列布局的标签7.3如何实现布局外面加一个div，加载class类.container，目的的居中对齐

7.3如何实现布局三列布局结构标签外面加一个div，加载class类.container

7.3三列布局的css样式设置header,nav,.container,footer{ width:1000px;//宽度为1000~1200px之间 margin:0auto;//保证居中}header{height:100px;}//根据情况设定高度nav{height:40px;//根据情况设定高度margin-bottom:5px;}

.leftside{ width:25%;//根据情况设定宽度 float:left;//一定要设}.rightside{ width:25%; float:left;根据情况设定高度}section{ width:49%; float:left;根据情况设定高度 margin:05px5px;}footer{ clear:both;//清除浮动的影响 height:80px;7.3三列布局的css样式设置

7.4综合案例步骤搭建Html结构添加主要的类名写样式1、公共的样式2、页眉的样式3、主体的样式4、页脚的样式5、交互的设计

小结常见布局的形式Html5中新增的页面标签如何实现各种布局小结：（1）页面结构的分析。先画出结构线框图，再进行下一步编写代码的工作。（2）对横向并列的div使用“浮动法”进行布局

THEEND!