CSS+DIV网页设计初探.docx

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