当前位置：文档之家 › div+css布局教程 ppt课件

div+css布局教程 ppt课件

  • 格式：ppt
  • 大小：1.04 MB
  • 文档页数：39

下载文档原格式

  / 39

合集下载

CSSDIV页面布局PPT课件

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>进行控制，其中的各标记元 素都会因此而改变。

第7章 第2节 DIV+CSS布局网页 课件

第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”。

项目六DIVCSS布局网课件.ppt

项目六DIVCSS布局网课件.ppt
创建一个ID为top的CSS规则，打开“#top的CSS规则定义”对话框，DIV标签 的常见属性主要是在“方框”、“边框”与“定位”分类里设定的。
6.2 任务2： 认识DIV标签
方框分类属性 点击“方框”分类，如图所示。
1）width：设置DIV的宽度。 2）height：设置DIV的高度。 在此处width与height分别设为200，点击“确定”按钮，设计视图中的DIV。 3）padding：设置DIV的内边距，也就是内容到边框的距离。 4）margin：设置DIV的外边距，也就是边框到父容器或与其他容器之间的距 离。 设置所有padding为20，所有margin为20，点击“确定”按钮后效果如图所示。
有strong、a、span...</p> </body> 在浏览器中预览效果如图所示。
3、块元素与行内元素转换
块元素与行内元素可以通过 “区块”分类中display属性 的block（块）与inline（行内） 进行互相转换。
6.2 任务2： 认识DIV标签
<DIV>（division）是一个区块容器标记，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。<DIV>与</DIV>之间可以放 置任何内容，包括其他的DIV标签。也就是说DIV是一个没有特性的容器 而已。
正常DIV显示
6.2 任务2： 认识DIV标签
给DIV设置float属性，让div1右浮动，div2左浮动，在style内添加如下代码： #div2 {
float: left; } #div1 {
float: right; } 添V标签
6）clear：清除浮动。其值有left、right、both、none。 如上例，要想让div3不受div2浮动的影响，恢复其原始文档流位置显示，则在

1.Web标准CSSDIV网页布局与美化ppt课件

1.Web标准CSSDIV网页布局与美化ppt课件
阐明：margin:后面跟有四个距离分别为到父容器的上-右 -下-左边的距离；可以看例子中的白色DIV到黑色DIV的边 距离效果。 还可以分别设置这四个边的距离，用到的属性如下： 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。 7、margin-bottom:到父容器下边框的距离。
构造 对应的标准语言 HTML或XML 表现 对应的标准语言 CSS 行为 对应的标准语言 对象模型、ECMAScript
内容：
页面实际要传达的真正信息，包括数据、 文本、文档或图片。不包括辅助信息，如导 航菜单、装饰图片等。
构造： 就是对网页内容进行整理和分类。
表现：
对结构化的信息进行样式 上的控制，如对颜色、大小、 背景等外观进行控制，所有这 些用来改变内容外观的，称为 “表现”。
CSS+DIV网页布局与美化
第一章 Web标准
模块一：Web标准 模块二：CSS样式与盒模型 模块三：CSS+DIV布局设计 模块四：CSS美化网页元素 模块五：网站设计实例
什么是Web标准 Web标准带来的好处 符合Web标准的设修改
DIV+CSS
修改外部样式表文件(.CSS)
采用遵循Web标准的编辑工具； 所有HTML文档都必须声明它们所使用的编码语言； 用小写字母书写所有的标签； 为图片添加alt属性； 给所有属性值加引号； 关闭所有的标签。 用id属性代替name属性。
• CSS的定义是由三个部分构成:
• 选择符(selector)，属性(properties)和属性 的取值(value)。
• 建立一网站主页，用DIV+CSS的样式来实 现，要求网站主页由三部分组成：头部、 主体及尾部。

DIV+CSS布局 ppt课件

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课件

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>密 &nbsp;码 <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_教程

: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。

CSS DIV布局.ppt

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课件

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

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}

divcss美化与布局实战(详细分析：整体)共10张PPT

divcss美化与布局实战(详细分析：整体)共10张PPT

