DIVCSS课件指南
合集下载
CSSDIV页面布局PPT课件
教育创造学生价值
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>进行控制，其中的各标记元 素都会因此而改变。
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>进行控制，其中的各标记元 素都会因此而改变。
第7章 第2节 DIV+CSS布局网页 课件
7.12
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
We编程开发基础(DIV+CSS)PPT教学课件
2020/12/10
6
2020/12/10
7
布局中的主要样式
font line-height color margin padding border text-align background
• width: • height • float: • clear • display
是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值 都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负值边 际。如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给
出一个值，它被应用于所有边界。如果两个或三个值给出了，省略了的值与对 边相等。注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界 值。而水平方向则不会。也可以选择使用上边界margin-top、下边界marginbottom、左边界margin-left和右边界margin-right属性分别设置与上级元素的 外边距。
格定位方式的区别。因为现在的网站设计标准中，已经不 再使用表格定位技术，而是采用DIV+CSS的方式实现各种 定位。通过使用div盒子模型结构将各部分内容划分到不 同的区块，然后用css来定义盒子模型的位置、大小、边 框、内外边距、排列方式等。简单地说，div用于搭建网 站结构（框架）、css用于创建网站表现（样式/美化）。 该标准简化了HTML页面代码，获得一个较优秀的网站结 构，有利于日后网站维护、协同工作和便于搜索引擎抓取。 当然并不是所有的网页都需要用div布局，例如数据页面、 报表之类的页面，还是使用HTML的表格会比较方便， web标准里并没有说要抛弃table。
Web编程开发基础 (DIV+CSS)
2020/1Βιβλιοθήκη /101课程内容DIV+CSS标准化布局的优势 “无意义”的元素div和span 盒子模型 布局中的主要样式 使用区块框设计页面布局
div+css课件-第1章web标准与css布局概述
* 帮助你的整个站点保持视觉的一致性 * 让你的站点可以更好地被搜索引擎找到 * 使你的站点对浏览者和浏览器更具亲和力 * 在世界上越来越多人采用 Web 标准时，它还能 提 高你的职场竞争实力 (事实上也就是降低失业的风险)。
xHTML+CSS网页制作和搜索引擎优化SEO的关系 xHTML+CSS与SEO的内容，后面章节会详细给大 家介绍，这里就先说一些，让大家对xHTML+CSS 与SEO有一定的认识，为后面制作页面打基础，毕 竟我们做出来的页面还是要给搜索引擎看的，所以 不能不提提xHTML+CSS与SEO的关系
Div+css
第一章:
web标准与css布局概述
本章目标
1. 相关专业术语 2. 了解DIV+CSS技术的现状及市场需求
本章重难点
重点 专业术语的理解 Dreaweaver CS5界面
相关专业术语• • • • Nhomakorabea• Web W3c标准 搜索引擎 Css Div+css的叫法
相关就业
对比一下Table布局页面和DIV布局页面的优缺点 使用表格进行页面布局会带来很多问题： * 把格式数据混入你的内容中。这使得文件的大小无谓地变大 ，而用户访问每个页面时都必须下载一次这样的格式信息,带宽并 非免费。 * 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。 * 这还使我们保持整个站点的视觉的一致性极难，花费也极高 。 * 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏 览者的亲和力。 而使用CSS进行网页布局，它会： * 使你的页面载入得更快 * 降低你的流量费用 • 让你在修改设计时更有效率而代价更低
DIV+CSS布局 ppt课件
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
DIV+CSS ppt课件
• 类选择器的定义格式为： html标签名
{ …样式规则;
}
CLASS 类选择器
<HEAD> <STYLE type="text/css"> .myinput {
border: 1px solid; border-color:#D4BFFF; color:#2A00FF; } </STYLE> </HEAD> <BODY> <FORM > <INPUT name="textfield" type="text" class="myinput"></P> <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P>
<style type="text/css">
</style>
</head> 2）直接写在标签内<body>
<p style=“color:#FF00FF; font-family:隶书; font-
weight:bold; font-size:24px"> </body> • 外部连接套用 如：<link rel=“stylesheet” type=“text/css” href=“样式表文件.css">
DIV的概念
• DIV 全称 division 意为“区分”使用 DIV 的方法跟使用 其他 tag 的方法一样。
div+css布局教程 ppt课件
例子：body { font-family: Verdana, sans-serif; } 根据上面这条规则，站点的 body 元素将使用 Verdana 字体 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这 些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）
但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择 ，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义 命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于 制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命 名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考 虑中，
div+css布局教程
二、网页布局常用属性
其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值
div+css布局教程
几点值得注意的地组的选择器就可以分享相同的声明。用 逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）
书写方式为： @import url(color.css); @imporp url(type.css);
引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的 效果.
div+css布局教程
2、关于ID和Class命名的规范 总体思想：语义化的命名
div+css布局教程
个人推荐在开发过程中逐渐形成自己的命名规范， 如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-” 如site-nav/quick-menu/secondaryContent/。
但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择 ，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义 命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于 制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命 名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考 虑中，
div+css布局教程
二、网页布局常用属性
其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值
div+css布局教程
几点值得注意的地组的选择器就可以分享相同的声明。用 逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）
书写方式为： @import url(color.css); @imporp url(type.css);
引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的 效果.
div+css布局教程
2、关于ID和Class命名的规范 总体思想：语义化的命名
div+css布局教程
个人推荐在开发过程中逐渐形成自己的命名规范， 如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-” 如site-nav/quick-menu/secondaryContent/。
div+Css课前基础知识普及-课件
使用CSS控制页面
行内样式 内嵌式 链接式 导入样式
<html> <head> <title>行内样式</title> </head> <body>
<h2 style=“font-size:16px;color:#000ffd;textdecoration:underline;”> CSS标记1</h2> <p style=“font-size:12px;color:red;text-decoration:underline;”> CSS标记的正文内容1</p> <h2>CSS标记2</h2> <p>CSS标记的正文内容2</p> </body> </html>
/* 集体声明 */ /* 文字颜色 */ /* 字体大小 */
/* 集体声明 */ /* 下划线 */
<body> <h1>集体声明h1</h1> <h2 class="special">集体声明h2</h2> <h3>集体声明h3</h3> <h4>集体声明h4</h4> <h5>集体声明h5</h5> <p>集体声明p1</p> <p class="special">集体声明p2</p> <p id="one">集体声明p3</p>
Div+Css 课前基础知识普及
css概念 如何使用css控制页面 Css基本语法
CSS+Div布局 ppt课件
2021/3/26 CSS+Div布局 ppt课件
34
8.4 “左中右”布局
8.4.1 课堂案例-连锁餐厅 8.4.2 使用CSS样式布局
2021/3/26 CSS+Div布局 ppt课件
35
8.4.1课堂案例-连锁餐厅
案例学习目标：学习“左中右”布局的方法。
2021/3/26 CSS+Div布局 ppt课件
17
8.2.3 浮动方式
无浮动
2021/3/26 CSS+Div布局 ppt课件
18
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
2021/3/26 CSS+Div布局 ppt课件
27
8.3.1课堂案例-网页设计大赛
案例学习目标：学习“上中下”布局的方法。
案例知识要点：在【插入】面板【HTML】选 项卡中，使用【Div】按钮 创建网页布局结构； 在【CSS设计器】面板中，使用【添加选择器】 按钮 创建<div>标签的ID样式，并采用缺省的 【position】和【float】属性，完成“上中下” 的布局。
16822position定位属性absolute绝对定位方式网页元素丌再遵循html的标准定位规则脱离了前后相继的定位关系以该元素的上级元素为基准设置偏移量迚行定位
第8章 CSS+Div布局
Dreamweaver CC 标准教程
2021/3/26 CSS+Div布局 ppt课件
1
本章学习的主要内容：
DIV CSS布局快速入门.ppt
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}
div+css第一讲
1.1.3 CSS的基本思想 的基本思想
基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： ① 高效率的开发与简单维护； ② 信息跨平台的可用性； ③ 降低服务器成本，加快网页解析速度； ④ 更良好的用户体验； 那么，CSS 从真正意义实现了设计代码与内容分离 从真正意义实现了设计代码与内容分离。 那么，CSS2.0从真正意义实现了设计代码与内容分离。
1.1.3 CSS的基本思想 的基本思想
传统Table（表格）布局方式只是利用了HTML的table元素 所具有的零边框 零边框特性。 零边框 因此，Table（表格）布局的核心是： 设计一个能满足版式要求的表格结构，将内容装入每个单 元格中，间距及空格使用透明gif图片实现 最终的结构 间距及空格使用透明gif图片实现，最终的结构 间距及空格使用透明gif图片实现 是一个复杂的表格（有时候会出现多次嵌套）， ），显然，这 是一个复杂的表格（有时候会出现多次嵌套）， 样不利于设计和修改。
1.1.2 XHTML与HTML的重要区别 与 的重要区别
4.在XHTML中标记必须封闭； <i>this is bold and italic<br> 错误 <i>this is bold and italic</i><br/> 正确 5.在XHTML中空元素的标记也必须封闭； <hr> 、 <br> 、<img>错误 <hr/> 、 <br/> 、<img/>正确 6.在XHTML中属性值必须用英文双引号括起来； <table width=100%> 错误 <table width=“100%”> 正确
DIV+CSS讲义一
.blue{
color:blue;
}
.big{
font-size:22px;
}
可以对同一个元素同时使用这两个类别。
<body>
<h4 class=”blue big”>两种class，同时使用blue和big。</h4>
</body>
3.ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次。
第一讲DIV+CSS教学（一）
课次
1
授课学期
授课班级
授课地点
授课时间
2010-2011-2
10341、2
8517ቤተ መጻሕፍቲ ባይዱ504
3-2、5-2
课程目标
备注
课程导语
授课素材
使用案例
拟留讨论
第一讲CSS样式入门
1.1 CSS的基本概念
CSS是Cascading Style Sheets的简称，即层叠样式表。
CSS的样式规则如下：
1.行内样式
<html>
<head>
<title>my title</tiitle>
</head>
<body>
<p style=”color:#ff0000;font-size:20px;text-decoration:underlin;”>
正文内容1</p>
<p style=”color:#ff00ff;font-size:25px;font-weight:bold;”>
正文内容2</p>
color:blue;
}
.big{
font-size:22px;
}
可以对同一个元素同时使用这两个类别。
<body>
<h4 class=”blue big”>两种class，同时使用blue和big。</h4>
</body>
3.ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次。
第一讲DIV+CSS教学（一）
课次
1
授课学期
授课班级
授课地点
授课时间
2010-2011-2
10341、2
8517ቤተ መጻሕፍቲ ባይዱ504
3-2、5-2
课程目标
备注
课程导语
授课素材
使用案例
拟留讨论
第一讲CSS样式入门
1.1 CSS的基本概念
CSS是Cascading Style Sheets的简称，即层叠样式表。
CSS的样式规则如下：
1.行内样式
<html>
<head>
<title>my title</tiitle>
</head>
<body>
<p style=”color:#ff0000;font-size:20px;text-decoration:underlin;”>
正文内容1</p>
<p style=”color:#ff00ff;font-size:25px;font-weight:bold;”>
正文内容2</p>
div+css课件
5.2 背景图片
5.2.1 页面的背景图 (5-3.html) 5.2.2 背景图片的重复 (5-5.html) 5.2.3 背景图片的位置 (5-8.html) 5.2.4 固定背景图片 (5-10.html)
5.3 古词《念奴娇·赤壁怀古》
5-13.html
第六章 CSS设置表格和表单样式
10.3 元素的定位
10.3.1 float定位 （10-14.html） 10.3.2 position定位 （10-20.html） 10.3.3 z-index （10-28.html）
10.4 给图片签名
10-29.html
第十一章 CSS排版
11.1 CSS排版观念 11.2 固定宽度且居中的版式 11.3 排版实例：电子相册
11.3 排版实例：电子相册
11-6.html
2.1.1 标记选择器 2.1.2 类别选择器 2.1.3 ID选择器
2.1.1 标记选择器
2.1.2 类别选择器
2.1.3 ID选择器
2.2 选择器的声明
2.3 CSS的继承
第三章 CSS文字效果
3.1 CSS文字样式 3.2 文字实例：模拟Goolge公司logo 3.3 CSS段落文字 3.4 段落实例：搜索8.2 无需表格的菜单
8-5.html
8.3 菜单的横竖转换
8-6.html
8.4 流行的Tab菜单
8-9_home.html
第九章 CSS滤镜的使用
9.1 滤镜概述 9.2-9.7 滤镜实例
9.1 滤镜概述
CSS滤镜并不是浏览器的插件，也不符合CSS 标准，而是微软公司为增强浏览器功能而特意 开发的并整合在IE浏览器中的一类功能的集合。 CSS滤镜的标识符是“filter”。 filter:filtername(parameters);
相关主题