1、CSS+DIV网页设计初探 摘要：新的 CSS+DIV 技术更符合 Web2.0 标准，真正使到网页结构和表现分离，使后期维护更方便。该文从 CSS的基本概念、书写格式、盒子模型、定位等方面对 CSS+DIV 技术进行了分析。 总结大全 关键词： CSS； DIV；盒子模式；定位 一、 CSS 的基本概念 CSS（层叠样式表），是控制网页样式并允许将样式与网页内容分离的一种标签性语言。 在 html网页中，各种标签以及位于标签中间的所有内容，组成了整个页面。 例 1： CSS 标签 该句代码的功能是将文字 “CSS 标签 ” 以段落的格式显示在网页中。如果希望标题变成蓝色、黑体，则要引入标签，
2、如下所示。 例 2： CSS 标签 总结大全 虽然看上去并不十分麻烦，但是当页面的内容是整篇文章时，就十分麻烦。但引入 CSS 对其中的 标签进行设置，就完全不同。 例 3： p font-family:幼圆 ; color:red; CSS 标签 1 CSS标签 2 其显示效果与例 2完全一样。页面中最开始的是 标签，以及其中对 标签的定义。 二、 CSS 的基本写法 1. 在 body 内实现 将 css写在具体标签中是最直接的一种，它对 html的标签使用 style属性，然后将 CSS 代码写在其中。 例 4： css 入门 将 css 写在具体标签中是最简单的，但要为每一个标签设置
3、style 属 性，其成本较高，而且网页容易过胖。因此不推荐使用。 2. 在 head 内实现 在 head内实现就是将 CSS写在与之间，并用标签进行声明。如例 3所示。所有 CSS 代码被集中在了一起，方便后期维护，页面也大大瘦身。 3. 在文件外的调用 CSS 单独成立文件。将 html 页面与 CSS 样式分离为两个或多个文件，实现了页面与 CSS 代码的分离，使得前期制作和后期维护都十分方便。 例 5： 首先建立 CSS 文件 1.css p color:#FF00FF; text-decoration:underline; 然后在网页中链接 1.css 页面标题 紫色、粗体的效果
4、1 开题报告 同一个 CSS 文件可以链接到整个网站的所有页面中，使得网站整体风格统一。 三、 Div 的基本概念 与之间相当于一个盒子，可以容纳段落、标题、表格、图片等各种 HTML元素。因此，与中的内容视为一个独立的对象，受 CSS 的控制。 例 6：这是一个 div 的标记。 制作了一个宽 192 像素和高 300 像素的黑色边 框区块，内部有两个元素，分别为标题和内容。同时进行文字效果和边框的相应设置。 四、 Div 排版 1. 盒子模型 所有页面中的元素都可以看成是一个盒子。只是这个盒子有边框和距离等参数，来调节盒子的位置。 一个盒子的实际宽度或高度是由内容 +填充 +边框 +边界组
5、成的。可以利用 CSS控制 content的大小，还可以分别设定 4条边各自的填充、边框、边界。 2. 元素的定位 网页中的各种元素都必须有自己合理的位置，从而搭建出整个页面的结构。主要有 position(位置 )、 float（浮动）和 z-index（ Z 轴）三个参数。 * Float(浮动 )： Float 属性的值很简单，可以设置为 left、 right 或者默认值 none。当设置了元素向左或者向右浮动时，元素会向其父元素的左侧或右侧靠紧。 作文 * Position 位置 Position 从字面意思上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。 P
6、osition 属性一共有 4 个值，分别为static、 absolute、 relative、 fixed。 static 为默认值，表示块保持在原来应该在的位置上，即该值没有任何移动的效果。 Absolute，它表示绝对位置。当将子块的 position属性值设置为 absolute时，子块己经不再从属于父块。 Relative 值，此时子块是相对于其父块来进行定位的，同样配合 top right bottom 和 left 这 4 个属性来使用。 * Z-index(Z 轴 )：用于调整定位时重叠块的上下位置， Z 轴值大的页面位于其值小的上方。 参考文献： 温谦 .CSS 设计彻底研究 M. 北京 :人民邮电出版社 ,2008. 曾顺 .精通 CSS+DIV 网页样式与布局 M. 北京 :人民邮电出版社 ,2007. 唐国辉 .彻底弄懂 CSS 盒子模型 . 蓝色理想网站 ,2007. 郑宁宁 .浅析 DIV CSS 网页设计技术 . 山东省农业管理干部学院学报 ,2008. 作者简介：孙静，女，在职研究生，初级，主攻网页设计与制作。
