《网页设计与制作项目教程》-任务7设计“学习动态”子页面

任务7

设计“学习动态”子页面任务本任务通过设计“学习动态”子页面，重点学习图像相关的CSS样式，CSS边框与背景的设置。同时，进一步学习贯彻党的二十大精神知识。网页效果如图所示。任务7设计“学习动态”子页面任务任务7设计“学习动态”子页面知识目标技能目标素质目标（1）掌握图像相关的CSS样式。（2）掌握CSS边框设置。（3）掌握CSS背景设置。（1）能够使用CSS设置图像样式。（2）能够灵活运用CSS设置元素的边框。（3）能够灵活运用CSS设置元素的背景。（1）提升逻辑思维能力及动手能力。（2）培养学生的创新创造能力。（3）培养自主学习的能力。任务7设计“学习动态”子页面图像相关的CSS样式

CSS边框与背景设置任务实现任务7设计“学习动态”子页面1.图像相关的CSS样式1.1图像大小1.2设置图像的对齐方式1.3设置图文混排效果任务7设计“学习动态”子页面1.1图片大小使用CSS样式控制图像的大小，可以通过width和height两个属性来实现。需要注意的是，当width和height两个属性的取值使用百分比数值时，它是相对于父元素而言的。如果将这两个属性设置相对于body的宽度或高度，就可以实现当浏览器窗口改变时，图像大小也发生相应变化的效果。1.图像相关的CSS样式1.2设置图像的对齐方式2.设置图像的对齐方式1.图像的水平对齐方式图像的水平对齐与文本的水平对齐类似，也有左、中、右的效果。只是图像的水平对齐方式不能直接在图像上设置text-align属性来实现，而是通过图像的父元素设置text-align属性来实现。2.图像的垂直对齐方式

图像的垂直对齐方式是指图片与文本之间的垂直对齐效果，是通过vertical-align属性设置来设置的。语法格式如下：属性值的含义如表所示：vertical-align:baseline｜sub｜super｜top｜text-top｜middle｜bottom｜text-bottom｜length｜%;1.2设置图像的对齐方式2.设置图像的对齐方式vertical-align属性值及含义值含义baseline默认。元素放置在父元素的基线上sub垂直对齐文本的下标super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部bottom使元素及其后代元素的底部与整行的底部对齐text-bottom把元素的底端与父元素字体的底端对齐length将元素升高或降低指定的高度，可以是负数%使用"line-height"属性的百分比值来排列此元素，允许使用负值1.3设置图文混排效果3.设置图文混排效果在网页页面中，文本与图像经常会出现混合排版的效果，这种效果可以通过在图像上设置float属性来实现。语法格式如下：

属性值的含义如所示：

float:left｜right｜none;值含义left元素向左浮动right元素向右浮动none元素不浮动，是默认值表float属性值及含义有关float的深入理解和应用将在项目4中详细讲解。图像相关的CSS样式

CSS边框与背景设置任务实现任务8设计“在线留言”子页面2.1CSS边框2.

CSS边框与背景设置

网页页面中的元素都可以添加边框的效果，可以通过CSS边框属性实现。每一个元素的边框都具备三个特征：边框线粗细、边框线线型、边框线颜色，这三个特征决定了边框所显示出来的外观。

在CSS中是通过以下三个属性来设定边框的三个特征：border-style设置边框样式即边框线线型，例如实线、虚线等；border-width设置边框的宽度即边框线的粗细；border-color设置边框的颜色。1.border-style属性border-style属性用来设置元素的所有边框样式或者单独为某个边框设置边框样式。它是一个复合属性，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），语法格式如下：

border-style:border-top-styleborder-right-styleborder-bottom-styleborder-left-style2.1CSS边框2.

CSS边框与背景设置

网页页面中的元素都可以添加边框的效果，可以通过CSS边框属性实现。每一个元素的边框都具备三个特征：边框线粗细、边框线线型、边框线颜色，这三个特征决定了边框所显示出来的外观。

