CSSDIV页面布局PPT课件
合集下载
第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”。
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 的方法一样。
[PPT模板]CSS+DIV_教程
![[PPT模板]CSS+DIV_教程](https://img.taocdn.com/s3/m/62f520f9e45c3b3566ec8b4b.png)
: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。
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。
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}
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教育创造学生价值
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>进行控制，其中的各标记元 素都会因此而改变。
• 实例：14-1.html
• 如果在上例中把div替换成span标记，效果完全一样。<span>标记 的作用也是独立出各个区块。
Neusoft Institute of Information
• border 一般用于分离元素，计算元素实际的宽和高时，要将 border也考虑进去。
• border的属性主要有3个：color、width、style
• 实例：14-3.html
教育创造学生价值
2.3 border
Neusoft Institute of Information
Neusoft Institute of Information
1.div与span标记
教育创造学生价值
1.1 概述
Neusoft Institute of Information
• 在使用CSS排版的页面中，<div>与<span>是两个常用的标记。利 用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种 效果。
Neusoft Institute of Information
2.7 块级元素之间的竖直margin
• 两个产生换行效果的块级元素的竖直距离不再是margin-bottom与 margin-top的和，而是两者中的较大者。
Neusoft Institute of Information
教育创造学生价值
Neusoft Institute of Information
第一部分
整体概述
THE FIRST PART OF THE OVERALL OVERVIEW, PLEASE SUMMARIZE THE CONTENT
教育创造学生价值
• 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时 针排序。
• 例如：
border-color: red green;
border-width:1px 2px 3px;
border-style: dotted dashed solid double;
教育创造学生价值
2.3 border
• 实例：14-7.html
教育创造学生价值
Neusoft Institute of Information
2.6 行内元素之间的水平margin
• 当两个行内元素紧邻的时候，他们之间的距离为第1个元素的 margin-right加上第2个元素的margin-left。
• 实例：14-8.html
来则不成立，即<span>标记不能包含<div>标记。 • 实例：14-2.html
• 通常情况下，对于页面中大的区块使用<div>标记，而<span>标记仅 仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片或 一个超链接等。
教育创造学生价值
Neusoft Institute of Information
2.盒子模型
教育创造学生价值
2.1 概念
• 什么是“模型”——本质特征的抽象
Neusoft Institute of Information
• 布局的“模型”
教育创造学生价值
Neusoft Institute of Information
2.1 概念
• 所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。 可以通过调节盒子的边框和距离等参数，来调节盒子的位置。
content
padding-bottom border-bottom margin-bottom
教育创造学生价值
width
2.2 属性值的简写形式
Neusoft Institute of Information
• 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框 的属性；
• 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右 边框的属性，后者表示下边框的属性；
• 如果希望在某段文字结束后加上虚线用于分割，而不是用border将 整段话框起来，可以通过单独设置border-bottom来完成。
• 实例：14-4.html
教育创造学生价值
2.4 padding
Neusoft Institute of Information
• padding用于控制content与border之间的距离，如果在实例14-4的 基础上，加入padding-bottom的语句，就可以实现如下效果。
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>进行控制，其中的各标记元 素都会因此而改变。
• 实例：14-1.html
• 如果在上例中把div替换成span标记，效果完全一样。<span>标记 的作用也是独立出各个区块。
Neusoft Institute of Information
• border 一般用于分离元素，计算元素实际的宽和高时，要将 border也考虑进去。
• border的属性主要有3个：color、width、style
• 实例：14-3.html
教育创造学生价值
2.3 border
Neusoft Institute of Information
Neusoft Institute of Information
1.div与span标记
教育创造学生价值
1.1 概述
Neusoft Institute of Information
• 在使用CSS排版的页面中，<div>与<span>是两个常用的标记。利 用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种 效果。
Neusoft Institute of Information
2.7 块级元素之间的竖直margin
• 两个产生换行效果的块级元素的竖直距离不再是margin-bottom与 margin-top的和，而是两者中的较大者。
Neusoft Institute of Information
教育创造学生价值
Neusoft Institute of Information
第一部分
整体概述
THE FIRST PART OF THE OVERALL OVERVIEW, PLEASE SUMMARIZE THE CONTENT
教育创造学生价值
• 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时 针排序。
• 例如：
border-color: red green;
border-width:1px 2px 3px;
border-style: dotted dashed solid double;
教育创造学生价值
2.3 border
• 实例：14-7.html
教育创造学生价值
Neusoft Institute of Information
2.6 行内元素之间的水平margin
• 当两个行内元素紧邻的时候，他们之间的距离为第1个元素的 margin-right加上第2个元素的margin-left。
• 实例：14-8.html
来则不成立，即<span>标记不能包含<div>标记。 • 实例：14-2.html
• 通常情况下，对于页面中大的区块使用<div>标记，而<span>标记仅 仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片或 一个超链接等。
教育创造学生价值
Neusoft Institute of Information
2.盒子模型
教育创造学生价值
2.1 概念
• 什么是“模型”——本质特征的抽象
Neusoft Institute of Information
• 布局的“模型”
教育创造学生价值
Neusoft Institute of Information
2.1 概念
• 所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。 可以通过调节盒子的边框和距离等参数，来调节盒子的位置。
content
padding-bottom border-bottom margin-bottom
教育创造学生价值
width
2.2 属性值的简写形式
Neusoft Institute of Information
• 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框 的属性；
• 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右 边框的属性，后者表示下边框的属性；
• 如果希望在某段文字结束后加上虚线用于分割，而不是用border将 整段话框起来，可以通过单独设置border-bottom来完成。
• 实例：14-4.html
教育创造学生价值
2.4 padding
Neusoft Institute of Information
• padding用于控制content与border之间的距离，如果在实例14-4的 基础上，加入padding-bottom的语句，就可以实现如下效果。