任务6制作学院新闻块教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务6 制作学院新闻块 Web前端开发案例教程 HTML5+CSS3 微课版 网页是由若干版块构成的，新闻块是网页中大量出现的版块。本任务制作学院网站中的学院新闻块，使用HTML标题标记、无序列表标记和图像标记等构建新闻块的内容，使用CSS定义新闻块的样式。通过本任务的实现，掌握新闻块的实现方法，能轻松制作网页中其他类似的版块。 任务导学 任务3 制作学院新闻块 任务6 任 务 描 述 任务效果 制作学院新闻块，浏览效果如下所示。 知识点 元素的浮动 01 元素的定位 02 块元素间的外边距 03 任务3 制作学院新闻块 任务6 知 识 准 备 6.2.1 元素的浮动 默认情况下，网页中的块元素会以标准流的方式竖直排列，即块元素从上到下一一罗列，这时就需要设置元素的浮动属性，使块元素水平排列。 元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在 CSS 中，通过 float 属性设置左浮动或右浮动，格式如下。 浮动属性 6.2.1 元素的浮动 选择器{float:left|right|none;} 8 example01.html 浮动属性 6.2.1 元素的浮动 9 浮动属性 6.2.1 元素的浮动 浮动元素不再占用原文档流的位置，那么它会影响页面中其他元素的排版吗？ 10 浮动属性 6.2.1 元素的浮动 段落文本与块环绕的效果 不设置浮动时的效果 页面元素设置了浮动，也会影响到后面元素的排版。 【结论】 11 清除浮动 6.2.1 元素的浮动 如果不希望浮动的元素影响到后面元素的排版时，又该如何处理呢？ 其实，想要解决这个问题也很简单，只需要对后面的元素设置清除浮动即可! 12 清除浮动 6.2.1 元素的浮动 在 CSS 中，使用 clear 属性清除浮动，格式如下。 选择器{clear:left|right|both;} 添加如下样式代码。 p{clear:both;} /*清除浮动的影响*/ 浏览网页，效果如图所示。 13 清除浮动 6.2.1 元素的浮动 在项目 chapter06 中再新建一个网页文件，在网页中定义一个大盒子，大盒子包含两个小盒子，文件名为 example03.html，代码如下。 子元素浮动对父元素的影响 使用overflow属性清除浮动影响 14 6.2.2 元素的定位 浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现对网页中元素的精确定位。 元素的定位属性 6.2.2 元素的定位 position属性用于定义元素的定位方式。格式如下。 选择器{position:static|relative|absolute|fixed;} ① static：静态定位，默认定位方式。 ② relative：相对定位，相对于其原标准流的位置进行定位。 ③ absolute：绝对定位，相对于其上一个已经定位的父元素进行定位。 ④ fixed：固定定位，相对于浏览器窗口进行定位。 16 元素的定位属性 6.2.2 元素的定位 position 属性仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在 CSS 中，通过left、right、top、bottom 这 4 个坐标属性来精确定位元素的位置。 ① left：定义元素相对于其父元素左边缘的距离。 ② right：定义元素相对于其父元素右边缘的距离。 ③ top：定义元素相对于其父元素上边缘的距离。 ④ bottom：定义元素相对于其父元素下边缘的距离。 17 定位类型 6.2.2 元素的定位 元素的定位方式包括以下四种： 静态定位 相对定位 绝对定位 固定定位 18 静态定位 6.2.2 元素的定位 静态定位（static）是元素的默认定位方式，各个元素按照标准流（包括浮动方式）进行定位。在静态定位状态下，无法通过 left、right、top、bottom 这 4 个属性来改变元素的位置。 19 静态定位 6.2.2 元素的定位 example04.html 未设置定位 20 静态定位 6.2.2 元素的定位 盒子未定位时，默认的定位方式是static。静态定位的元素不受top、bottom、left和right属性的影响，始终根据页面的正常流进行定位。 提示： 21 相对定位 6.2.2 元素的定位 采用相对定位（relative）的元素会相对于自身原本的位置，通过偏移指定的距离到达新的位置。其中，水平方向的偏移量由 left 或 right 属性指定；竖直方向的偏移量由 top 和 bottom 属性指定。 22 相对定位 6.2.2 元素的定位 example05.html 设置相对定位 23 相对定位 6.2.2 元素的定位 第二个子元素采用相对定位，可以看出该