在CSS中是通过以下三个属性来设定边框的三个特征：border-style设置边框样式即边框线线型，例如实线、虚线等；border-width设置边框的宽度即边框线的粗细；border-color设置边框的颜色。1.border-style属性border-style属性用来设置元素的所有边框样式或者单独为某个边框设置边框样式。它是一个复合属性，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），语法格式如下：

border-style:border-top-styleborder-right-styleborder-bottom-styleborder-left-style2.1CSS边框2.

CSS边框与背景设置

属性的可选值如表所示：border-style属性值及含义值含义none无边框dotted点虚线边框dashed短线状虚线边框solid实线边框double双实线边框，双实线边框的宽度等于border-width的值groove3D凹槽边框，其效果取决于border-color的值ridge3D脊线边框，其效果取决于border-color的值inset3D嵌入边框，其效果取决于border-color的值outset3D凸出边框，其效果取决于border-color的值2.1CSS边框2.

CSS边框与背景设置

2.border-widthborder-width属性用来设置元素所有边框宽度，或者单独设置某个边框宽度。和边框样式一样，属性可以设置一到四个值（用于上边框、右边框、下边框和左边框），语法格式如下：

可以将宽度设置为特定大小（以px、pt、cm、em计），也可以使用以下三个预定义值之一：thin、medium或thick。3.border-colorborder-color属性用来设置元素所有边框颜色，或者单独设置某个边框颜色。语法格式如下：颜色的取值与文本颜色的取值相同。

border-width:border-top-widthborder-right-widthborder-bottom-widthborder-left-width

border-color:border-top-colorborder-right-colorborder-bottom-colorborder-left-color;2.1CSS边框2.

CSS边框与背景设置

4.border属性border属性是边框属性的简写，是一个复合属性。在使用时指定边框的样式、宽度和颜色，其中样式必不可少，否则不能显示边框效果。语法格式如下：

border:border-widthborder-style(必需)border-color;2.1CSS边框2.

