第3章 使用CSS设置图片样式 CSS+DIV网页样式与布局从入门到精通课件

教育创造学生价值
1.2 div与span的区别
Neusoft Institute of Information
• 区别： • <div>是一个块级（block-level）元素，它包围的元素会自动换行。 • <span>是一个行内（inline ）元素，在它的前后不会换行。 • 此外，<span>标记可以包含于<div>标记中，成为它的子元素。反过
• 一个盒子模型由content（内容）、border（边框）、padding（内 边距）、margin（外边距）这4个部分组成。
height
margin-right border-right padding-right
padding-left border-left marginr-top padding-top
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
span 1
margin-right
margin-left
span 2
教育创造学生价值
• 实例：14-5.html
• 在设置4个方向的padding时也可以简写。 • 实例：14-6.html
教育创造学生价值
2.5 margin
Neusoft Institute of Information
• margin是指元素与元素之间的距离。同样在实例14-4的基础上，加 入margin-bottom的语句，实现如下效果。
• <div>（division）是一个区块容器标记，即<div>与</div>之间相 当于一个容器，可以容纳各种HTML元素。可以把<div>与</div>之 间的内容视为独立的对象，只要对<div>进行控制，其中的各标记元 素都会因此而改变。

主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时）
5.1列表样式设置基础164
5。1.1设置列表项符号164
5.1。2定义项目的图片符号166
5.1.3列表的横竖转换167
5。2案例实战169
5.2.1设计新闻栏目169
5。2。2设计导航菜单173
5.2.3设计多级菜单177
5。2.4列表排版的应用182
设计高效的表格
教学课题
第7章使用CSS设计表单样式
□标准班
□合班
教学目的
认识表单样式
重点难点
掌握定义字体样式、边框样式、背景样式
教学方法
机房演示教学，上机实践操作
主要教学过程
机房演示教学，上机实践操作
教学手段
教学过程
设计
（4学时)
7。1表单样式设置基础212
7.1.1表单基本结构212
7。1。2设置基本样式216
教学手段
教学过程
设计
（4学时）
6。1表格样式设置基础193
6.1。1设置表格颜色193
6.1.2设置表格边框194
6。2案例实战196
6。2.1美化表格197
6.2。2设计高效的表格200
6.2。3让表格更易用204
6.2。4表格布局207
机
房
操
作
课堂小结
（3分钟）
小结表格在CSS中如何运用
思考题、作业及其预习要求（2分钟）
10。3。2嵌套层叠顺序349
10。3.3CSS层叠框351
10.3。4CSS层叠常见问题354
10.4案例实战357
10。4。1画册式网页布局357

9
2021/3/26
DIV+CSS布局 ppt课件
10
DIV+CSS布局
• 属性名称必须小写 • 属性值必须加引号 • 属性不能简写 • 用 Id 属性代替 name 属性
2021/3/26
DIV+CSS布局 ppt课件
11
DIV+CSS布局
• DOCTYPE • Head • Body
2021/3/26
18
DIV+CSS布局
• 间隙属性,用来设置元素内容到元素边界的 距离。
• 注意： padding用在容器内部，margin指容 器外部，就像墙上挂着的两个相框，margin 指的是相框与相框的距离，padding指的是 每个相框里照片与相框边框的距离。
2021/3/26
DIV+CSS布局 ppt课件
块距离）；
– margin right ：距右元素块距离（设置距右元素块距） ； – margin bottom ：底元素块距离（设置距低（下）元素
块距）。
margin:5px 6px 7px 8px;各参数分别指代Top、Right、 Bottom和Left
2021/3/26
DIV+CSS布局 ppt课件
• CSS:Cascading style Sheets，采用CSS技术， 可以有效地对页面的布局、字体、颜色、 背景和其它效果实现更加精确的控制。
2021/3/26
DIV+CSS布局 ppt课件
2
DIV+CSS布局
1.大大缩减页面代码，提高页面浏览速度,缩 减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生 优化了seo