蓝色经典效果图
(实例文件：12-1. (实例文件：12-1. 在上一章中，电子相册中用CSS控制实现了两种不同的相册模式，而本身的HTML结构却没有任何修改。 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 第12章 div+css美化与布局实战 首先根据博客的内容需要对整体框架进行合理规划。 首先根据博客的内容需要对整体框架进行合理规划。 在整体内容框架的基础上#parameter与#mainsupport两个部分又包含各个小的子块。 (实例文件：12-1. DIV+CSS网页样式与布局 (实例文件：12-1. 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 最简单的博客通常包括导航菜单、各种统计信息、时间日期、推荐的博客和文章、脚注等。 DIV+CSS网页样式与布局 本章将继续拓展这种思路，以网上常见的博客首页为例，用CSS实现更绚丽的网面变幻。
DIV+CSS网页样式与布局
第12章 div+css美化与布局实 战
本章简介
在上一章中，电子相册中用CSS控制实现了两种不同的相册模式，而本身的HTML 结构却没有任何修改。本章将继续拓展这种思路，以网上常见的博客首页为例， 用CSS实现更绚丽的网面变幻。同样保持页面的HTML不变，通过分别调用3个外 部CSS文件，实现3个完全不同的页面效果，即蓝色经典、清明上河图和交河故城。 (实例文件：12-1.h宽度且居中的样式，最上方为页面的banner和导航菜单， #parameter的各个项目在页面主体的右侧，#mainsupport在页面中间。
框架搭建
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
例子：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布局教程
The Tutorial of css+div
div+css布局教程
目录：
1.CSS基础知识 2.网页布局常用属性 3.网页布局实例 4.Web标准化思想与网页重构
div+css布局教程
一、CSS基础知识
1.css简介 2.css语法 3.选择器 4.实用小技巧
div+css布局教程
如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢 ？比方说，你希望段落的字体是 Times。 我们可以这样写：p { font-family: Times, "Times New Roman", serif; }
div+css布局教程
几点值得注意的地方：
(3)使用继承 不推荐使用：td{font-size:12px;} p{font-size:12px;} li{font-
size:12px;}… 应该这样写 body{font-size:12px;}
div+css布局教程
几点值得注意的地方：
（4）使用简记属性 不推荐使用： margin-top:1px; margin-left:2px; margin-right:3px; margin-
例子： h1{color: green; } h2{color: green; } h3{color: green; }
样式太臃肿了， 该减肥了!
我们可以这样写：h1,h2,h3 { color: green; }
div+css布局教程
几点值得注意的地方：
2、继承及其问题
根据 CSS，子元素从父元素继承属性。
3、层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 样式表分为： 浏览器缺省设置 外部样式表 内部样式表（位于 <head> 标签内部） 内联样式（在 HTML 元素内部） 优先级为：
内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下 的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏 览器中的样式声明（缺省值）。
div+css布局教程
2、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。 例子：#red {color:red;} #green {color:green;} 注意：id 属性只能在每个 HTML 文档中出现一次。
div+css布局教程
bottom:4px;
应该这样写 margin:1px 3px 4px 2px;
div+css布局教程
1、CSS 派生选择器
ul li{ font-weight:bold;} 定义ul内li 标签的样式
P span a{font-weight:bold;} 定义段落下a标签的样式
可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格 表示。
2、类选择器 在 CSS 中，类选择器以一个点号显示： 例子： .center {text-align: center} 注意：类名的第一个字符不能使用数字
div+css布局教程
1、桥接样式表方法 在一些大型的项目中，由于样式表文件过多，使用桥接样式表可以便捷高效 的管理这些样式。
div+css布局教程
CSS 指层叠样式表 (Cascading Style Sheets) CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行 样式通常存储在样式表中 外部样式表通常存储在 CSS 文件中 外部样式表可以极大提高工作效率
div+css布局教程
CSS 语法由三部分构成：选择器、属性和值：
P{color:#ff0000; background:#000000;}
div+css布局教程
几点值得注意的地方：
4、高效的CSS
（1）使用外联样式代替内联样式和内部样式表 不推荐使用：<p style=“color:red”></p>
或者是：<style type=“text/css”> p{color:red;}</style>
(2)使用组选择器 h1,h2,h3 { color: green; }