任务6制作学院新闻块.pptxVIP

任务描述任务6制作学院新闻块

网页是由若干版块构成的，新闻块是网页中大量出现的版块。本任务制作学院网站中的学院新闻块，使用HTML标题标记、无序列表标记和图像标记等构建新闻块的内容，使用CSS定义新闻块的样式。通过本任务的实现，掌握新闻块的实现方法，能轻松制作网页中其他类似的版块。

任务效果制作学院新闻块，浏览效果如下所示。

知识点元素的浮动01块元素间的外边距02制作学院新闻块03

知识准备任务6制作学院新闻块

6.2.1元素的浮动默认情况下，网页中的块元素会以标准流的方式竖直排列，即块元素从上到下一一罗列，这时就需要设置元素的浮动属性，使块元素水平排列。

元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性设置左浮动或右浮动，格式如下。浮动属性6.2.1元素的浮动选择器{float:left|right|none;}

example01.html浮动属性6.2.1元素的浮动

浮动属性6.2.1元素的浮动浮动元素不再占用原文档流的位置，那么它会影响页面中其他元素的排版吗？

浮动属性6.2.1元素的浮动段落文本与块环绕的效果不设置浮动时的效果页面元素设置了浮动，也会影响到后面元素的排版。【结论】

清除浮动6.2.1元素的浮动如果不希望浮动的元素影响到后面元素的排版时，又该如何处理呢？其实，想要解决这个问题也很简单，只需要对后面的元素设置清除浮动即可!

清除浮动6.2.1元素的浮动在CSS中，使用clear属性清除浮动，格式如下。选择器{clear:left|right|both;}添加如下样式代码。p{clear:both;}/*清除浮动的影响*/浏览网页，效果如图所示。

清除浮动6.2.1元素的浮动在项目chapter06中再新建一个网页文件，在网页中定义一个大盒子，大盒子包含两个小盒子，文件名为example03.html，代码如下。子元素浮动对父元素的影响使用overflow属性清除浮动影响

6.2.2块元素间的外边距网页中的块元素水平或竖直排列时，元素之间往往都有一定的间隔，其间隔的距离是由元素的外边距决定的。块元素间的垂直外边距和水平外边距计算方式是不同的，下面详细说明。

块元素间的垂直外边距当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直外边距不是两者之和，而是两者中的较大者。6.2.2块元素间的外边距

块元素间的垂直外边距example04.html6.2.2块元素间的外边距

块元素间的垂直外边距该例中定义了第一个块的下外边距为10px，定义了第二个块的上外边距为30px，此时两个块的垂直间距是30px，即margin-bottom和margin-top中的较大者。提示：6.2.2块元素间的外边距

块元素间的水平外边距当两个相邻的块元素水平排列时，如果左边的元素有右外边距margin-right，右边的元素有左外边距margin-left，则它们之间的水平外边距是两者之和。6.2.2块元素间的外边距

块元素间的水平外边距example05.html6.2.2块元素间的外边距

块元素间的水平外边距该例中定义了第一个块的右外边距为10px，定义了第二个块的左外边距为30px，此时两个块的水平外边距是40px，即margin-right和margin-left之和。提示：6.2.2块元素间的外边距

学院网站中的一行example06.html6.2.2块元素间的外边距

任务实现任务6制作学院新闻块

6.3.1搭建学院新闻块页面结构在项目chapter06中再新建一个网页文件，制作学院新闻块，文件名为news.html，在文件中首先添加新闻块内容，即结构，然后定义块及块中元素的样式。

学院新闻块6.3.1定义学院新闻块页面结构

6.3.1定义学院新闻块页面结构浏览网页，效果如下图所示。

学院新闻块6.3.2定义学院新闻块CSS样式

6.3.2定义学院新闻块CSS样式浏览网页，效果如下图所示。

任务小结任务6制作学院新闻块

任务小结本任务围绕学院新闻块的制作，介绍了元素的浮动、元素间的外边距等内容。在网站建设中，元素的浮动是非常重要也是比较难的部分，请同学们一定要多多练习，加深理解。本任务介绍的主要知识点如下表所示。

任务小结