Web前端开发案例教程（HTML5 CSS3）（微课版）（第2版） 课件 任务6制作学院新闻块.pptx

任务6 制作学院新闻块Web前端开发案例教程 HTML5+CSS3 微课版网页是由若干版块构成的，新闻块是网页中大量出现的版块。本任务制作学院网站中的学院新闻块，使用HTML标题标记、无序列表标记和图像标记等构建新闻块的内容，使用CSS定义新闻块的样式。通过本任务的实现，掌握新闻块的实现方法，能轻松制作网页中其他类似的版块。任务3 制作学院新闻块任务6任务效果制作学院新闻块，浏览效果如下所示。知识点 元素的浮动01 块元素间的外边距 元素的定位0203任务3 制作学院新闻块任务66.2.1 元素的浮动默认情况下，网页中的块元素会以标准流的方式竖直排列，即块元素从上到下一一罗列，这时就需要设置元素的浮动属性，使块元素水平排列。6.2.1 元素的浮动浮动属性元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在 CSS 中，通过 float 属性设置左浮动或右浮动，格式如下。选择器{float:left|right|none;}6.2.1 元素的浮动浮动属性example01.html6.2.1 元素的浮动浮动属性浮动元素不再占用原文档流的位置，那么它会影响页面中其他元素的排版吗？6.2.1 元素的浮动浮动属性不设置浮动时的效果【结论】段落文本与块环绕的效果页面元素设置了浮动，也会影响到后面元素的排版。6.2.1 元素的浮动如果不希望浮动的元素影响到后面元素的排版