网页制作中的DIV+CSS技术分析

-精选财经经济类资料- -最新财经经济资料-感谢阅读- 1 网页制作中的 DIV+CSS 技术分析 摘要：随着计算机和互联网快的 速发展，学会网页制作已经成为人们生 活和工作中不可缺少的重要技能。对于 建设网站来说，静态网页制作是其中的 一个重要组成部分，制作网页已经成为 一个基本的技能。文章分析了网页制作 中的 DIV+CSS 技术。 中国论文网 /8/view-12779644.htm 关键词：网页制作；CSS 样式表； DIV CSS 功能之一是 HTML 文件功 能的补充及扩展，CSS 功能之二是显示 页面元素。CSS 实际上就是 HTML 中 标签 property 独立出来的内容。本文使 用它对网页内容进行结构控制。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 2 1 黑盒 HTML 中的所有元素，不论其是 模块级元素，还是行集元素，在 CSS 看 来都是一个黑盒，这个就是黑盒模型。 这个黑盒没有空间上的意义，可 以认为它是二维上的物体，也可以把这 个“黑盒”理解成有高度的黑盒，这样的 话，需要将下面“ 层” 理解成有一定高度 的层。 1.1 黑盒内部组成情况 黑盒所占的宽度是由“内容、内 外边距、外 border”组成，CSS 中通过 设置宽度和高度来制定黑盒的大小。 1.2border 如果给 border 制定多个规则，那 么规则之间很容易起冲突。 1.3 内边距 如果一个黑盒有背景图像，那么 背景覆盖的范围是“padding+内容”组成 的范围。 1.4 外边距 正文位置比较特殊，bgcolor 会 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 3 伸长到边缘位置。 2 黑盒的漂浮和位置 CSS 黑盒模型的每个 property 都 包含 4 个部分： up，down，left，right。这 4 个位置可 同时或者是分开设置。而 border 必须区 分颜色和大小，我们又可以理解为生活 中所见黑盒的厚度以及这个黑盒是用什 么颜色材料做成的，边界就是该黑盒与 其他东西要保留多大距离。 2.1 黑盒之间的关系 （1）简单版本。这个版本的规 则不涉及到元素的排列。 （2）模块级元素。它的显示形 式是一个模块。 （3）一行。在其他元素的基础 上存在个值域。 2.2 黑盒在简单版本中的定位 行内元素之间的距离。 为第 1 个元素的右边距加上第二 元素的左边距的长度。 模块级元素之间的距离。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 4 上边距或下边距之中的最大者。 2.3 浮动和定位 一个模块级元素的值域与里面的 浮动内容无关，注意：2 个模块级元素 中，第 1 个模块级元素浮动时，后面的 模块级元素的内容会环绕它，但若是第 2 个模块级元素浮动时，第 1 个元素是 没有任何变化的，即不会环绕第 2 个浮 动的模块级元素的。多模块情况类似。 2.4 边距的应用 当边距的值加上子模块的高度大 于模块的高度值时，浏览器会随之变大， 使之能够让子元素的下边距有足够的距 离以及父元素的下内边距。 而 FF 就不会变了，它能够让父 元素的高度和它一样，而这时父元素范 围就比子元素小。 3 模块级元素和行集元素 模块级元素在标准文档流中是单 独的占一行的，而行集元素在标准文档 流中占的是行的一部分，但是当它们完 全脱离标准文档流的时候，就不再具有 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 5 该特性。 模块级元素和行集元素之间是可 以相互改变的，通过 display property， 当 property 值为 block 时，就可以转换 为模块级元素，当 property 值为 inline 时，就可以转换为行集（内联）元素。 4 层的概念 层的作用非常简单，通常情况下， 可以通过鼠标制作一个层，能够将它放 在网页随意的地方，在层里面可以输入 文本，插入图片或者是其他内容。层就 像平常用的一张纸或者一个容器，能够 在里面放置想要放置的内容，并且多个 层可以互相堆叠上来，形成平面到空间 的拓展延伸。 5 图像和文本 众所周知，要想随随便便地在网 页中任意放置图片和文本是一件非常麻 烦的事情，大多数情况下，很多人喜欢 用表格来限定范围，但是这样做的效果 并不怎么好，因为随着用户环境的变化， 最后得出的效果也随之改变。必须注意 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 6 以下几个要点。 5.1 text 的取值范围 lem 的含义是 CSS 里面的相对长 度单位，它的默认值是 16px。表示的长 度是其父元素中字母 m 的标准宽度， lex 则表示小写字母 X 的高度，这两者 形态相近，但是含义却不同，要注意。 5.2 行高（height） （1）行高（height）的定义是 2 行文本之间的距离，如果有下划线的话， 那么下划线就作为距离的起始位置来测 算。 （2）行高（height）实际上可用没 有单位的数字来表示。 5.3 字母大小写转换 可以用来指定字母的大小写，不 过，基本是在英文的环境下进行的。 5.4 文本装饰效果 文字修饰属性规定添加到文本的 修饰。 5.5 首段缩进和 text 对齐 （1）段落水平对齐：text- align。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 7 （2）段落首行缩进：如果是中 文情况下的网页，单位设置为 2 个就可 以。 5.6 段落的 vertical-align 现在的浏览器里面，垂直缩进应 用范围比较小，基本在其他地方无法应 用，除了在单元格中可以用到。 5.7 image 的格式 （1）如何正确地定位背景图像， 可以根据它的水平位置和垂直位置的交 叉来定义。如果说只有一个数字的话， 那么它的默认值是居中。除此之外，平 铺的起始点也和它有关，除了使用上下 左右外，还可以用一般参照物的相对数 值来指定，或者是一个真实的数字，比 如 16PX，它的左边距和上边距用数字 来表示。 （2）background- attachment：fixed 可以让背景图片在拉 动文字的时候保持不动，在这种情况下 只有文本在动。 （3）图像的水 平方式：图片的水平方式必须通过由其 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 8 父像素来得到这个效果，但是垂直对齐 可以直接设置，在这一点上和文本是相 反的。 6 Link and navigation 在利用 div+css 制作网页的过程 中，还有一类经常会用到的，那就是链 接与导航。 6.1 伪类 （1）声明的顺序。首先是 a：link，其次是 hour。 （2）botton-link。我们在上网点 击某个新闻的，或者在设计网页的时候 发现默认情况下 botton-iink 是某种颜色、 某种状态，但是当执行了某个动作，比 如用鼠标经过该按钮，或者按下该按钮， 该按钮的图案或者颜色就会产生变化。 高度（width）和宽度（height） property。这里必须说明火狐对 A 的支 持度不是很高。 6.2 项目变化 （1）这里可以用来指定无序项 目编号和有序项目标号。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 9 （2）项目编号可以用图片或者 其他图标来代替。 6.3 简单菜单导航 在做简单菜单导航的时候，要注 意版本的不同导致的特效不同，比如微 软浏览器就对鼠标经过范围有一些界定。 7 CSS+DIV 布局 为什么要学习 CSS+DIV，简单 来说就是利用网页中的标签来进行 CSS 布局排版。例举其中的左中右版式： （1）左右模块用绝对定位，并 且固定模块宽度，而中间模块不设置宽 度，自动调整宽度，但是必须将它的 paddingleft 和 padding-right 分别设置为 左右模块宽度。 （2）当有页脚时，把一整个模 块内容模块放到一个模块中，接着使得 正文的 bgcolor 和右板块的 bgcolor 一样， 再让一个图片的宽度数值和左边一样， 颜色与 left-bgcolor 一样的模块，做 #container 的 bg-image，如此反复即可。 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 10 8 一些要点 （1）DIV 标签用来改变对象的 像素。 （2）经常用图片来代替模块里 的标题文本，先把标题文本隐藏，再把 代替图片设置为模块的背景图片。若是 横向的图片，一般可以把包含标题文本 隐藏，再设置相应父元素的宽度和高度 及外边距和内边距，之后设置父元素的 背景图片为代替图片。 （3）如果有 2 个模块，第 1 个 设