CSS边框与背景设置h1{ border-bottom:1pxsolid#f00;}上述例子可以看出p元素四个方向都具有同样效果的边框。带方向的边框属性使用方法与border相似，在CSS中是通过下面四个属性来设设置：border-top、border-right、border-bottom、border-left，分别对应于上、右、上、下、左四个方向的边框。例如下述代码表示一号标题设置了1px、红颜色、线型是实线的下边框。2.2CSS背景2.

CSS边框与背景设置在网页设计中，无论是单一的纯色背景，还是加载的背景图像，都能够给整个页面带来丰富的视觉效果。CSS允许应用颜色作为背景，也可以使用图像作为背景。

1.设置背景颜色在CSS中，background-color属性用来设置元素的背景颜色。一般情况下，元素的背景颜色默认为透明的（transparent）。可以通过background-color属性来改变元素的背景颜色。background-color属性给元素设置一种背景颜色，这种颜色会填充元素的内容、内边距和边框区域，如果边框有透明部分，如双实线边框，则背景颜色会透过这些透明部分显示出背景颜色。可以为任何HTML元素设置背景颜色。语法格式如下：background-color:color|transparent;

其中颜色的取值与文本颜色相同。opacity属性指定元素的不透明度/透明度。取值范围为0.0-1.0。值越低，越透明。注意：使用opacity属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。2.2CSS背景2.

CSS边框与背景设置

其中颜色的取值与文本颜色相同。opacity属性指定元素的不透明度/透明度。取值范围为0.0-1.0。值越低，越透明。

注意：使用opacity属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。2.2CSS背景2.

CSS边框与背景设置background-image:none｜url(url);

2.设置背景图像

（1）background-image

属性在CSS样式中，可以使用background-image属性来设置元素背景图像。语法格式如下：其中，none表示没有背景图像，这是默认值；通过url()表示要设置的背景图像的路径，可以是相对路径，也可以是绝对路径。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并在水平方向和垂直自动重复平铺。可以通过相关属性改变初始位置、是否重复平铺等效果。

2.2CSS背景2.

CSS边框与背景设置从上图可以看出背景图像自动沿着水平和竖直两个方向平铺，充满整个div容器，并且覆盖了div的背景颜色。说明如果网页中某元素同时具有backgrounde-image属性和background-color属性，那么backgrounde-image属性优先于background-color属性，也就是说背景图像永远覆盖于背景色之上。使用背景图像时要注意使用不会干扰文本的图像。

（2）background-repeat属性默认情况下，当背景图像的大小小于元素区域时，背景图像会自动向水平和竖直两个方向平铺。如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。background-repeat属性用来设置元素的背景图像是否以及如何重复铺排。语法格式如下：background-repeat:repeat｜no-repeat｜repeat-x｜repeat-y;2.2CSS背景2.

CSS边框与背景设置属性值的含义如表7-4所示：表7-4background-repeat属性值及含义值含义repeat默认值。背景图在水平方向和垂直自动重复平铺no-repeat背景图在水平方向和垂直方向都不重复平铺repeat-x背景图在水平方向重复平铺repeat-y背景图在垂直方向重复平铺2.2CSS背景2.

CSS边框与背景设置从上图可以看出背景图像只沿着水平方向平铺，背景图像覆盖的区域就显示背景图像，背景图像没有覆盖的区域按照设置的背景颜色显示。可见当背景图像和背景颜色同时存在时，背景图像优先显示。

（3）background-position属性background-position属性用于指定背景图像的起始位置，背景图像如果要重复平铺，将从设置的这个位置点开始。语法格式如下：background-position:位置取值;它的属性值设置出具体的位置，具体的属性值如表所示：2.2CSS背景2.

CSS边框与背景设置background-position属性值及含义值含义预定义的关键字toplefttopcentertoprightcenterleftcentercentercenterrightbottomleftbottomcenterbottomright可以只设置一个关键词，此时第二个值自动为“center”长度值（xy）第一个值是水平位置，第二个值是垂直位置百分比(x%y%)第一个值是水平位置，第二个值是垂直位置2.2CSS背景2.

CSS边框与背景设置

1）预定义的关键字

简单记忆如下：水平方向有left(左)｜right(右)｜center(中)；垂直方向有top(上)｜bottom(下)｜center(中)。设置时是水平方向和垂直方向的组合，且水平方向和垂直方向的关键字不分先后顺序，搭配使用。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。

2）长度长度参数可以对背景图像的位置进行精确的控制，使用确切的数字表示图像位置。使用时首先指定横向位置，接着纵向位置，中间用空格隔开。实际上定位的是图像左上角相对于元素左上角的定位。单位是像素或任何其他的CSS单位。使用时可以只写一个值，另一个值自动为居中效果。还可以和关键字混合使用。

2.2CSS背景2.

CSS边框与背景设置

3）百分比使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比位置对齐。也就是说百分比定位改变了背景图像和元素的对齐基点，不再像使用关键字或长度单位定位时，使用背景图像和元素的左上角为对齐基点。按背景图像和元素的指定点对齐，即将图像本身(x%y%)的点与元素的(x%y%)的点重合，此时左上角是(0%0%)。右下角是(100%100%)。2.2CSS背景2.

CSS边框与背景设置

（4）background-attachment属性background-attachment属性用来设置背景图像是否固定或者随着页面的其余部分滚动而滚动。语法格式如下：background-attachment:scroll|fixed;属性值的含义如表所示：background-attachment属性值及含义值含义scroll默认值。背景图像会随着页面其余部分的滚动而移动fixed当页面的其余部分滚动时，背景图像不会移动2.2CSS背景2.

CSS边框与背景设置

3.复合属性background属性是背景的复合