2.2 文字排版基础案例
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
最美乡村医生
——网页文字排版基础实例
案例分析
请分析网页中的文字排版特点
黑体 亮橙色
黑体
宋体 深蓝色
宋体 深蓝色
东莞职业技术学院 计算机工程系
案例分析
网页标签结构分析
h2 ul
无序列表
Байду номын сангаас
h1 p
p
东莞职业技术学院 计算机工程系
案例难点
背景图片的使用 列表标签的设计 列表符号的改变
东莞职业技术学院 计算机工程系
东莞职业技术学院 计算机工程系
相关知识
CSS常用属性
border：边框属性；是边框属性的一个快捷的综合 写法，它包含border-width, border-style和bordercolor 。
border-width:1px;
border-style:solid;
border-color: #C8D699;
相关知识
XHTML常用元素简介
div（division分隔）——表示文档结构块的意思，它可以把文档分
割为多个有意义的区域或模块。因此，我们通常使用div元素实现网 页的总体布局。
ul（unordered list无序列表）和li（item in a list列表项）——
ul和li常结合使用定义无序列表，它们都是块状元素。列表元 素常用于实现需要整齐排列的导航菜单、新闻信息、标题列 表等。
list-style-type:square; list-style-position: inside; list-style-image: url('/i/arrow.gif'); list-style:square inside url('/i/arrow.gif');
东莞职业技术学院 计算机工程系
相关知识
CSS选择符
后代选择符：选取父元素的所有后代元素
#main p：表示选取id=“main”的<div>元素内包 含的所有<p>元素
东莞职业技术学院 计算机工程系
东莞职业技术学院 计算机工程系
相关知识
CSS常用属性
background：背景属性；是设置背景相关属性的一种快捷 的综合写法， 包括background-color, background-image, background-repeat等。
background-color:white; background-image: url(images/bg.jpg) ; background-repeat: repeat-x; background: url(images/bg.jpg) repeat-x;
border: 1px solid #C8D699;
border-top
border-left
单边边框属性
border-right 例如border-top:5px solid #FF0000；
border-bottom
东莞职业技术学院 计算机工程系
相关知识
CSS常用属性
list-style：列表属性，简写属性在一个声明 中设置所有的列表属性。它包含list-styletype、list-style-position、list-style-image。
——网页文字排版基础实例
案例分析
请分析网页中的文字排版特点
黑体 亮橙色
黑体
宋体 深蓝色
宋体 深蓝色
东莞职业技术学院 计算机工程系
案例分析
网页标签结构分析
h2 ul
无序列表
Байду номын сангаас
h1 p
p
东莞职业技术学院 计算机工程系
案例难点
背景图片的使用 列表标签的设计 列表符号的改变
东莞职业技术学院 计算机工程系
东莞职业技术学院 计算机工程系
相关知识
CSS常用属性
border：边框属性；是边框属性的一个快捷的综合 写法，它包含border-width, border-style和bordercolor 。
border-width:1px;
border-style:solid;
border-color: #C8D699;
相关知识
XHTML常用元素简介
div（division分隔）——表示文档结构块的意思，它可以把文档分
割为多个有意义的区域或模块。因此，我们通常使用div元素实现网 页的总体布局。
ul（unordered list无序列表）和li（item in a list列表项）——
ul和li常结合使用定义无序列表，它们都是块状元素。列表元 素常用于实现需要整齐排列的导航菜单、新闻信息、标题列 表等。
list-style-type:square; list-style-position: inside; list-style-image: url('/i/arrow.gif'); list-style:square inside url('/i/arrow.gif');
东莞职业技术学院 计算机工程系
相关知识
CSS选择符
后代选择符：选取父元素的所有后代元素
#main p：表示选取id=“main”的<div>元素内包 含的所有<p>元素
东莞职业技术学院 计算机工程系
东莞职业技术学院 计算机工程系
相关知识
CSS常用属性
background：背景属性；是设置背景相关属性的一种快捷 的综合写法， 包括background-color, background-image, background-repeat等。
background-color:white; background-image: url(images/bg.jpg) ; background-repeat: repeat-x; background: url(images/bg.jpg) repeat-x;
border: 1px solid #C8D699;
border-top
border-left
单边边框属性
border-right 例如border-top:5px solid #FF0000；
border-bottom
东莞职业技术学院 计算机工程系
相关知识
CSS常用属性
list-style：列表属性，简写属性在一个声明 中设置所有的列表属性。它包含list-styletype、list-style-position、list-style-image。