HTML CSS + DIV实现整体布局-白红宇的个人博客

HTML CSS + DIV实现整体布局

发布日期：2021-10-16 07:12:06 浏览次数：5 分类：技术文章

本文共 8465 字，大约阅读时间需要 28 分钟。

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由

尖括号包围的关键词，比如

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

body之间的文本是可见的页面内容

注释标签用于在 HTML 插入注释。

h标签定义和用法

标签可定义标题。

h1定义最大的标题。

h2定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

其它html标签等元素的实例及用法：

(入门，基础知识查阅)

HTML
CSS
JAVASCRIPT
JQUERY
BOOTSTRAP
SQL
MYSQL
PHP
PYTHON
C
C++
C#
JAVA
RUBY

关于CSS：

语法规则及习惯：

html中，关键字为小写单词；

c#中，程序体中变量或是首字母大写？

（网站html\css条缕清晰，简单明了）

（有代码演示）

CSS介绍

解释HTML CSS + DIV实现整体布局:(图文并茂，简洁明了）

CSS 概念和作用:

http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html(理论深入浅出)

认识CSS，了解CSS作用
一、CSS定义与解释

CSS是Cascading Style Sheets（层叠样式表单）的简称。CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为“层叠样式表”（Cascading Stylesheet）。

式样定义如何显示 HTML内容

作用 : 解决

内容与表现分离的问题 ( MVC 模型 , model : html , view : css , control :

二、CSS基本语法与结构

实际上CSS 代码都是由一些最基本的语句构成的。

它的基本语句语法的结构是这样的：　　

选择符{属性：属性值} 例子如： #yangshi{width: 156px;height:25px;}

在网页制作时采用CSS技术，可以有效地对全站页面有共同性质属性的布局、字体、颜色、背景和其它效果属性实现更加精确的控制。只要对网页HTML里的相应的CSS代码做一些简单的修改，就可以改变同一页面或整站用到此“选择类”的网页的外观和格式样式。

css代码由css命名加、“{”、加css属性、加属性值最后以“}”结束组成css属性选择器。如：在VS中，

VS——视图——（CSS属性、管理样式、应用样式），调出工具栏——新建名称为“aa”的样式，设置后自动生成代码。

如对某段文字发生作用，可用关键字class="aa"进行引用。

Css 代码是控制网页显示样式。

日常所指CSS代码包括是完整CSS选择器。见下图：

CSS代码解析图，这段CSS代码为class应用，命名为thinkcss对应HTML运用：即class="thinkcss",设置此类CSS浮动靠左(float:left)，css宽度(width:300px)为300px

三、CSS的作用可以达到效果及特点：

（1）在几乎所有的浏览器上都可以使用。

（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

（4）你可以轻松地控制页面的布局。

（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。结合DIV CSS是通过对页面结构的风格控制的思想，来控制整个页面的风格的属性。浏览器通过CSS类解释来呈现CSS属性来表现样式里设置的样式。

四、CSS替我们解决什么问题-CSS作用？

HTML是骨架，CSS是衣服。相同HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。

CSS能帮我们解决什么问题呢？CSS配合DIV或div+css作用与解决问题：

1、CSS技术帮我们控制网页中的字体大小、页面宽度、页面内容靠左靠右、字体样式、某些网页里区域背景图片、背景颜色、超链接鼠标事件样式、图片居中、文字居中、网页中内容板块间隔等样式（花样）。

2、网页中一些标签元素样式控制，如：标题、段落

、列表

等等网页元素设置控制，包括上面讲的文字图片大小、DIV CSS布局宽度颜色等属性。

html引用css方法如下

1、直接在div中使用css样式制作div+css网页

2、html中使用style自带式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件推荐此方法

1、直接在html标签元素内嵌入css样式，如

我是div css测试内容-www.divcss5.com支持

效果如下图

2、在html头部head部分内style声明插入代码如下：

如上图。

3、使用@import引用外部CSS文件方法

Wcss.css文件内代码.ceshi {font-size:14px; color:#FF0000;}

效果如下图：

可以看出使用此方法和使用自带式引用css样式表方法有相同处，都是需要在html的head内使用style标签引用外部css。

4、使用link来调用外部的css文件

在head放置来调用外部的wcss.css文件来实现html引用css文件

详细如下图

此方法就不需要style标签，而是直接通过link一个样式来引用外部样式

一般推荐使用link来引用外部的css样式方法。

使用link来引用外部的css的优势

1、有利于SEO，使用此方法引用外部css文件，将使得html页面的源代码少很多比起直接加入css样式，因为搜索引擎蜘蛛爬行网页的时候是不爬行css文件的，这样使得html源代码很少，使得蜘蛛爬行更快，处理更少，增大了此网页的权重，有利于排名。

2、节约html使得浏览器下载网页时候分开线程了，就像加载一个页面同时有两条线在打开一个页面道理，使得网页打开格外快。（用户浏览此网页的时候html源代码和css文件同时下载，使得更加快速）

3、修改网页的样式方便，只需修改css样式即可修改网页的美工样式，如果在网站项目中此方法，因整站应用了共用的css基本样式，这样修改整站风格样式根据快捷方便。

式样表可以层叠出现 , 后边的式样会将前边的式样覆盖 , 比如规定标题式样为 a , 而其中几个页面想改变这种式样, 就可以再加入式样表, 只是针对这些进行修改 .

层叠次序 : 1. 浏览器默认

2. 外部式样表

3. 内部式样表(位于标签内部 )

4. 内联式样(在 html元素内部)

在网页中，可以通过div属性id

，以id="xx"形式，对某种样式进行引用（id也可以对网页中的其它组成元素进行引用）；也可以class=“xxxx”形式对css式样引用。但两种存在一些区别。
定义CSS样式的代码中：“#”后面跟的是id，“.”后面跟的是class

#对应的是id，建议是当前页面只出现一次。

.对应的class，可以多次引用。

以id方式定义css样式，语法形式为： #1 {...}
以class方式定义css样式，语法形式为： .1 {...}

CSS中的class与id区别及用法

CSS id与CSS classhttp://www.divcss5.com/rumen/r117.shtml

以上网页对CSS进行了详细但又简单明晰的介绍，强力推荐。

DIV标签系统介绍

DIV标签称为

区隔标记。

定义

可定义文档中的分区或节（division/section）。美: [dɪ'vɪʒ(ə)n]英: [dɪ'vɪʒ(ə)n]

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记，那么该标签的作用会变得更加有效。

DIV元素:是用来为HTML文档内

大块（block-level）的内容提供结构和背景的元素。

DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

作用：设定字、画、表格等的摆放位置。

当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。

DIV标签应用于 Style Sheet（样式表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class、Style、title、ID 等属性。

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是固有的唯一格式表现。可以通过的 class 或 id 应用额外的样式。

不必为每一个都加上类或 id，虽然这样做也有一定的好处。

可以对同一个元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

CSS单元的位置和层次-div标签

在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使

Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。

position 决定 DIV tag 是如何放置的。

“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。

left 相对于窗口左边的位置

top 相对于窗口上边的位置

width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。

height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。

color（字体颜色）：色彩代码；

font-size（字体大小）：数值；

line-height（行高）：数值；

border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；

font-weight（字体粗细）：normal、bold、bolder、lighter；

font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆

clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。

clip:rect(top,right,bottom,left);

visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。

z-index DIV tag 的立体位置。值越大 DIV 的位置越高。

background-color DIV 背景的颜色。

layer-background-color Netscape 的 DIV 背景颜色。

background-image DIV 的背景图象。

layer-background-image Netscape 的 DIV 的背景图象

filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；

word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；

direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）;

padding-left：层中的内容距离层左边框的距离；padding-right：层中的内容距离层左边框的距离；padding-top：层中的内容距离层顶部边框的距离；padding-bottom：层中的内容距离层底部边框的距离。

绝对定位和相对定位（position）

绝对定位：

定位属性将是网虫们打开幸福之门的钥匙：

H4 { position: absolute; left: 100px; top: 43px }

这项CSS规则让浏览器将

的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。

左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。

你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

相对定位：

绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：

I { position: relative; left: 40px; top: 10px }

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。

除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。

定位单元的控制（width、height、visiblility）

除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。

宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。

宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”，因为有些浏览器不支持高度属性。

可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。

H4 { visibility: hidden }

选项：

visible 使要素可以被看见

hidden 使要素被隐藏

inherit 指它将继承母体要素的可视性设置。

值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。

当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。此新闻

这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。

单元层次（z-index）

特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图象设定z-index。（对于Communicator，最好将标签包在或

标签内，然后将z-index应用到或

。）

剪辑绝对定位单元（clip）

绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。

在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：

clip : rect(top,right.bottom,left) ;

其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。

控制单元溢出（overflow）

固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值 none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。

转载地址：https://blog.csdn.net/sjpljr/article/details/67639183 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：WindowsServer2012禁用IE增强安全和安装FlashPlayer

下一篇：asp.net中的数据连接

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章