Web前端开发案例教程第9章.pptxVIP

第9章 HTML5+CSS3布局网页 ※ 理解元素的浮动属性；※ 掌握元素的各种定位方法；※ 掌握常用的HTML5+CSS3布局方式。德才兼备 知行合一第9章 HTML5+CSS3布局网页 案例：学院网站主页布局9.1知识准备9.2案例实现9.3德才兼备 知行合一第9章 HTML5+CSS3布局网页 9.1案例：学院网站主页布局德才兼备 知行合一 9.1 案例：学院网站主页布局根据学院网站主页效果图，对主页的布局进行划分。创建网页，对学院网站的主页进行布局。布局浏览效果如图所示。德才兼备 知行合一第9章 HTML5+CSS3布局网页 9.2知识准备 德才兼备 知行合一 9.2.1 元素的浮动学院网站主页中的块，有的是水平排列，有的竖直排列。但默认情况下，网页中的块元素会以标准流的方式进行竖直排列，即将块元素从上到下一一罗列。但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。德才兼备 知行合一 9.2.1 元素的浮动所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性来设置左浮动或右浮动。其语法格式如下。选择器{float:left|right|none;}注意：设为left或right，使浮动的元素可以向左