《Dreamweaver CS6 完全自学教程》笔记第十六章：使用 Div+CSS 灵活布局网页

最新推荐文章于 2023-03-30 22:14:05 发布

SP FA

最新推荐文章于 2023-03-30 22:14:05 发布

阅读量1.9k

点赞数 6

分类专栏： Dreamwaver学习文章标签： dreamweaver

本文链接：https://blog.csdn.net/SP_FA/article/details/108356959

版权

Dreamwaver学习专栏收录该内容

19 篇文章 85 订阅

订阅专栏

第十六章：使用 Div+CSS 灵活布局网页

16.1 Web 标准概述

16.1.1 什么是 Web 标准

Web 标准是由 W3C（World Wide Web Consortium）和其他标准化组织指定的一套规范集合，包含一系列标准，如 HTML、XHTML、JavaScript、CSS 等。

Web 标准，即网站标准。目前通常听说的 Web 标准一般指进行网站建设所采用的基于 XHTML 的网站设计语言。其中典型的应用模式是 Div + CSS 。

Web 标准由一系列的规范组成。由于 Web 设计越来越趋向于整体与结构化，对于网页设计者来说，理解 Web 标准首先要理解结构和表现分离的意义。刚开始时理解这一点可能会很难，但是理解这点是非常重要的，因为当结构和表现分离后，用 CSS 样式表来控制表现就很容易了。

16.1.2 Web 标准的构成

结构：

结构技术用于对网页中用到的信息（文本、图像等）进行分类和整理，用于结构化设计的 Web 标准技术主要是 HTML。

表现：

表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制，目前用于结构化设计的 Web 标准技术主要是 CSS。
W3C 创建 CSS 的目的是用 CSS 来控制整个网页的布局，与 HTML 所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点维护更加容易。

行为：

行为指对整个文档的一个模型定义和交互行为的编写，用于行为设计的 Web 标准技术主要有两个：

DOM（Document Object Model）： 文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理 HTML 文档的标准方法，把网页和脚本以及其他编程语言联系了起来。
ECMAScript（JavaScript 的扩展脚本语言）： 由 CMA（Computer Manufacturers Association）指定的脚本语言（JavaScript），用于实现网页对象的交互操作。

16.2 认识 Div

16.2.1 Div 简介

<div> ··· </div>

Div 全称 Division，意为 “区分” 。是用来定义网页内容中的逻辑区域的标签，用于为 HTML 文档中的块内容设置结构和背景属性的元素。

Div 是 HTML 中指定的，专门用于布局设计的容器对象。在传统的表格式的布局当中，之所以能进行排版布局，完全依赖于表格对象。而现在的 CSS 布局中，<div> 是核心对象，不需要依赖表格，一个简单的布局只需要依赖 Div 与 CSS ，所以也称为 Div + CSS 布局。

16.2.2 创建 Div

只需创建 <div> 标签即可。将内容放置其中就可以应用 <div> 标签。

然而在一个没有应用 CSS 样式的页面中，<div> 没有任何实际效果，所以 <div> 从本质上实现了与样式的分离。这样做的好处是，由于 <div> 与样式分离，最终样式由 CSS 来完成，使得 <div> 在设计中拥有巨大的可伸缩性，可以根据自己的想法改变 <div> 的样式，不拘泥于单元格固定模式的束缚。

在 CSS 布局中所需要的工作可简单分为两步：用 <div> 将内容标记出来，然后编写 CSS 样式。

16.2.3 选择 Div

用鼠标点。
选择状态栏上的 <div> 标签。

16.3 关于 Div + CSS 盒模型

16.3.1 盒模型的概念

传统的排版是通过大小不一的表格和表格嵌套来定位内容。而 CSS 排版中，是通过由 CSS 定义的大小不一的盒子和盒子嵌套来排版，这种方式代码简洁，维护方便。

盒模型有以下属性：内容（content）、填充（padding）、边框（border）、边界（margin）。

在这里插入图片描述

16.3.2 margin（边界）

两个行内元素相邻时，它们之间的距离为两个元素的边界值相加。但如果是产生换行效果的块级元素，它们之间的距离是取 margin 中的较大值。

设置边界的方式如下：

<html>
<head>
	<title>margin</title>
</head>
<body>
	<div style=" margin-bottom:40px;">
		<img src="第一个图片.jpg">
	</div>
	<div>
		<img src="第二个图片.jpg">
	</div>
</body>
</html>

这样两幅图中间就会有 40 像素的间隔。
其中 margin-bottom 是设置底部边界宽度，还有 margin-left / right / top ，或直接用 margin 设置四条边。

16.3.3 border（边框）

一般用于分离元素，border 的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将 border 纳入。

border 的属性主要有：color（颜色）、width（粗细）、style（样式）

在这里插入图片描述
或者可以单独设置某一边：

<p style="border-bottom:3px dotted #FF0000"> ··· </p>

16.3.4 padding（填充）

用于控制 content 和 border 之间的距离。操作与 margin、border 类似。

16.4 Div + CSS 布局定位

