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

本文主要是介绍《Dreamweaver CS6 完全自学教程》笔记 第十六章:使用 Div+CSS 灵活布局网页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 第十六章:使用 Div+CSS 灵活布局网页
    • 16.1 Web 标准概述
      • 16.1.1 什么是 Web 标准
      • 16.1.2 Web 标准的构成
    • 16.2 认识 Div
      • 16.2.1 Div 简介
      • 16.2.2 创建 Div
      • 16.2.3 选择 Div
    • 16.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 absolute(绝对定位)
      • 16.4.3 float(浮动定位)
    • 16.5 Div+CSS 布局理念
      • 16.5.1 将页面用 Div 分块
      • 16.5.2 设计各块的位置
        • 技术专题:指定插入的 Div 标签的位置。
      • 16.5.3 用 CSS 定位
    • 16.6 常用的布局方式
      • 16.6.1 居中布局设计
      • 16.6.2 浮动布局设计


第十六章:使用 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 标准技术主要有两个:

  1. DOM(Document Object Model): 文档对象模型,相当于浏览器与内容结构之间的一个接口。它定义了访问和处理 HTML 文档的标准方法,把网页和脚本以及其他编程语言联系了起来。
  2. 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

  1. 用鼠标点。
  2. 选择状态栏上的 <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
}



返回

这篇关于《Dreamweaver CS6 完全自学教程》笔记 第十六章:使用 Div+CSS 灵活布局网页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/650748

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06