网页设计与制作HTML5+CSS3

任务7

设计“学习动态”子页面

任务本任务通过设计“学习动态”子页面，重点学习图像相关的CSS样式，CSS边框与背景的设置。同时，进一步学习贯彻党的二十大精神知识。网页效果如图7-1所示。任务7设计“学习动态”子页面

任务图7-1任务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样式!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8/title设置图片的缩放/title

1.1设置图像大小1.图像相关的CSS样式title设置图片的缩放/titlestyletype=”text/css”img{width:50%;/*相对宽度50%*/height:50%;/*相对宽度50%*/}/style/headbodyimgsrc=”images/flower.jpg”/body【案例7-1】example7-1.html演示了输入框的样式设置，代码如下：

1.1设置图像大小1.图像相关的CSS样式border-radius:4px;background-color:#ccc;}/style/headbodyformlabelfor=username用户账号：/labelinputtype=textplaceholder=请输入用户账号：brlabelfor=password用户密码：/labelinputtype=passwordplaceholder=请输入用户账号：/form/body/html

1.1设置图像大小1.图像相关的CSS样式【解析】上述代码中将图像的宽度、高度设置为50%，意味着图像的宽度、高度设置为其父元素body宽度、高度的50%，而不是相对于图像的本身。并且可以随着父元素body宽度、高度的变化而变化，形成自适应的效果。如果width和height两个属性的取值为绝对像素值，图像将按照定义的像素值显示大小。

1.2设置图像的对齐方式2.设置图像的对齐方式1.图像的水平对齐方式图像的水平对齐与文本的水平对齐类似，也有左、中、右的效果。只是图像的水平对齐方式不能直接在图像上设置text-align属性来实现，而是通过图像的父元素设置text-align属性来实现。2.图像的垂直对齐方式图像的垂直对齐方式是指图片与文本之间的垂直对齐效果，是通过vertical-align属性设置来设置的。语法格式如下：属性值的含义如表7-1所示：vertical-align:baseline｜sub｜super｜top｜text-top｜middle｜bottom｜text-bottom｜length｜%;

1.2设置图像的对齐方式2.设置图像的对齐方式表7-1vertical-align属性值及含义值含义baseline默认。元素放置在父元素的基线上sub垂直对齐文本的下标super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部bottom使元素及其后代元素的底部与整行的底部对齐text-bottom把元素的底端与父元素字体的底端对齐length将元素升高或降低指定的高度，可以是负数%使用line-height属性的百分比值来排列此元素，允许使用负值

1