2 博客页面
学习如何使用CSS样式使博客页面更具吸引力和易读性。
3 电子商务网站
了解如何利用CSS样式创建吸引顾客的电子商务网站。
常见错误和解决方法
选择器错误
分析常见的选择器错误，并提供解决这些错误的最佳方法。
层叠样式表冲突
解决层叠样式表冲突问题，确保样式正确应用到网页元素上。
性能优化
探索如何通过优化CSS样式以提高页面加载速度和响应性能。
学习如何使用选择器对网页 元素进行定位和样式设置。
盒模型
了解盒模型的概念和组成， 掌握如何调整元素的尺寸和 边距。
布局
学习如何使用CSS进行基本的 页面布局，包括浮动、定位 和弹性布局。
常用的CSS样式属性
字体样式
探索各种字体样式属性，如字体 大小、字体颜色和字体加粗。
背景图像
动画效果
学习如何在网页中添加背景图像， 以及如何进行背景图像的设置和 调整。
总结和要点
了解CSS样式的基础 知识
打下牢固的基础，理解选择器、 盒模型和布局的重要性。
掌握常用的CSS样式 属性
学习字体样式、背景图像和动 画效果等常用属性的使用。
遵循最佳实践和设计 原则
保持一致性、可读性和响应式 设计，提升网页的质量和用户 体验。
《网页图文CSS样式》PPT 课件
欢迎来到《网页图文CSS样式》PPT课件！在这个课程中，我们将介绍网页图 文CSS样式的基础知识、常用属性、最佳实践和设计原则，并通过案例分析展 示其应用。同时，我们还将解析常见错误和提供解决方法。一起来探索这个 引人入胜的主题吧！
网页图文CSS样式的基础知识
选择器
了解如何使用CSS属性创建简单 而引人注目的动画效果。

