divcss布局教程精品PPT课件
合集下载
第6章Div标签与CSS样式表(4)-CSS语法
因此，概括来说，CSS就是由3个基本部分组成 的——“对象”、“属性”和“值”。
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
第4章_理解CSS+DIV网页样式与布局
3
4.1 div标记与span标记
10-1.html
4
4.1 div标记与span标记
DIV与span的区别 与 的区别
10-2.html
5
4.1 div标记与span标记
div与span的区别在于，div是一个块级 与 的区别在于， 是一个块级 是一个块级(block-level)元素，它包围的元素会自动换行， 元素， 的区别在于 元素 它包围的元素会自动换行， 仅仅是个行内元素(inline elements),不会换行。span没有结构上的意义，当其 不会换行。 没有结构上的意义， 而span仅仅是个行内元素 仅仅是个行内元素 不会换行 没有结构上的意义 不合适的时候可以换上他，同时div可以是包含 可以是包含span的反之则不行。 的反之则不行。 他元素都 不合适的时候可以换上他，同时 可以是包含 的反之则不行
6
4.2 盒子模型的概念
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容要大。 一般来说这些被占据的空间往往都要比单纯的内容要大。
7
4.2 盒子模型的概念
一个盒子模型由content(内容 、border(边框 、padding(间隙 、 内容)、 边框)、 间隙)、 一个盒子模型由 内容 边框 间隙 间隙)这四部分组成 和margin(间隙 这四部分组成。 间隙 这四部分组成。 一个盒子的实际宽度是有content+padding+border+margin组成的。 组成的。 一个盒子的实际宽度是有 组成的 中可以通过width和height来控制 来控制content的大小，并且对于任何 的大小， 在CSS中可以通过 中可以通过 和 来控制 的大小 一个盒子都可以设置四条边各自的border、padding和margin。只要利用好 一个盒子都可以设置四条边各自的 、 和 。 盒子的这些属性，就能够实现各种各样的排版效果。 盒子的这些属性，就能够实现各种各样的排版效果。
第19章 DIV+CSS页面布局实例：制作
19.7
制作个人博客分页
个人博客的分页包括article.html、archives.html、 、 个人博客的分页包括 、 guestbook.html和about.html。这四个网页的结构和首 和 。 是一致的。 页index.html是一致的。所以在制作完成 是一致的 所以在制作完成index.html后 后 制作其他分页就变得非常简易。这也是DIV+CSS布局 ，制作其他分页就变得非常简易。这也是 布局 的一大优点。 的一大优点。有的网站在构架时候为每个分页都设置一 文件。 个CSS文件。但这样做会使网站的文件量增大，也会为 文件 但这样做会使网站的文件量增大， 后期维护修改带来一定的麻烦。 后期维护修改带来一定的麻烦。本章实例只使用一个 CSS文件，就是 文件， 文件 就是index.css。在这个文件中包含整个网站 。 样式。 的CSS样式。 样式
19.4.2 制作左边栏中网文的样式
如图19.7所示，网文没有添加任何样式，但其结构和位置都 所示，网文没有添加任何样式， 如图 所示 是正确的。接着对网文进行样式美化。 是正确的。接着对网文进行样式美化。首先对文章标题 添加样式。文章标题使用article_marker.gif图片来作为 添加样式。文章标题使用 图片来作为 背景图，设置其padding-left属性后，图片就会与文字分 属性后， 背景图，设置其 属性后 在标题中有超链接“阅读全文” 离。在标题中有超链接“阅读全文”，选择该链接后会 跳转到article.html页面。 页面。 跳页头部（header） 制作个人博客的首页头部（header）
在完成首页的整体基本布局后， 在完成首页的整体基本布局后，就可以对页面进行分块制作 首先制作网页头部header。 ，首先制作网页头部 。 header分为左右两个部分，左边是网站的 分为左右两个部分， 分为左右两个部分 左边是网站的logo，右边是网 ， 站的导航。这两个部分分别用logo和nav的容器嵌入页面 站的导航。这两个部分分别用 和 的容器嵌入页面 。在nav容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航
第6章 Div+CSS布局网页
图6-18 设置分类项方框
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
第10章 理解CSS定位与div布局
CSS+DIV
3. 元素的定位
7. z-index空间位置，用于调整定位时重叠块 的上下位置（实例：10-28.html）
CSS+DIV
CSS+DIV
4. 定位实例
1.轻轻松松给图片签名（实例：10-29.html） 2.文字阴影效果（实例：10-30.html）
CSS+DIV
2. 盒子模型
CSS+DIV
2. 盒子模型 2.Border 小知识：border会占据空间，所有在技术精细的 版面时，一定要把 border的影响考虑进去。 border的属性主要有个： （1）color边框的颜色 （2）width边框的粗细 （3）style边框的样式 实例：10-3.html 如果要设置某一个边框则使用border-bottom （left、right、top）来完成 实例：10-4.html
3. 元素的定位
3. Position定位，即相对于其父块的位置和相对于它自身应 该在的位置。 position属性一共有4个值：static（默认值：它表示块保持 在原来应该在的位置上，即该值没有任何移动效果。）、 absolute（觉得定位）、relative（相对定位）和fixed（固 定定位）。 4. position:absolute绝对定位（相对页面来说的）（实例： 10-20.html）说明：块的位置和父块无关，和页面有关。 P247技术背景。 小知识：top、right、bottom、left这4个属性不但可以设置 为绝对的像素，还可以设置百分数。（实例：10-21.html） 当窗口大小，发生改变的时候。。。 小知识：top和bottom属性发生冲突（实例：10-22.html） P249经验之谈
Div+CSS网站布局应用教程第6章 设置页面背景图像
6.4.1
背景图像显示区域background-origin属性
默认情况下，background-position属性总是以元素左上角原点作为背景 图像定位，使用CSS 3.0中新增的background-origin属性可以改变这种背景 图像定位方式，通过该属性可以大大改善背景图像的定位方式，能够更加灵 活的对背景图像进行定位。 background-origin属性的语法格式如下。 background-origin: border | padding | content
自测4——为网页设置背景图 像
自测4：为网页设置背景图像 最终文件：光盘\最终文件\第6章\6-3-1.hห้องสมุดไป่ตู้ml 视 频：光盘\视频\第6章\6-3-1.swf
6.3.2
background-repeat属性
为网页设置的背景图像默认情况下会以平铺的方式显示，在CSS中可以 通过background-repeat属性设置背景图像重复或不重复的样式，以及背景图 像的重复方式。 background-repeat属性的语法格式如下。 background-repeat: no-repeat | repeat-x | repeat-y | repeat;
自测1——设置网页背景颜色
自测1：设置网页颜色 最终文件：光盘\最终文件\第6章\6-1-1.html 视 频：光盘\视频\第6章\6-1-1.swf
6.1.2
为网页元素设置不同的背景颜色
通过background-color属性，不仅可以为页面设置背景颜色，而且还可 以设定HTML中几乎所有元素的背景颜色，因而，大多数页面都通过为元素 设定不同的背景颜色来为页面分块。
自测6——实现固定不动的 背景图像
第8章DIV+CSS布局入门
机械工业出版社
8.1 认识div
8.1.2 使用div标签
1．插入div标签 2．div的嵌套
机械工业出版社
8.2 AP元素
8.2.1 AP元素与AP Div元素
1．AP元素 2．AP Div元素
机械工业出版社
8.2 AP元素
8.2.2 使用AP Div
1．插入AP Div 2．连续绘制多个AP Div 3．创建嵌套的AP Div
机械工业出版社
8.2 AP元素
8.2.3 AP Div的属性设置与相关操作
1．AP Div的属性面板
2．改变AP Div的堆叠顺序 3．调整AP Div的大小
机械工业出版社
8.3 CSS盒模型
8.3.1 什么是盒模型
盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、 内边距（padding）、边框（border）和外边距（margin）组成。
机械工业出版社
8.3 CSS盒模型
8.3.4 外边距的叠加
1．两个元素垂直相遇时叠加 2．两个元素包含时叠加
机械工业出版社
8.4 CSS的定位
8.4.1 静态定位（position:static;）
静态定位是position属性的默认值，即该元素出现在文档的常规位置， 不会重新定位。
机械工业出版社
利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位 方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动， 直到它的外边缘碰到包含框或另一个浮动框的边框为止。
机械工业出版社
8.5 浮动与清除浮动
8.5.2 清除浮动（clear）
在CSS样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能够 解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应 子级元素高度的问题。清除浮动主要利用的是clear属性中的both（左右两侧 均不允许浮动元素）、left（左侧不允许浮动元素）和right（右侧不允许浮动 元素）3个属性值清除由浮动产生的效果。