Web前端基础案例 3

任务6制作学院新闻块Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）网页是由若干版块构成的，新闻块是网页中大量出现的版块。本任务制作学院网站中的学院新闻块，使用HTML标题标记、无序列表标记和图像标记等构建新闻块的内容，使用CSS定义新闻块的样式。通过本任务的实现，掌握新闻块的实现方法，能轻松制作网页中其他类似的版块。6.1任务描述制作学院新闻块，浏览效果如下所示。6.2知识准备CSS常用文本属性046.2.1元素的浮动6.2.2元素的定位6.2.3块元素间的外边距6.2.1元素的浮动默认情况下，网页中的块元素会以标准流的方式竖直排列，即块元素从上到下一一罗列，这时就需要设置元素的浮动属性，使块元素水平排列。元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过

float属性设置左浮动或右浮动，格式如下。浮动属性6.2.1元素的浮动选择器{float:left|right|none;}例6-1：在网页中定义两个盒子

example01.html浮动属性6.2.1元素的浮动浮动属性6.2.1元素的浮动浮动元素不再占用原文档流的位置，那么它会影响页面中其他元素的排版吗？浮动属性6.2.1元素的浮动例6-2：在网页中定义两个盒子，在盒子下面显示一段文字。example02.html

浮动属性6.2.1元素的浮动段落文本与块环绕的效果不设置浮动时的效果页面元素设置了浮动，也会影响到后面元素的排版。【结论】清除浮动6.2.1元素的浮动如果不希望浮动的元素影响到后面元素的排版时，又该如何处理呢？其实，想要解决这个问题也很简单，只需要对后面的元素设置清除浮动即可!清除浮动6.2.1元素的浮动在CSS中，使用clear属性清除浮动，格式如下。选择器{clear:left|right|both;}在例6-2中，添加如下样式代码。p{clear:both;}/*清除浮动的影响*/

浏览网页，效果如图所示。清除浮动6.2.1元素的浮动例6-3：在网页中定义一个大盒子，大盒子包含两个小盒子。example03.html

子元素浮动对父元素的影响

使用overflow属性清除浮动影响6.2.2元素的定位浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现对网页中元素的精确定位。元素的定位属性6.2.2元素的定位position属性用于定义元素的定位方式。格式如下。选择器{position:static|relative|absolute|fixed;}①static：静态定位，默认定位方式。②relative：相对定位，相对于其原标准流的位置进行定位。③absolute：绝对定位，相对于其上一个已经定位的父元素进行定位。④fixed：固定定位，相对于浏览器窗口进行定位。元素的定位属性6.2.2元素的定位position属性仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过left、right、top、bottom这4个坐标属性来精确定位元素的位置。①left：定义元素相对于其父元素左边缘的距离。②right：定义元素相对于其父元素右边缘的距离。③top：定义元素相对于其父元素上边缘的距离。④bottom：定义元素相对于其父元素下边缘的距离。定位类型6.2.2元素的定位元素的定位方式包括以下四种：静态定位相对定位绝对定位固定定位静态定位6.2.2元素的定位静态定位（static）是元素的默认定位方式，各个元素按照标准流（包括浮动方式）进行定位。在静态定位状态下，无法通过

left、right、top、bottom这4个属性来改变元素的位置。静态定位6.2.2元素的定位例6-4：演示静态定位example04.html未设置定位静态定位6.2.2元素的定位盒子未定位时，默认的定位方式是static。静态定位的元素不受top、bottom、left和right属性的影响，始终根据页面的正常流进行定位。提示：相对定位6.2.2元素的定位采用相对定位（relative）的元素会相对于自身原本的位置，通过偏移指定的距离到达新的位置。其中，水平方向的偏移量由left或right属性指定；竖直方向的偏移量由top和bottom属性指定。相对定位6.2.2元素的定位例6-5：演示相对定位example05.html设置相对定位相对定位6.2.2元素的定位第二个子元素采用相对定位，可以看出该元素相对于其自身原来的位置，向下和向右分别偏移了30px和50px，它在标准流中原来的位置仍然保留。提示：绝对定位6.2.2元素的定位采用绝对定位（absolute）的元素是依据其最近的已经定位（相对或绝对定位）的父元素进行定位的，若所有父元素都没有定位，则依据body元素（浏览器窗口）进行定位。绝对定位6.2.2元素的定位例6-6：演示绝对定位example06.html设置绝对定位绝对定位6.2.2元素的定位对父元素设置相对定位，但不对其设置偏移量，同时，对子元素two设置绝对定位，并通过right和bottom属性设置其精确位置。这种方法在实际网页制作中经常使用。若去掉对box盒子的position:relative属性的设置，那么子元素two将依据浏览器窗口进行定位。提示：固定定位6.2.2元素的定位固定定位（fixed）是绝对定位的一种特殊形式，它总是以浏览器窗口作为参照物来定位网页元素。当对元素设置固定定位后，它将脱离标准流的控制，始终依据浏览器窗口来定位元素，总是显示在浏览器窗口中的固定位置。固定定位6.2.2元素的定位下面的代码可将二维码图片固定定位在浏览器窗口中的右侧，位置不变。<imgstyle="position:fixed;right:0;top:200px;z-index:999;width:100px;"src="images/ewm.png"/>z-index属性6.2.2元素的定位当对多个元素设置定位属性时，定位元素有可能发生重叠。要想调整定位元素的层叠顺序，可以对定位元素应用z-index属性，其取值可为正整数、负整数和0。z-index的默认属性值为0，取值越大，定位元素在层叠元素中越居上。注意：z-index属性仅对定位元素有效。6.2.3块元素间的外边距网页中的块元素水平或竖直排列时，元素之间往往都有一定的间隔，其间隔的距离是由元素的外边距决定的。块元素间的垂直外边距和水平外边距计算方式是不同的，下面详细说明。块元素间的垂直外边距当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直外边距不是两者之和，而是两者中的较大者。6.2.3块元素间的外边距块元素间的垂直外边距例6-7：在网页中定义两个块，并设置它们的上下外边距

example07.html6.2.3块元素间的外边距块元素间的垂直外边距该例中定义了第一个块的下外边距为10px，定义了第二个块的上外边距为30px，此时两个块的垂直间距是30px，即margin-bottom和margin-top中的较大者。提示：6.2.3块元素间的外边距块元素间的水平外边距当两个相邻的块元素水平排列时，如果左边的元素有右外边距margin-right，右边的元素有左外边距margin-left，则它们之间的水平外边距是两者之和。6.2.3块元素间的外边距块元素间的水平外边距例6-8：在网页中定义两个块，并设置它们的左右外边距example08.html6.2.3块元素间的外边距块元素间的水平外边距该例中定义了第一个块的右外边距为10px，定义了第二个块的左外边距为30px，此时两个块的水平外边距是40px，即margin-right和margin-left之和。提示：6.2.3块元素间的外边距学院网站中的一行例6-9：example09.html6.2.3块元素间的外边距简单学院新闻块6.2.3块元素间的外边距例6-10：e