《使用HTML5实现响应式布局》第六章-文字特效-实践学习资料.pptx

第六章文字特效

实践目标使用CSS3实现图文混排制作旅游景点介绍页面

任务一：使用CSS3实现图文混排排版页面中的大段文字和图片。针对网页中大量文字和图片，需要编排和设置文本段落的样式以获得整齐美观的效果。设置段落标题（超链接形式）居中显示，段落文本随浏览器宽度自动适应，优化段落文字结构和超链接的显示。设置图片及说明文本的排版效果，使图片及说明文本同宽度显示，优化文本和图片间距、文本行距、字体颜色和超链接效果

创建HTML5文档，使用div、h1、p标签编写页面结构设置段落的标题h1的样式及h1a选择符的超链接样式设置段落的文本p的样式及pa选择符的超链接样式创建.text、.textp、.texta等选择符，设置图片文本及其内部超链接的样式使用CSS3实现图文混排标题居中段落文本随浏览器宽度自动适应图片及说明文本同宽度显示

使用CSS3实现图文混排使用CSS3的文本样式属性实现不同的文本样式效果显示效果样式属性

任务二：制作旅游景点介绍页面使用CSS3制作旅游景点介绍页面，页面要求有良好的排版效果旅游景点的介绍页面通常包含大量的文本，使用CSS3处理大段落文本，制作排版美观的旅游景点介绍页面。要求制作文本的一级标题和二级标题及其样式，编写站点导航链接及其样式，设置文本段落的排版效果

创建HTML5文档，使用div、h1、h2、p标签编写页面结构编写h1、h2样式，其中需要使用margin属性设置h标签四周的边距编写a样式，设置文本右边对齐，及其字体样式等设定文本部分整体的宽度和边距，设置p样式，使每个段落的文本有相同的字体效果制作旅游景点介绍页面

文字及段落的排版使用不同的文本样式实现文字及段落的排版效果。要求：编写h1、h2、h3、p四种样式h1样式的字体为楷体，颜色为#ff0000h2样式为斜体加粗的宋体字h3样式为字号20pt的加粗文本p样式的字体风格为oblique，字体粗细值为100，字体大小值为medium

文字及段落的排版p样式h1样式无样式h2样式h3样式

END