HTML5+CSS3 Web前端设计基础教程(第5章)
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.8
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
5.8 CSS属性的应用
【例5-21】设置图像边框，本例文件5-20.html的显示效果，如图5-25所示。
5.8 CSS属性的应用
3. 图像的不透明度 语法：opacity：value | inherit; 【例5-22】设置图像的透明度，本例文件5-22.html的显示效果，如图5-26所示。
5.8 CSS属性的应用
2. 图文链接 对链接的修饰，还可以利用背景图片将文字链接进一步的美化。 【例5-24】图文链接，本例文件5-24.html，鼠标未悬停时文字链接的效果，如图528（a）所示；鼠标悬停在文字链接上时的效果，如图5-28（b）所示。
5.8 CSS属性的应用
5.8.3 创建导航菜单 1. 纵向导航菜单 【例5-25】制作纵向列表模式的导航菜单，本例文件5-25.html，鼠标未悬停在 菜单项上时的效果，如图5-29（a）所示；鼠标悬停在菜单项上时的效果，如图 5-29（b）所示。
padding:5px 5px 5px 0.5em; text-decoration:none; /*链接无修饰*/ border-left:12px solid #711515; /*左边的粗红边框*/ border-right:1px solid #711515; /*右侧阴影*/ } #nav li a:link, #nav li a:visited{ /*未访问过的链接、访问过的链接的样式*/ background-color:#c11136; /*改变背景色*/ color:#fff; /*改变文字颜色*/ } #nav li a:hover{ /*鼠标悬停于菜单项上时的样式*/ background-color:#990020; /*改变背景色*/ color:#ff0; /*改变文字颜色*/ } 菜单经过进一步美化，显示效果如图5-29所示。
HTML5+CSS3 Web前端设计基础教程PPT-HTML 5页面的构建与简单控制
HTML5+CSS3Web前端设计基础教程Chapter/02HTML 5页面的构建与简单控制【本章导读】本章除了介绍Dreamweaver的基本使用方法以外，还着重介绍HTML 5的文档结构和常见标签等内容。
2.1.1 界面介绍2.1.2 常用工具栏和面板1．工具栏图2-2 工具栏新版Dreamweaver的工具栏在整个操作界面的左侧，如图2-2所示，单击 按钮可以在弹出的“自定义工具栏”对话框中，增加或减少按钮的显示。
2．属性检查器图2-3 属性检查器（选定对象为文本）图2-4 属性检查器（选定对象为图像）3．插入面板图2-5 HTML类别图2-6 表单类别图2-7 Bootstrap类别5．CSS面板6．设置主、次浏览器图2-9 CSS面板 图2-10 设置主、次浏览器2.2.1 创建站点进行网页制作的第一步就是创建本地站点，站点管理会让用户的工作变得简单而富有成效，况且许多功能必须在站点中才能实现。
总之，如果不是仅编辑需要的单个页面，那么就必须创建站点。
图2-12 站点设置对象图2-13 创建“My Site”站点2.2.2 “文件”面板的使用方法1．新建文件夹和文件图2-14 右键菜单图2-15 新建文件夹图2-16 嵌套文件夹2.2.2 “文件”面板的使用方法图2-18 站点内的基本操作图2-19 更新文件2．站点内的基本操作2.2 创建和管理站点2.2.3 管理站点图2-20 “管理站点”对话框2.3.1 使用Dreamweaver构建“H5标准页面”图2-21 结构示意图1．标签的含义图2-22 标签2．元素的含义3．属性和值2.3.2 DOCTYPE文档类型与基本结构元素<!DOCTYPE html><html><head><meta charset="UTF-8"><title>凤凰网</title><meta content="凤凰,凤凰网,凤凰新媒体,凤凰卫视,凤凰卫视中文台,phoenix" name="keywords"/><meta name="description" content="凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资讯、深度访谈、观点评论、财经产品等服务。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
Web前端开发实例教程——HTML5 CSS3 JavaScript 第5章 CSS基础
第5章 CSS基础
5.1 CSS简介
5.1.1 什么是CSS
CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用 于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS能将样式的定义与HTML文件内容分离，只要建立定义样式的CSS文 件，并且让所有的HTML文件都调用这个CSS文件所定义的样式即可。
/*外边距设置为0*/ /*内边距设置为0*/
}
5.3 CSS语法基础
5.3.5 特殊选择符
1．伪类选择符 伪类选择符可看做是一种特殊的类选择符，是能被支持CSS的浏览器自 动识别的特殊选择符。其最大的用处是，可以对链接在不同状态下的内容定义 不同的样式效果。 【例5-4】伪类的应用。
5.3 CSS语法基础
5.6 文档结构
5.6.5 珠宝商城特色礼品页面
【例5-15】制作珠宝商城特色礼品局部页面，本例文件5-15.html在浏览 器中显示的效果如图5-26所示。
习题5
习题5
1．使用伪类相关的知识制作鼠标悬停效果。当鼠标未悬停在链接上时， 显示如图5-27（a）所示，当鼠标悬停在链接上时，显示如图5-27（b）所示。
<style type="text/css"> <!--
选择符1{属性:属性值; 属性:属性值 …} 选择符n{属性:属性值; 属性:属性值 …} --> </style> <标签 style="属性:属性值; 属性:属性值 …">
【例5-7】使用内部样式表将样式表的功能加入到网页，本例文件57.html在浏览器中的显示效果如图5-16所示。
(完整版)《HTML5CSS3网站设计基础教程》教学大纲
.《H TML5+CSS3 网站设计基础教程?课程授课大纲〔课程英文名称〕课程编号： 202101210011学分：5学分学时： 76 学时〔其中：讲课学时：47 学时上机学时： 26 学时〕先修课程：计算机基础、计算机网络、计算机应用后续课程： UI 设计、JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3 网站设计基础教程?是面向计算机相关专业的一门专业基础课，涉及网页基础、 HTML 标记、 CSS样式、网页布局、变形与动画等内容，经过本课程的学习，学生能够认识网页 web 睁开历史及其未来方向，熟悉网页设计流程、掌握网络中常有的网页布局收效及变形和动画收效，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路课程设计理念：高职教育的集中实践授课环节需明确必要的理论知识的生化与知识层面的拓展，不能够限制于单纯的技术训练。
单纯的技术训练不是提高升等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和平生学习的能力，实现一站式授课理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行授课内容设计，以学生为主体，以案例〔工程〕实训为手段，设计除理论学习与技术掌握订交融的课程内容系统。
授课整体设计“以职业技术培养为目标，以案例〔工程〕任务实现为载体、理论学习与时间操作相结合〞。
.三、授课条件要求开发工具： Dreamweaver CS6四、课程的主要内容及根本要求第一章初识 HTML5学习单元初识HTML5学时10 学时1.认识 HTML5 睁开历程2.理解 HTML5 阅读器支持情况学习目标3.熟悉 HTML5 根本语法 ,掌握 HTML5 语法新特点。
4.掌握 HTML5 相关标记及属性，能够制作简单的网页页面。
知识点认识掌握重点难点HTML5 睁开历史√HTML5 的优势√HTML5 阅读器支持情况√创立第一个 HTML5 页面√HTML5 文档根本格式√HTML5 语法√HTML 标记√标记的属性√学习内容HTML5 文档头部相关标√记标题和段落标记√文本格式化标记√特别字符标记√常用图像格式√图像标记 <img/>√绝对路径和相对路径√创立超链接√锚点链接√√第二章HTML5 页面元素及属性学习单元HTML5 页面元素及属性学时 6 学时1.掌握结构元素的使用，能够使页面分区更明确。
html5 css3网页前端开发基础
html5+css3网页前端开发基础2017-11-18目录1.新的文档类型 (2)2.Meta声明 (2)3.脚本和链接无需type (2)4.新的语义标签 (3)5.新的Input类型 (6)6.新的表单元素 (6)7.新的表单属性 (7)8.全局属性 (8)9.视频 (9)10.音频 (10)11.Canvas与SVG (10)12.Web存储 (11)13.CSS3圆角 (12)14.CSS3背景 (12)15.CSS3不透明度 (13)16.CSS3盒子尺寸 (13)17.CSS3文本属性 (15)18.CSS3颜色属性 (16)1.新的文档类型在HTML4.01或XHTML1.0中，你需要像这样声明文档类型：<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01Transitional//EN" "/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">.严格版本、过渡版本、框架集在HTML5中，只有一种声明方式：不需要指定具体版本，表示最新的HTML版本<!DOCTYPE html>.2.Meta声明在HTML4.01中（字符的编码方式）：<meta http-equiv="content-type"content="text/html;charset=UTF-8">在HTML5中：<meta charset="UTF-8">3.脚本和链接无需type在HTML4或XHTML中，你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件。
前端开发：HTML5和CSS3基础教程
前端开发：HTML5和CSS3基础教程简介在现代互联网时代，前端开发成为了一种非常重要的技能。
HTML5和CSS3是构建网页的基础语言，学习它们对于成为一个优秀的前端开发人员至关重要。
本教程将向您详细介绍HTML5和CSS3的基础知识，并帮助您开始构建令人印象深刻的网页。
目录1.HTML5基础2.HTML简介3.HTML标签4.HTML元素与属性5.常用HTML标签示例6.CSS3基础7.CSS简介8.CSS选择器9.CSS样式与布局10.常用CSS样式示例11.创建一个简单网页示例12.设计网页结构（使用HTML）13.样式化网页外观（使用CSS）14.提高前端开发技能的资源推荐第一部分：HTML5基础1. HTML简介HTML（超文本标记语言）是一种用于创建和组织内容的标记语言。
本节将为您解释什么是HTML以及为什么它是前端开发中如此重要的一部分。
2. HTML标签HTML使用标签来定义网页中的不同元素。
本节将介绍一些常用的HTML标签，例如头部标签（<head>）、段落标签（<p>）和图像标签（<img>）等。
3. HTML元素与属性HTML元素是由开始标签、内容和结束标签组成的。
本节将解释如何正确使用HTML元素，并介绍一些常见的HTML属性，如id、class、href等。
4. 常用HTML标签示例本节将提供一些常见的HTML标签示例以及它们在网页中的应用场景。
这包括标题标签（<h1>~<h6>）、链接标签（<a>）、列表标签（<ul>和<ol>）等。
第二部分：CSS3基础1. CSS简介CSS（层叠样式表）是用于控制网页外观和布局的样式语言。
本节将帮助您了解CSS的作用以及为什么它对于前端开发非常重要。
2. CSS选择器CSS选择器允许您选择要样式化的特定HTML元素或一组元素。
本节将介绍一些基础的CSS选择器，例如ID选择器、类选择器和后代选择器等。
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.9
习题5
6. 制作如图5-43所示的导航栏。
习题5
7. 使用CSS实现社区网广告板块的设计，如图5-44所示。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
习题5
1. 制作隔行换色表格，如图5-38所示。
习题5
2. 使用CSS修饰文本域，显示效果如图5-39所示。
习题5
3. 使用CSS修饰常用的表单元素，制作用户调查页面，显示效果如图5-40所示。
习题5
4. 制作网页中不同区域的链接效果，显示的效果如图5-41所示。
习题5
5. 制作如图5-42所示的导航栏。
5.9 实训——制作社区网页面
5.9.1 制作通知公告板块 1. 页面布局规划 页面布局的首要任务是弄清网页的布局方式，分析版式结构，待整体页面搭建有明 确规划后，再根据规划切图。通知公告板块页面的效果如图5-34所示，页面布局示意 图如图5-35所示。
5.9 实训——制作社区网页面
5.9.2 制作导航栏 1. 页面布局规划 导航栏页面的效果如图5-36所示，页面布局示意图如图5-37所示。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第5章 CSS3的属性
5.9 实训——制作社区网页面
本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样 式。
目录
第5章 CSS3的属性 5.1 CSS背景属性 5.2 CSS字体属性 5.3 CSS文本属性 5.4 CSS尺寸属性 5.5 CSS列表属性 5.6 CSS表格属性 5.7 CSS内容属性 5.8 CSS属性的应用 5.9 实训——制作社区网页面 习题5
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间 absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添
加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一
图5-15 “box-1”容器添加z-index样式的预览效果
5.2 CSS 定位
5.2.3 相对于某一容器的绝对定位
本例中通过设置父级容 器相对定位，子级容器 绝对定位，实现了“特 卖图标放置在左上角的 效果”
图5-17 “相1 有关列表的CSS样式
在CSS样式中，主要是通过list-style-image属性、list-style-position属性和liststyle-type属性这3个属性改变列表修饰符的类型。
表5-2 有关列表的CSS样式属性
属性
list-style list-style-image 将图象设置为列表项标志。 list-styleposition list-style-type marker-offset
5.3.3 仿“凤凰网”首页的横向导航
图5-25 仿“凤凰网”首页的横向导航
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
图5-29 包含图文信息列表的板块
图5-30 粗略的板块布局示意图
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
图5-31 “floor-hd”容器示意图
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
说明
复合属性，用于把所有用于列表的属性设置于一个声明中。
设置列表项标记如何根据文本排列。 设置列表项标志的类型。 设置标记容器和主容器之间水平补白。
5.3 列表
5.3.2 仿“天猫”首页的纵向导航
导航的标题 由无序列表盛 放的导航内容 个性化的图标
图5-19 仿“天猫”首页的纵向导航预览效果
5.3 列表
个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、
left、right、bottom和clip。
表5-1 position属性的取值及其含义
取值
static fixed position属性的默认值，无特殊定位
含义
固定，元素框的表现类似于将position设置为absolute，元素被固定在屏幕的某 个位置，不随滚动条滚动
5.2 CSS 定位
5.2.2 相对和绝对定位 1. 相对定位（relative）
图5-12 没有添加相对定位样式的初始预览效果
图5-13 “content”容器添加相对定位样式的预览效果
5.2 CSS 定位
2．绝对定位（absolute） 3．层叠（z-index）
图5-14 “box-1”容器添加绝对定位样式的预览效果
子元素全部脱离文 档流进行浮动，致 使父级容器wrap 没有内容将其撑开
图5-3 “box-2”浮动效果 图5-4 三个容器均向左浮动效果
5.1 浮动与清除浮动
2．浮动时由于容器空间不够造成的错位
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
此处由于div是块 级元素，在初始 状态下，多个div 容器会纵向排列， 并且将父级容器 wrap的高度撑开 box-1脱离文本流 后，向右移动，碰 到父级元素的边框， 便停了下来。 由于box-1移动， box-2便占据box1的位置
图5-1 各容器初始状态 图5-2 “box-1”浮动效果
由于“box-2”不 再处于文档流中， 所以它不占据空 间，实际上覆盖 了“box-3”，致 使“box-3”从视 图中消失
5.1 浮动与清除浮动
5.1.1 浮动（float）
1．向左浮动或向右浮动
“float:left;”即是向左浮动，“float:right;”即是向右浮动。当某个元素具有向左 （右）浮动的属性时，该元素就会生成一个块级框，然后脱离当前文档流向左（右）移动， 直到碰到左（右）边缘。
5.1 浮动与清除浮动
1．方法一：额外增加应用“clear: both;”规则的空容器 在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在 CSS中
赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: hidden;”规则清除浮动 向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添
图5-32 “floor-row1”容器示意图
5.4 仿“天猫电器城（手机馆）”的 图文信息列表
块状化图像
绝对定位
图5-33 “floor-row2”容器示意图
谢谢观看！
工业和信息化“十三五” 高职高专人才培养规划教材
Web前端设计 基础教程
主编 吴丰
HTML5+CSS3
05
浮动、定位与列表
【本章导读】 本章继续向读者介绍，在实际工作中使用频率非常的三类知识，即浮 动、定位与列表。通过本章的学习，读者基本能够达到创建并控制较为复 杂的网页版面。
5.1 浮动与清除浮动