工信版（中职）Web前端设计基础 项目九电子课件
2022-10-25
|
64页
|
108人阅读
|
0人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 2.72 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574052.html |
| 价格 | 1.50储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目九电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3修饰表格表单
项目九
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
一 项目描述
本项目学习要点
使用CSS设置边框圆角效果；
使用CSS美化表格表单。
使用CSS美化背景；
使用CSS美化边框；
二 知识准备
使用CSS美化背景；
使用CSS修饰表格。
使用CSS美化边框；
使用CSS设置圆角边框；
使用CSS设置图片边框；
使用CSS设置边框阴影；
使用CSS美化背景
1．设置背景颜色
在CSS 3中，设置背景颜色的属性是background-color，格式如下：
{ background-color:transparent | color;}
transparent是默认值，表示透明。color表示颜色，其设置方法有很多种：英文单词、十六进制、RGB、HSL、HSLA、GRBA，设置方法已经在前面介绍过。
使用CSS美化背景
1．设置背景颜色
【例9-1】为网页以及段落设置背景颜色实例，代码如下所示（示例文件9-1.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS设置背景颜色</title>
<style>
body{
background-color: CadetBlue;
}
p{
background-color:rgb(154,205,50);
color:#ffffff;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<P>风高秋月白，雨霁晚霞红</P>
</body>
</html>
设置的整个网页的背景颜色为军校蓝色，标签选择器为“body”，用于声明整个网页。
设置段落p的样式：设置背景色，这里使用的是RGB表示颜色的方法；第12行设置文字颜色为白色，这里用16进制数表示的颜色的方法；第13行设置行高为30像素；第14行设置了文字对齐方式为水平居中。
在chrome浏览器中预览
使用CSS美化背景
2．设置背景图片
在CSS 3中，设置背景图片的属性是background-image，与背景颜色相同，背景图片既可以对整个网页进行设置，也可以对某些HTML元素进行设置，除此之外，还可以通过CSS样式对图片的排列方式等进行控制。格式如下：
{background-image:none | url(url);}
默认值为none（无背景图），需要背景图时则要用url进行导入，url可以应用相对地址，也可以用绝对地址。
使用CSS美化背景
2．设置背景图片
如果图片因为某些原因不能正常显示，则将以背景颜色替代。如果图片太小不能铺满全屏，则会重复出现直至铺满。但是这种方式往往不适用于大多数情况，所以需要使用下面这些属性：
{background-repeat:repeat | repeat-x | repeat-y | no-reapeat}
⑴background-repeat
用于设置图片的重复方式，格式如下：
使用CSS美化背景
2．设置背景图片
⑴background-repeat
各属性值和说明如表所示。
属性值 说明
repeat 背景图片水平方向和垂直方向都平铺
repeat-x 背景图片水平方向平铺
repeat-y 背景图片垂直方向平铺
ro-reapeat 背景图片不平铺
重复的背景图片是从元素的左上角开始平铺，直到水平或者垂直方向全部页面都被背景图片覆盖为止。
使用CSS美化背景
2．设置背景图片
⑵background-attachment
设置好背景图片后，如果文字部分较长，则会出现滚动条，当拖动滚动条向下浏览文字的时候，初始可见的背景图片就会看不到了。
要解决这个问题，就要使用background-attachment属性，该属性用来设置背景图片是否随着文档一起滚动，格式如下：
各属性值和说明如表所示。
{background-attachment:scroll | fixed}
属性值 说明
scroll 默认值，当页面滚动时，背景图片随页面一起滚动
fixed 背景图片固定在页面的可见区域里
使用CSS美化背景
2．设置背景图片
⑶background-position
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。