1、1div+css 基础教程第一节 了解 div+css一、什么是 div+cssdiv 元素是 html(超文本 语言)中的一个元素，是标签，用来为html 文档内大块（block-level）的内容提供结构和背景的元素。div 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由 div 标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。css 是英语 cascading style sheets（层叠样式表单）的缩写，它是一种用来表现 html 或 xml 等文件式样的计算机语言。div+css 是网站 标准（或称“web 标准” ）中常用术语之一，通
2、常为了说明与 html 网页设计语言中的表格（table）定位方式的区别，因为xhtml 网站设计标准中，不再使用表格定位技术，而是采用 div+css 的方式实现各种定位。html 语言自 html4.01 以来，不再发布新版本，原因就在于 html语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的 html 标记，这显然有碍于 html 网页的兼容性。于是 w3c 组织进而重新从 sgml 中获取营养，随后，发布了 xml，xml 是一种比 html 更加严 格的标记语言，全称是可扩展标记语言。但是 xml 过于复杂，且当前的大部分浏览器都不
3、完全支持 xml。于是 xhtml 这种语言就派上了用场，xhtml 语言就是一种可以将 html 语言标准化，用 xhtml 语言重写后的 html 页面可以应用2许多 xml 应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。二、div+css 的优势1、符合 w3c 标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。2、对浏览者和浏览器更具亲和力。由于 css 富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 这样就支持浏览器的向后兼容，也就是无论未来的浏览器大战， 胜利的是什么，您的网站都能很好的兼容。3、使页面载入得更快。页
4、面体积变小， 浏览速度变快，由于将大部分页面代码写在了 css 当中，使得页面体 积容量变得更小。相对于表格嵌套的方式，div+css 将页面独立成更多的区域，在打开页面的时候，逐层加 载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。4、保持视觉的一致性。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用 div+css 的制作方法，将所有页面，或所有区域统一用 css 文件控制，就避免了不同区域或不同页面体现出的效果偏差。5、修改设计时更有效率。由于使用了 div+css 制作方法，使内容和结构分离，在修改页面的时候更加容易省时。根据区
5、域内容标记，到 css 里找到相应的 id，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，在团队开发中更容易分工合作而减少相互关联性。6、搜索引擎更加友好。相对与传统的 table, 3采用 div+css 技术的网页，由于将大部分的 html 代码和内容样式写入了 css 文件中，这就使得网页中代码更加 简洁，正文部分更为突出明显，便于被搜索引擎采集收录。三、cssdiv 网站设计的缺陷尽管 div+css 具有一定的优势，不过现阶段 css+div 网站建设存在的问题也比较明显，主要表现在：1、对于 css 的高度依赖使得网页设计变得比 较复杂。相对于html4.0 中的表
6、格布局（ table），css+div 尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了 xhtml 网站设计语言的普及应用。2、css 文件异常将影响整个网站的正常浏览 。css 网站制作的设计元素通常放在一个或几个外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果 css 文件调用出现异常，那么整个网站将 变得惨不忍睹。3、对于 css 网站设计的浏览器兼容性问题比 较突出。虽然说div+css 解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常， css+div 还 有待于各个浏览器厂商的进一步支持
7、。4、css+div 对搜索引擎优化与否取决于网页设计的专业水平而不是 css+div 本身。css+div 网页设计并不能保 证网页对搜索引擎的优化，甚至不能保证一定比 html 网站有更简洁的代码设计。因为对于搜索引擎而言，网站结构、内容、相关网站 链接等因素始终是网站优化最重要的指标。如何更有效、更合理的运用 web2.0 设计标准，这需要很长时间4的学习和锻炼。而如何将 div+css 运用的更好，需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。第二节 css 布局标签一、什么时候应该用 div?div 元素是一个标签，但多层嵌套的 div 会严重影响代码的可阅读
8、性。什么 时候应该用 div 虽然没有什么硬性的规定，但 div 更适用于大体框架的定位。例如我们要定义一块头部的区域，一般会这样定义一个 div：articlestopicsaboutcontactcontributefeedno. 214这个例子定义了最上面的导航(ul 部分)，左 边的 logo 和 no.214的标记.二、最常用的布局标签5h1：这个标签表达的意思就如同它原先的作用一样明显(大标题) 。h2:使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用 pul：这个标签很多情况是用来定义导航部分的，当然也可以用 ol来代替
9、，但导航连接没有什么顺序之分,所以还是用 ul 来的比较确切。b:这个已经不再推荐使用的标签，但因为短小，在布局上却能带来不少的方便，有些时候(比如细小地方的布局定 义)还是不错的选择。css 放入网页的方式，可以在 html 文件内直接宣告样式，也可以在外部连接套用。外部连接套用时，所有的 css 样式都存在另外一个文件中，文件名称为.css。第三节 页面布局设计 在网页制作设计中，第一步就是构思，可以用 photoshop 或fireworks 等 图片处理软 件将需要制作的页面布局简单的构画出来，然后根据布局图设计。 一般来说，页面包括：顶部部分，其中又包括了 logo、menu 和一幅
10、 banner 图 片；内容部分，又可分为侧边栏、主体内容；底部，包括一些版权信息。可以命名为：顶部层 header、内容 层 pagebody、侧边栏层 sidebar、主体内容层 mainbody、底部层 footer。层的嵌套关系 div结构设计为：body /*这是一个 html元素#container /*页面层容器*/ #header /*页面头部*/6#pagebody /*页面主体*/ #sidebar /*侧边栏*/ #mainbody /*主体内容*/ #footer /*页面底部*/ 接下来就可以书写html代码和 css了。第四节 写入整体层结构与 css 新建一个文件
11、夹，命名为“div+css 布局练习”，在文件夹下新建两个空的记事本文档。将一个记事本文档命名为 index.htm，输入以下内容：无标题文档这是 xhtml 的基本结构。下面，我们在标签对中写入 div 的基本结构，为了使以后阅读代码 更简易，我们添加相关注释：color=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/color将另一个记事本文档命名为 css.css，写入 css 信息，代码如下：7/*基本信息*/body font
12、:12px tahoma;margin:0px;text-align:center;background:#fff;/*页面层容器*/#container width:100%/*页面头部*/#header width:800px;margin:0 auto;height:100px;background:#ffcc99/*页面主体*/#pagebody width:800px;margin:0 auto;height:400px;background:#ccff00/*页面底部*/#footer width:800px;margin:0 auto;height:50px;background
13、:#00ffff把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这 个就是页面的框架了。温馨提示：1、请养成良好的注释习惯，这是非常重要的；2、body 是一个 html 元素，页面中所有的内容都应该写在这标签对之内；3、一些常用的 css 代码的含义：font:12px tahoma；这里使用了缩写，说明字体 为 12 像素大小，字体为 tahoma 格式。完整的代码是：font-size:12px;font-family:tahoma ；margin:0px；使用了缩写，完整的是：margin-top:0px;margin-right:0px;margin-bottom:0p
14、x;margin-left:0px，也可以写成 margin:0px 0px 0px 0px，顺序是 上 / 右 / 下 / 左，还可以书写为 margin:0(缩写)；这 个样 式说明 body 部分对上右下左边 距为 0 像素，如果使用auto 则是自 动调整边距，另外还有以下几种写法：margin:0pxd auto；说明上下边距为 0px，左右为自动调整；以后使用到的 padding 属性和 margin 有许多相似之处，他们的参数是一样的，只不过各自表示的8含义不相同，margin 是外部距离，而 padding 则是内部距离。text-align:center 文字对齐方式，可以设
15、置 为左、右、中，这里设置为居中对齐。background:#fff 设置背景色为白色，这里颜 色使用了缩写，完整的应该是 background:#ffffff。background 可以用来给指定的层填充背景色、背景图片，以后会用到这个格式：background:#ccc:url(bg.gif) top left no-repeat；表示使用#ccc(灰度色)填充整个层，使用 bg.gif 做为背景图片，top left 表示图片位于当前层的左上端，no-repeat 表示仅显示图片大小而不填充满整个层。top/right/bottom/left/center 用于定位背景图片，分别表示上
16、/ 右 / 下 / 左 / 中；还可以使用 background:url(bg.gif) 20px 100px;表示 x 座标为 20 像素， y 座标为 100 像素的精确定位；repeat/no-repeat/repeat-x/repeat-y 分 别表示 填充 满整个层 / 不填充 / 沿 x 轴填充 / 沿 y 轴填充。height / width / color 分别表示高度 (px)、宽度(px)、字体颜色(html 色系表) 。4、可以看到，整个页面是居中显示的，因 为我们在#container 中使用了以下属性：margin:0 auto;这个表示上下边距为 0，左右为自动，因
17、此该层就会自动居中了。如果要让页面居左，则取消掉 auto 值就可以了，因为默认就是居左显示的。第五节 页面顶部制作当我们写好了页面大致的 div 结构后，我们就可以开始细致地对9每一个部分进行制作了。我们把 css.css 中的样 式全部清除掉，重新写入以下样式代码：/*基本信息*/body font:12px tahoma;margin:0px;text-align:center;background:#fff;a:link,a:visited font-size:12px;text-decoration:none;a:hover/*页面层容器*/#container width:800p
18、x;margin:10px auto以上样式说明如下：a:link,a:visited font-size:12px;text-decoration:none;a:hover 这两项分别是控制页面中超链接的样式。#container width:800px;margin:10px auto指定整个页面的显示区域。width:800px 指定宽度 为 800 像素，这里根据实际所需设定。margin:10px auto，则是页面上、下边距为 10 个像素，并且居中显示。接下来，开始制作 top 部分，top 部分包括了 logo、菜单和banner，首先在 fw 下对设计好的图片进行切片，第一部
19、分 为 logo 部分，由于 logo 图片并没有太多的颜色，这里我于是将这一部分保存为 gif 格式(这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色)， 调色板选择为精确，选择 alpha 透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为 800px。第二部分为 banner 部分，因为 banner 部分是一个细致的图片，如果使用 gif 格式颜色会有太大的损失，所以必须使用 jpeg 格式，将文件导出为 banner.jpg。10然后我们在 css.css 中再写入以下 样式：/*页面头部*/#header backgrou
20、nd:url(logo.gif) no-repeat这个样式给页面头部分加入一个背景图片 logo，并且不作填充。这里，我们 没有指定 header 层的高度，因为 header 层中还有菜单和banner 项，所以层的高度 暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。下面我们制作菜单，代码如下：首页博客设计相册论坛关于以上、这两个 html 元素主要的作用就是在html 中以列表的形式来 显示一些信息。对菜单使用列表形式，可以在以后方便对菜单定制样式。这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。需要分清楚的是，当在 html 中定义为 id=“divid“时，在 css 对应的设置语法则是#divid存，如果在 html 中定义为 class=“divid“时，则在 css 中对应的设置语法是.divid。如果 id=“divid“这个层中包括了一个， 则这 个 img 在 css 中对应的设置语法应该是