16.4.1 relative（相对定位）

在 CSS 中的写法是 position:relative; ，其表达的意思是以父级对象（它所在的容器）的坐标原点为原点，无父级则以 body 的坐标原点为原点，配合 top、right、bottom、left 值来定位元素。当父级有 padding 等 CSS 属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。

使用相对定位时，无论是否进行移动，元素仍占据原来的空间，因此移动元素会导致它覆盖其他元素。

16.4.2 absolute（绝对定位）

在 CSS 中的写法是 position:absolute; ，参照浏览器左上角，配合 top、right、bottom、left 值来定位元素。

绝对定位可以使对象的位置与其他元素无关，可以使元素从它的包含块向上下左右移动。

16.4.3 float（浮动定位）

当 float 值为 none 时，对象不浮动；为 left 时，向左浮动；为 inherit 时，继承父级元素的浮动属性。

float 会使元素脱离文档流，一直向左或右移动，同时覆盖在文档流中的内容。若包含框宽度不够，会向下移动，寻找空间足够的地方再向左或右移动。

16.5 Div+CSS 布局理念

16.5.1 将页面用 Div 分块

在用 CSS 布局页面时，首先要有一个整体规划，包括要分成哪些模块，各模块间的父子关系等。

在这里插入图片描述
点击插入 -> 布局对象 -> Div 标签，打开 “插入 Div 标签” 对话框即可。

16.5.2 设计各块的位置

根据内容考虑整体的页面布局类型，如单栏、双栏、三栏等。

在这里插入图片描述

技术专题：指定插入的 Div 标签的位置。

在 “插入 Div 标签” 对话框中，通过 “插入” 下拉列表，可以指定插入的 Div 标签位置，包括 5 个选项：

在插入点： 将 Div 插入到光标所在位置。
在标签之前： 插入到所选标签前面。
在开始标签之后： 插入在所选标签的开始标签之后。
在结束标签之前： 插入在所选标签的结束标签之前。
在标签之后： 插入到所选标签后面。

16.5.3 用 CSS 定位

整理好框架后，就可以利用 CSS 对各板块进行定位，实现整体规划，然后再添加内容。

16.6 常用的布局方式

16.6.1 居中布局设计

使用自动空白边让设计居中：

将水平空白边设置为 auto：

<body>
<div id="box"></div>
</body>

#box {
	Width: 80px;
	Height: 500px;
	background-color: #F36;
	margin: 0 auto;
}

使用定位和负值空白边让设计居中：

先定义容器的宽度，将 left 属性设置为 50%，就会把容器的左边缘定位在页面中间。

#box {
	width: 720px;
	position: relative;
	left: 50%;
}

如果不希望左边缘居中，而是容器中间居中，只要对容器的左边应用一个负值的空白边，宽度等于容器的一半即可。

#box {
	width: 720px;
	position: relative;
	left: 50%;
	margin-left: -360px;
}

16.6.2 浮动布局设计

利用了 float 属性来并排定位元素。

两列固定宽度布局：

<div id="left">左列</div>
<div id="right">右列</div>

#left {
	width: 400px;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	float: left;
}
#right {
	width: 400px;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	float: left;
}

两列固定宽度居中布局：

可以使用 div 嵌套的方式来完成。

<div id="box">
	<div id="left">左列</div>
	<div id="right">右列</div>
</div>

#box {
	width: 808px;
	margin: 0px auto;
}

两列宽度自适应布局：

自适应布局主要通过宽度的百分比值进行设置。

#left {
	width: 20%;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	float: left;
}
#right {
	width: 70%;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	float: left;
}

两列右列宽度自适应布局：

左栏固定宽度，右栏根据窗口大小自适应。

#left {
	width: 200px;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	float: left;
}
#right {
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
}

此时右栏不设置宽度，不浮动。

三列浮动中间宽度自适应布局：

这种布局单纯使用 float 与百分比不能实现，此时就需要绝对定位来实现了。

<div id="left">左列</div>
<div id="main">中列</div>
<div id="right">右列</div>

* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#left {
	width: 200px;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	position: absolute;
}
#left {
	width: 200px;
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	position: absolute;
	top: 8px;
	right: 8px;
}
#main {
	height: 300px;
	background-color: #0CF;
	border: 2px solid #06F;
	margin: 0px 204px 0px 204px
}

SP FA

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
打赏
5
评论
《Dreamweaver CS6 完全自学教程》笔记第十六章：使用 Div+CSS 灵活布局网页

文章目录第十六章：使用 Div+CSS 灵活布局网页16.1 Web 标准概述16.1.1 什么是 Web 标准16.1.2 Web 标准的构成16.2 认识 Div16.2.1 Div 简介16.2.2 创建 Div16.2.3 选择 Div16.3 关于 Div + CSS 盒模型16.3.1 盒模型的概念16.3.2 margin（边界）16.3.3 border（边框）16.3.4 padding（填充）16.4 Div + CSS 布局定位16.4.1 relative（相对定位）16.4.2 a
复制链接

扫一扫