工信版（中职）Web前端设计基础 项目二-2电子课件
2022-10-25
|
21页
|
85人阅读
|
0人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.29 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-07-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574044.html |
| 价格 | 0.50储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目二-2电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
网页中的文本和排版
项目二
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
二 知识准备
添加文本；
文本排版；
文字列表；
添加图片。
文字列表
1.建立有序列表<ol>
有序列表的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束，中间的列表项是<li>标签内容。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序，其结构如下：
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
文字列表
1.建立有序列表<ol>
在默认情况下，有序列表使用数字作为列表项符号，除此之外还可以通过有序列表type属性来改变列表项符号，如表所示。
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……
type属性实现的效果可以用CSS的list-style-type实现，在后面的项目中会学习到。
文本列表
1.建立有序列表<ol>
【例2-3】建立有序列表实例，代码如下所示（示例文件2-3.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
<style>
ol{float:left;width:100px;}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
文本列表
1.建立有序列表<ol>
【例2-3】建立有序列表实例，代码如下所示（示例文件2-3.html）
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
</body>
</html>
在chrome浏览器中预览
文字列表
2.建立无序列表<ul>
无序列表相对于有序列表而言，没有前面的顺序符号，只以符号作为分项标识。无序列表使用一对<ul></ul>标签，其中每一个列表项使用<li></li>标签，结构如下所示：
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
在无序列表结构中，使用<ul></ul>标签作为一个无序列表的开始和结束，<li>则表示一个列表项的开始。在一个无序列表中可以包含多个列表项，并且<li>标签的结束标签可以省略。
文字列表
2.建立无序列表<ul>
默认情况下，无序列表的项目符号是●，还可以通过无序列表type属性来改变无序列表的列表项符号，如表所示。
type属性值 列表项的序号类型
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
文本列表
2.建立无序列表<ul>
【例2-4】建立无序列表实例，代码如下所示（示例文件2-4.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
<style>
ul{float:left;width:100px;}
</style>
</head>
<body>
<ul>
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。