[PPT模板]CSS+DIV_教程
合集下载
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>进行控制，其中的各标记元 素都会因此而改变。
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布局 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)
SPAN 和 DIV 的区别
SPAN 和 DIV 的区别在于，DIV(division)是 一个块级元素，可以包含段落、标题、表格， 乃至诸如章节、摘要和备注等。<SPAN>是 行级容器标签，不可以包含图片、标题、段 落等，只能包含文字内容 而SPAN 是行内元素，SPAN 的前后是不会 换行的，它没有结构的意义，纯粹是应用样 式，当其他行内元素都不合适时，可以使用 SPAN。
CSS十条速记口诀
七、所有标签皆有源，只是默认各不同，span是无 极，无极生两仪—内联和块级，img较特殊，但也 遵法理，其他只是改造各不同，一个*号全归原，层 叠样式理须多练习，万物皆规律。 八、图片链接排版须小心，图片链接文字链接若对 齐，padding和vertical-align:middle要设定，虽差微 细倒无妨。 九、IE浮动双边距，请用display：inline拘 十、列表横向排版，列表代码须紧靠，空隙自消须 铭记
CSS 相对定位 相对定位是一个非常容易掌握的概念。如 果对一个元素进行相对定位，它将出现在 它所在的位置上。然后，可以通过设置垂 直或水平位置，让这个元素“相对于”它 的起点进行移动
Css的基础知识概括
CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此 不占据空间。这一点与相对定位不同，相对 定位实际上被看作普通流定位模型的一部分， 因为元素的位置相对于它在普通流中的位置 CSS 浮动 在 CSS 中，我们通过 float 属性实现元素的 浮动
盒子模型
每个HTML元素都可以看作一个装了东西 的盒子，盒子具有宽度（width）和高度 （height），盒子里面的内容到盒子的 边框之间的距离即填充（padding），盒 子本身有边框（border），而盒子边框 外和其他盒子之间，还有边界 （margin）。
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/。
CSS DIV布局.ppt
<div> 标签定义（from w3cschoool)
• 定义和用法
• <div> 可定义文档中的分区或节（division/section）。
• <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格 的组织工具，并且不使用任何格式与其关联。
• 如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加 有效。
padding: 10px; width: 450px; height: 260px; border: 1px solid #000000; } #box1 { width: 300px; height: 260px; border: 1px solid #000000; float: left; } #box2 { width: 140px; height: 260px; border: 1px solid #000000; float: right; } </style> </head> <body> <div id="container"> <div id="box1">这里是box1</div> <div id="box2">这里是box2</div> </div> </body> </html>
5. float浮动布局 在前面我们利用float属性实现了定位，实际上当你把它用到<div>标签上时， 浮动就变成了一个强大的网页布局工具。基于浮动的布局利用了float属性来并 排定位元素，我们只需设定一个宽度，将元素设为左浮动和右浮动就可以了。 CSS允许任何元素浮动float，不论是图像，段落还是列表。无论先前元素是 什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。
第8章CSS+DIV常见用法精选版演示课件.ppt
hkui
3
8.1.1 中国古典风格简介
1．长 2．闪 3．挤 4．花
hkui
4
8.1.2 使用CSS+DIV实现中国古典风 格
hkui
5
8.2 CSS+DIV的欧美风格应用
8.2.1 欧美风格简介 8.2.2 使用CSS+DIV实现欧美风格
hkui
6
8.2.1 欧美风格简介
hkui
9
8.3.1 日韩风格简介
1．页面布局 2．色彩搭配 3．Flash动画
hkui
10
8.3.2 使用CSS+DIV实现日韩风格
hkui
11
１．页面的风格 ２．页面的布局 ３．用单独色块对区域及重点内容进行划分 ４．页面运行速度快 ５．广告宣传作用突出 ６．艺术字体的设计及应用
hkui
7
8.2.2 使用CSS+DIV实现欧美风格ห้องสมุดไป่ตู้
hkui
8
8.3 CSS+DIV的日韩风格应用
8.3.1 日韩风格简介 8.3.2 使用CSS+DIV实现日韩风格
第8章 CSS+DIV常见用法
hkui
1
本章内容
8.1 CSS+DIV的中国古典风格应用 8.2 CSS+DIV的欧美风格应用 8.3 CSS+DIV的日韩风格应用
hkui
2
8.1 CSS+DIV的中国古典风格应用
8.1.1 中国古典风格简介 8.1.2 使用CSS+DIV实现中国古典风格
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
:link {color: #000000} :visited {color: #cccccc} :hover {color: #000000; font-style:italic} :active {color: #aaaaaa}
例5-6.htm
Internet与网页设计CSS样式表
12
CSS样式表
selector{property1:value1; property2:value2;…}
需要应用的 样式的内容
样式的属性
样式的属性 的值
Select的五种合法的类别：HTML标记符、用户定义的类 Class、用户定义的ID、虚类和虚元素 P119
Internet与网页设计CSS样式表
9
CSS样式表
选择符的类别
HTML标记符
应用比较多，注意继承性、组合性和关联性（P119）的 应用。
用户定义的类选择1、符 两种定义形式的区
可以使用任何名别 2、称？在命标名签类中。使用类选择 <body>里所有符的样元式素的都使可用以方定式义如“何类”。 语法如下： ？
selector.classname{property1:value1; property2:value2;…} .classname{property1:value1; property2:value2;…}
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
5-2.htm
Internet与网页设计CSS样式表
5
CSS样式表
一、CSS的基本概念
样式的继承：若子元素未定义，则它将继承上级元素的 样式的定义。但存在少数属性不能继承，见P119。
<HEAD> <TITLE>CSS例子</TITLE> <style> <!-p{color:red;font-size:20px;font-family:"华文仿宋", "Comic Sans MS"} b{text-decoration:underline} --> </style> </HEAD>
页面元素名：元素虚属性名{样式表内容}
Internet与网页设计CSS样式表
11
CSS样式表
a:link {color: #000000} a:visited {color: #cccccc} a:hover {color: #000000; font-style:italic} a:active {color: #aaaaaa}
[PPT模板]CSS+DIV_教程
一、CSS的基本概念
✓ 2、基本语法
单一选择符的复合 样式声明应该用
“;”隔开，为便于
<HE选AD择>符{属性: 值阅} 读也可以分行写
<TITLE>CSS例子</TIT。LE>
<STYLE TYPE=“text/css”>
选择符H{H属11{{性ffoonn1tt-:-ssi值izzee::1xx-;-llaa属rrgge性e;; cc2oo几:lloo值r乎r::rr所2eedd;有}}…的…HT} ML
5-3.htm
Internet与网页设计CSS样式表
6
CSS样式表
一、CSS的基本概念
样式表的关联性： – 样式表的关联性指在某些样式定义中，可以定义某 样式仅在某个特定元素范围内才有效。。 – 例如：
p b{font-size:12pt;font-family:黑体;color:red}
b元素仅在p元素作用范 围内会套用上述的样式 设定。 而在其他地方 S与HTML文档的结合方法
✓ 内联样式：在<head>标记符内定义，在本网页内起作 用。
<head> <style type="text/css“ media=“screen”> <!-body{ color:green } --> </style> </head>
Internet与网页设计CSS样式表
HH22{{ffoonntt--ssiizzee::llaarrggee;; ccoolloo标rr::b记blluu符ee}}形式都可以
</STYLE>
作为选择符。
</HEAD>
5-1.htm
Internet与网页设计CSS样式表
4
CSS样式表
一、CSS的基本概念
✓ 3、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一 起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用 相同样式：
二、CSS与HTML文档的结合方法
✓ HTML与样式表有多种结合方法 – 内联样式：在<head>标记符内定义 – 外联样式 • 使用<link>标记符链接到外部的样式文件 • 使用CSS的@import标记符来导入样式文件 – 在HTML标签中直接加入样式表的定义。
Internet与网页设计CSS样式表
5-4.htm
Internet与网页设计CSS样式表
7
CSS样式表
一、CSS的基本概念
✓ 4、注释 ➢ CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
Internet与网页设计CSS样式表
8
CSS样式表
一、CSS的基本概念
✓ 5、选择符 ➢ 样式表的基本语法形式：
例5-5.htm
Internet与网页设计CSS样式表
10
CSS样式表
选择符的类别
ID选择符
应用的形式基本与类选择符类似，定义时用“#”替 代”.”。 因此应用时一般选取其中的一种。见P120例子。
虚类和虚元素
在html的页面元素中没有这种属性，故称其为虚类，仅 在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下：
14
CSS样式表
二、CSS与HTML文档的结合方法
✓ 外联样式：使用<link>标记符链接到外部的样式文件， 凡链接的网页都起作用
– 1、定义外部样式文件，用记事本或者 Dreamweaver，编辑完后文件扩展名应为”.css”；
– 2、建立HTML网页文档； – 3、在网页文档中使用<link>标签将前面的样式表
文档链接到网页中。
<head> <link rel=“stylesheet” href=“hr.css” type=“text/css”> </head>