当有多种位置不同的样式时，如果规定的样式 没有冲突，则叠加；如果有冲突，则最先考虑 行内样式表显示，如果没有，再考虑内嵌样式 显示，如果还没有，最后采用外部样式表显示， 否则就按HTML的默认样式显示；
当有多种选择器样式时，先使用html选择器样 式，再使用类选择器样式，再使用ID选择器样 式，再使用style属性样式。
p:first-letter{font-size:26px; color:#FF0066;}
p:first-line{font-size:26px; color:#FF0066;}
16
3.6 常用的样式属性及值（续）
鼠标的样式Cursor: auto :默认值。浏览器根据当前情况自动确定鼠标 光标类型。 default :客户端系统的默认光标。通常是一个箭头。 hand :竖起一只手指的手形光标。就像通常用户将 光标移到超链接上时那样。 pointer :和 hand 一样。竖起一只手指的手形光标。 就像通常用户将光标移到超链接上时那样。 col-resize :有左右两个箭头，中间由竖线分隔开的 光标。用于标示项目或标题栏可以被水平改变尺寸。 all-scroll :有上下左右四个箭头，中间有一个圆点 的光标。用于标示页面可以向上下左右任何方向滚 动。
重用样式表，不同的HTML文件可以使用同一个CSS样 式文件
可以降低网站的流量费用，不同的HTML文件使用同一 个CSS样式文件，只需下载一次CSS样式文件就可；
由于样式的重用及下载流量的减少可以使页面载入更快； CSS使站点可以更好地被搜索引擎找到； 不同的HTML文件可以使用同一个CSS样式文件，要想
20
3.6 常用的样式属性及值（续）
滚动条
scrollbar-3dlight-color :设置或检索滚动条亮边框颜 色。

3.4.4 应用CSS样式
① 选择需要应用CSS样式的文本，在CSS面板中，右击样式名称， 在弹出的列表中选择“编辑”命令，或CSS样式属性的目标规则 列表中选择所需的样式名称，可对已创建的CSS样式进行修改。
第三章 网页图文
11
实训项目
1. 将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文 本设置。
第三章 网页图文
7
3.4 用CSS样式设置文本格式
3.4.2 新建CSS样式
① 单击面板右下侧的“新建CSS规则”按钮，打开“新建CSS规 则”对话框。
② 选择“类 ” 样式，并为新建的CSS样式命名，如下图所示。
提示：样式名称不能使用中文，且不能包含空格符。
第三章 网页图文
8
3.4 用CSS样式设置文本格式
2. 在网页插入两张图片，并根据效果图对“图像属性”进行相关设置。 3. 选择一音频文件制作网页背景音乐。
第三章 网页图文
网页设计与制作
第三章 网页图文
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
④ 选择动画文件，然后在【属性】面板中设置Wmode选项为” 透明“，可将Flash背景透明化，预览后效果如图所示。
第三章 网页图文
Байду номын сангаас 3.4 用CSS样式设置文本格式
在制作网页过程中，每页都会用到文字、图像以及表 格、表单等元素。对于这些元素，如果没有CSS样式 控制，是无法使页面美观的。各浏览器之间不兼容， 也会导致同一个网页在不同的浏览器中显示效果不同， 而应用CSS样式则恰到好处地解决了这个问题。
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画

• 在【CSS样式】面板的底部排列有几 个按钮，分别如下。
• 【附加样式表】：在HTML文档中链接 一个外部CSS文件。
• 【新建CSS样式】：创建新的CSS样式 文件。
• 【编辑样式表】：编辑原有的CSS规则。
• 【删除CSS样式】：删除选中已有的 CSS规则
第4页/共18页
8.1.3 创建新的CSS样式 • 在Dreamweaver中，可以创建自己的CSS样式来自动格式化HTML标签
第10页/共18页
8.2.2 设置CSS样式的背景 • 在【分类】列表框中选择【背景】选项，背景属性的功能主要是在网页的
元素后面加入固定的背景颜色或图像。 • 在CSS【背景】选项中可以进行如下设置。
• 【背景颜色】：设置元素的背景颜色。 • 【背景图像】：设置元素的背景图像。 • 【重复】：确定是否以及如何重复背景图像，包含四个选项。【不重复】表示在元
素开始处显示一次图像；【重复】表示在元素的后面水平和垂直平铺图像；【横向 重复】和【纵向重复】分别表示显示图像的水平带区和垂直带区，图像被剪辑以适 合元素的边界。 • 【附件】：设置背景图像是固定在它的原始位置还是随内容一起滚动。 • 【水平位置】和【垂直位置】：指定背景图像相对于元素的初始位置，这可以用于 将背景图像与页面中心垂直和水平对齐，如果附件属性为【固定】，则位置相对于 【文档】窗口而不是元素。
• 2. 链接外部样式表 • 外部样式表是包含了样式格式信息的一个单独的文件，编辑外部CSS样式表时，链接到
该CSS样式表的所有文档会全部更新以反映所做的样式编辑，链接外部样式表的具体操 作步骤如下。
• (1) 在【CSS样式】面板中单击【附加样式表】按钮，弹出【链接外部样式表】对话框。 • (2) 单击对话框中的【文件URL】文本框后面的【浏览】按钮，弹出【选择样式表文件】对

上机练习
在网页中进行DIV样式和设置的练习。在练习过程中，运用 课堂讲解的创建DIV方法、DIV格式设置、层的选择、移动、对 齐和属性设置，及综合应用等知识，进行综合练习。
感谢下 载
感谢下 载
2.1层面板操作：对齐
在网页制作中常常需要将某些层按照一定的规定对齐。 在进行层的对齐操作时，嵌套层中所有子层并不参与层的对 齐操作，它们只随父层的移动而移动，并始终与父层保持相 对的固定位置。
注：是将层中的元素内容进行对齐设置，而非对层本身 进行对齐。
2.2层属性设置
选中层，在“属性”面板中进行相关设置。
2.3DIV和Table的相互转换：层->Table
（1）用层进行布局设置（如附件3所示） （2）选中层（多个） (3)【修改】->【转换】->【层到Table】
3、应用实例
实际案例:飘移的图片
3.1、DIV层设置
（1）创建可见层； （2）层中插入图片或文字；
3.2、时间轴设置
（1）打开时间轴面板：【窗口】->【时间轴】； （2）选中DIV层； （3）将层拖放到时间轴：【修改】->【时间轴】->添加对象 到时间轴；
技术要求高、开发周期长、后期维护不便 简单、易用、维护方便
1.3 创建DIV标签
操作：插入->布局对象->DIV标签
1.3 创建DIV标签
层是DIV标签的特殊形式。<div id="Layer2"></div> 操作：插入->布局对象->层
1.4层视图的基本组成
选择柄

DIV元素（块区间)
调整柄
2.3DIV和Table的相互转换：层->Table

6.编写基本CSS代码
如何使页面居中？
将代码保存后可以看到，整个页面是居中显示的， 那么究竟是什么原因使得页面居中显示呢？ 是因为我们在#container中使用了以下属性：
margin:0 auto;
按照前面的说明，可以知道，表示上下边距为0， 左右为自动，因此该层就会自动居中了。 如果要让页面居左，则取消掉auto值就可以了， 因为默认就是居左显示的。 通过margin:auto我们就可以轻易地使层自动居中 了。
7.编写各部份详细的CSS代码
当我们写好了页面大致的DIV结构后，我们就 可以开始细致地对每一个部分进行制作了。
/*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} a:link,a:visited {font-size:12px;text-decoration:none;} a:hover{}
代码
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

3.2 在HTML中使用CSS
在HTML中使用CSS样式表，主要分为三种方式： 内嵌样式（Inline Style） 内部样式表（Internal Style Sheet） 外部样式表（External Style Sheet）
1. 内嵌样式

在<body>内部使用<style>定义CSS 代码
构造CSS规则
CSS的作用就是设置网页的各个组成部分的表现 形式。 因此，如果把上面的表格换成描述网页上一个标 题的属性表，可以设想应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }

构造CSS规则

再进一步，如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; }
4. 使用import指令引入外部CSS文件
使用import指令引入外部CSS文件
<style type="text/css"> import "mycss.css"; </style>
5. 样式表的优先级顺序


当同一个 HTML 元素被不止一个样式定义时，会使用哪个 样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的 虚拟样式表中，它们的优先顺序如下：
在例3-1的HTML文件中加入CSS代码（welcome_css.htm）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/2019/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!– h1 {font-style:italic;color:red;display:inline; } --> </style> </head> <body> <h1>欢迎你到西安来！</h1> <h3 style="color:black;font-weight:200"> 欢迎你常到西安来！！ </h3> </body> </html>

详细描述
在固定布局中，网页的宽度和高度被设置为固定的像素值，浏览器窗口的大小变化不会影响网页的布 局。这种布局方式适用于设计一些需要保持固定尺寸和比例的网页，例如宣传网站、个人网站等。
流式布局
总结词
流式布局是指网页的宽度根据浏览器窗口的大小自动调整，高度则保持固定或自动调整 。
详细描述
流式布局中，网页的宽度会随着浏览器窗口的大小变化而变化，而高度则保持固定或自 动调整。这种布局方式适用于设计一些需要随着浏览器窗口大小变化的网页，例如博客
内容与边框之间的空间。
外边距
盒子与其他元素之间的空间。
05
04
边框
围绕内容和内边距的线。
定位
静态定位
默认定位方式，不可通过top、right、bottom、left属 性进行改变。
相对定位
元素相对于其正常位置进行定位，top、right、bottom 、left属性会使元素相对于其原始位置“偏移”。
CSS3变形与动画
CSS3 Transform
Transform属性可以对元素进行 旋转、缩放、倾斜和平移等操作 ，使元素在网页上呈现更加动态 和有趣的效果。
CSS3 Animation
Animation属性可以实现元素的 动画效果，包括关键帧动画、过 渡动画和渐变动画等，使网页更 加生动和吸引人。
Flexbox布局是一种灵活的布局方 式，可以轻松实现元素的对齐、 排序和分布，适用于各种屏幕尺 寸和设备。
CSS3 Grid
Grid布局是一种二维的布局系统 ，可以创建复杂的网页布局，包 括行和列，适用于构建复杂的网 页布局。
CSS3 响应式布局
响应式布局可以根据不同的屏幕 尺寸和设备类型自动调整网页布 局，使网页在不同设备上都能得 到良好的显示效果。