中设置"height:100%;"，但发现完全没有预想的自适应高度 效果经过┅番尝试后，我只好给每个 div 一个绝对高度:"height:1000px;"并且随着内容的增加，需要不断修正这个值难道没有办法自适应高度了吗？随着阿捷自己学習的深入发现一个变通的解决办法，实际上根本不需要设置 100%我们已 经被 table 思维禁锢太深了，这个办法在下一节的学习中详细介绍

如果峩们想在 3 列布局的最后加一行页脚，放版权之类的信息就遇到必须对齐 3 列底部的问题。在 table 布局中我们用 大表格嵌套小表格的法，可以佷便对齐三列；而用 div 布局三列独立分散，内容高低不同就很难对齐。其实我们完 全可以嵌套 div把三列放进一个 DIV 中，就做到了底部对齐下面是实现例子(白色背景框模拟一个页面)：

景颜色用的是#main 的背景色

这里是主要内容，根据内容自动适应高度

这里是主要内容根据内容洎动适应高度

这里是主要内容，根据内容自动适应高度

三个层当#content 的内容增加，

#content 的高度就会增高同时#mainbox 的高度也会撑开，#footer 层就自动下移這样就实现了高度的自适应。 是浮动在#menu 层的左面"FLOAT: left;"这是浮动法定位，还可以采用绝对定位来实现这样的效果

这个法存在另一个问题，就昰侧列#sidebar 的背景无法百分之百一般的解决办法就是用 body 的背景色来填充满。(不能 好了主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。如果你希望尝试其他布局推荐看看以下文章:

以上代码现在应该容易理解。先在 CSS 定义了一个 logo 的层然后在页面中调用它。需要说明嘚是为了使网页有更好的易 用性，web 标准要求大家给所有的、属于正式内容的图片加一个 alt 属性。这个 alt 属性是用来说明图片的作用(当图片鈈 能显示的时候就显示替换文字)所以不要只写成无意义的图片名称。

1.不用表格的菜单(纵向)

我们先来看菜单的最终效果：

通常法我们至少嵌套 2 层表格来实现这样的菜单间隔线采用在 td 中设置背景色并插入 1px 高的透明 GIF 图片实现；背景 色的交替效果采用 td 的 onmouseover 事件实现。但查看本菜单嘚页面代码你会看到只有如下几句：

没有用任何 table,而用的是无序列<li>，整个菜单的效果实现的秘密完全在于

(1)首先定义了 menu 层的主要样式:

(2)其次定義无序列表的样式：

说明：这里用的是 id 选择器的派生法定义(参考第 7 天：CSS 入门的介绍)了在 menu

LIST-STYLE-TYPE: none 一句表示不采用无序列表的默认样式即：不显示尛圆点（我们后面用自己的图标来代替小圆点）。

8px"指定图标的位置是距左边 2px距上边 8px。这一句也可以拆分

ok不用表格的菜单就这样实现了。大家可以明显感觉到原来写在 HTML 里的表现样式全部剥离放到 CSS 文件里去了。页面 代码节约了大半通过 CSS 要修改菜单样式就很简单了。

2.不用表格的菜单(横向)

上面是纵向的菜单,如果要显示横向菜单用 li 也可以吗？当然是可以的下面给出代码，效果就在本页顶部:

以上代码不逐一汾析了横向菜单的关键在于：定义<li>样式时的"FLOAT: left;"语句。另外注意 UL 定义中的 DISPLAY:inline; 一句表示将 li 强制作为内联对象呈递从对象中删除行，通俗讲就是 li 鈈换行实现横向排列。你也可以象例子中定义每个子菜单的宽度控制菜单的间隔。好了你也可以动手试试，用 li 实现各种各样的菜单樣式 Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行利用这个原理可以实现单个无序列表的 2 列或者 3 列排版， 这是原来 HTML 很难实現的

辛苦了好多天，我们努力学习使用 XHTML+CSS 来重新设计我们的网站那么我们如何知道自己制作的页面真的符合 web 标准？

W3C 和一些志愿者网站提供了在线校验程序来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息这些校验 非常有用，是我调试页面第一步要做的倳情

校验失败，会显示更多校验选项和错误信息如图：

其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的比洳忘记了一个</li>其他<li>标签都会报错，所以不要看到一堆的错误害怕通常解决了一个错误，其他的错误也都没有了如果你的页面通过

上放置这么一个图标： 代码如下：

校验式:网址校验、文件上传校验、直接贴入代码校验校验成功，会显示"恭喜恭喜此文档已经通过样式表校驗! ",hoho,校验信息支持中文噢。如图：

CSS2 校验常见错误原因对照表

--W3C 建议字体定义的时候最后以一个 类别的字体结束，例如"sans-serif"以保证在不同操作系统下，网页字體都能被显示

--表示在代码中有非标准属性或值，校验程 序无法判断和提供相应的警告信息

同样，通过检验后可以放置一个 CSS 校验通过圖标，代码如下：

最近,经常有朋友问我一些工作中遇到的 CSS 问题他们总是不能很好的控制 CSS，影响 CSS 的效率发挥我来分析总结一下 错误所在，帮助大家更加容易使用 CSS

本文总结了我开始使用 CSS 布局法以来所有的技巧和兼容案，我愿意把这些与你分享我会重点解释一些新手容易犯的

错误(包括我自己也犯过的)，如果你已经是 CSS 高手这些经验技巧可能已经都知道，如果你有更多的希望可以帮我补充。

使用缩写可以幫助减少你 CSS 文件的大小更加容易阅读。css 缩写的主要规则请参看《常用 css 缩写语法总结》这里就

二.明确定义单位，除非值为 0

忘记定义尺寸嘚单位是 CSS 新手普遍的错误在 HTML 中你可以只写 width="100"，但是在 CSS 中你必须给一个准确的单位， 比如：width:100px width:100em只有两个例外情况可以不定义单位：行高和 0 徝。除此以外其他值都必须紧跟单位，注意不要在数值和单位之间加空格。

当在 XHTML 中使用 CSSCSS 里定义的元素名称是区分大小写的。为了避免这种错误我建议所有的定义名称都采用小写。 class 和 id 的值在 HTML 和 XHTML 中也是区分大小写的如果你一定要大小写混合写，请仔细确认你在 CSS 的定义囷 XHTML

当你写给一个元素定义 class 或者 id你可以省略前面的元素限定，因为 ID 在一个页面里是唯一的而 clas s 可以在页面 中多次使用。你限定某个元素毫無意义例如：

这样可以节省一些字节。

transparent但是在不同的浏览器默认值可能不同。如果怕有 冲突可以在样式表一开始就先定义所有元素嘚 margin 和 padding 值都为

六.不需要重复定义可继承的值

CSS 中，子元素自动继承父元素的属性值象颜色、字体等，已经在父元素中定义过的在子元素中鈳以直接继承，不需要 重复定义但是要注意，浏览器可能用一些默认值覆盖你的定义

七.最近优先原则 如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先例如有这么一段代码

一个标签可以同时定义多个 class。例如：我们先定义两个样式第一个样式背景为#666；第二个样式有 10 px 的边框。

在页面代码中我们可以这样调用

这样最终的显示效果是这个 div 既有#666 的背景，也有 10px 的边框是的，这样做是可以的你可以尝试一下。

CSS 初学者不知道使用子选择器是影响他们效率的原因之一子选择器可以帮助你节约大量的 class 定义。我们来看下面这 段代碼：

这段代码的 CSS 定义是：

你可以用下面的法替代上面的代码

用子选择器可以使你的代码和 CSS 更加简洁、更加容易阅读 十.不需要给背景图片蕗径加引号

如果你加了引号，反而会引起一些浏览器的错误

当一些元素类型、class 或者 id 都有共同的一些属性，你就可以使用组选择器来避免哆次的重复定义这可以节省不少字节。 例如：定义所有标题的字体、颜色和 margin你可以这样写：

如果在使用时，有个别元素需要定义独立樣式你可以再加上新的定义，可以覆盖老的定义例如：

十二.用正确的顺序指定链接的样式

当你用 CSS 来定义链接的多个状态样式时，要注意它们书写的顺序正确的顺序是：:link :visited :hover :active。抽取 如果你的用户需要用键盘来控制需要知道当前链接的焦点，你还可以定义:focus 属性:focus 属性的效果吔取决与你书写 的位置，如果你希望聚焦元素显示:hover 效果你就把:focus

一个非常常见的 CSS 问题，定位使用浮动的时候下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围通常的解决办法是在浮动层后面添加一个额外元素，例如一个 div 或者一个 br并且定义它的样式为 clear: both。这个办 法有一点牵强幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats

上面 2 种法可以很好解决浮动超出的问题但是如果当你真的需要对层或者层里的对象进行 clear 的时候怎么办？一种简 单的法就是用 overflow floats》中被广泛讨论

上面那一种 clear 法更适合你，要看具体的情况这里不再展开论述。另外关于 float 的应用一些优秀的文章已经说得

这是一个简单的技巧，但是值得再说一遍因为我看见太多的新手问题都是问这个：CSS 如何横向居中？你需要定义元素的 宽并且定义横向的 margin，如果你的布局包含在一个层(容器)中就象这样：

你可以这样定义使它横向居中：

但是 IE5/Win 不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用 text-align 属性就象这样：

的所有元素居中(其他浏览器只是将文字居中) ，苐二个

因为老版本浏览器不支持 CSS一个通常的做法是使用@import 技巧来把 CSS 隐藏起来。例如：

然而这个法对 IE4 不起作用，这让我很是头疼了一阵子后来我用这样的写法：

这样就可以在 IE4 中也隐藏 CSS 了，呵呵还节省了 5 个字节呢。想了解@import 语法的详细说明可以看这里《centricle’s

十六.针对 IE 的优化

囿些时候，你需要对 IE 浏览器的 bug 定义一些特别的规则这里有太多的 CSS 技巧(hacks)，我只使用其中的两种法不 管微软在即将发布的 IE7 beta 版里是否更好的支持 CSS，这两种法都是最安全的

浏览器可以理解(对其他浏览器都隐藏)

隐藏，你可以使用"反斜线"技巧：

另外一种法我认为比 CSS Hacks 更加经得起考驗就是采用微软的私有属性条件注释(conditional comments)。 用这个法你可以给 IE 单独定义一些样式而不影响主样式表的定义。就象这样：

十七.调试技巧：层有哆大

当调试 CSS 发生错误，你就要象排版工人逐行分析 CSS 代码。我通常在出问题的层上定义一个背景颜色这样就能很明显 看到层占据多大涳间。有些人建议用 border一般情况也是可以的，但问题是有时候 border 会增加元素的尺寸，border-top

另外一个经常出问题的属性是 outlineoutline 看起来象 boeder，但不会影響元素的尺寸或者位置只有少数浏览器支持

十八.CSS 代码书写样式

在写 CSS 代码的时候，对于缩进、断行、空格每个人有每个人的书写习惯。茬经过不断实践后我决定采用下面这样的书写样式：

当使用联合定义时，我通常将每个选择器单独写一行这样便在 CSS 文件中找到它们。茬最后一个选择器和大括号{之间加 一个空格每个定义也单独写一行，分号直接在属性值后不要加空格。 我习惯在每个属性值后面都加汾号虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记 补上分号而产生错误所以还是都加比较好。

最后关闭的大括号}单独写一行。

做 Web 开发的人员一定都会面临一个共同的难题那就是打印。的确相对于 Windows 桌面应用程序来讲，Web 应用程序 的打印有种种限制技术人员在项目开发过程中经常会遇到用户这样或那样的需求. 做过桌面应用开发的人都会非常熟悉水 晶报表、Active Report 之类嘚报表控件，它们不仅有简单灵活的设计界面更具有非常强大的报表功能，能满足各种报表 的打印需求而 Web 应用则因为其特殊的呈现式，只能寻求其他的解决案现在我们来分析一下目前已经成形的 Web

现有的 Web 打印控制技术分成几种案： 一．自定义控件完成打印

利用第三控件實现打印

自定义控件式就是利用 VB 或 VC 等工具生成 COM 组件，用定义好的打印格式来分析打印源文件从而实现打印只有 将生成的组件下载并注册箌客户机上，才能实现在客户端的

难点主要是定义打印格式、如何来分析打印源文件现有的比较好的法是利用 XML 技术来全面的解决问题，利用 XML 可 以非常容易地定义打印目标的文本、表格等内容的格式

但对程序员的开发要求高，难度比较大

WebBrowser 是 IE 内置的浏览器控件，无需用户丅载本文档所讨论的是有关 IE6.0 版本 的 WebBrowser 控件技术内容。 与其相关的技术要求有：打印文档的生成、页面设置、打印操作的实现等几个环节

（一）、打印文档的生成

下开发应用使用的语法为 JScript 的语法，由 于它和 JavaScript 几乎没有什么区别所以也可以称其为 JavaScript（下面简写为 JS）。一般情况下主要使用 JS 来实

现 DOM 文档的分析，DOM 为微软提出的一种 Web 文档模型主要用来实现 Web 脚本编程。

利用 JS 可以分析源页面的内容将欲打印的页面元素提取出来，实现打印通过分析源文档的内容，可以生成打印目 标文档

优点：客户端独立完成打印目标文档的生成，减轻服务器负荷；缺点：源文档的分析操作复杂并且源文档中的打印内容要有约定；

2、服务器端程序式 服务器端程序式，主要是利用后台代码从数据库中讀取打印源生成打印目标文档。当的页面生成时还应适当考虑

使用 CSS 来实现强制分页控制。

优点：可以生成内容非常的丰富的打印目标攵档目标文档的内容的可控性强。由于打印内容是从数据库中获取的所 以生成操作相对简单；

缺点：服务器端负载比较大；

（二）、頁面设置 页面设置主要是指设置打印文档的页边距、页眉、页脚、纸张等内容。页面设置将直接影响到打印文档版面的生成效果

所以它囷打印文档的生成有着密切的关系。比如：表格的 行数、大小、位置、字体的大小等

现有的技术是利用 IE6.0 内置的打印模板式来控制页面设置，其可以对打印目标文档产生非常大的影响打印模板可以控制页边距、页眉、页脚、奇偶页等内容，并可以将用户的设置取得还可鉯将设置发送到服务器端。

打印模板技术可以自定预览窗口和打印格式最大限度地影响目标文档和打印效果。

（三）、打印操作的实现

此功能的实现主要是利用 WebBrowser 控件的函数接口来实现打印、打印预览（默认的）、页面设置（默认的）

3、一个实例项目采用的打印案 服务器端程序式、打印预览接口调用，下面为例 主要参考项目中的： pageErrorPrint.aspx.vb 文件

打印页 HTML 源中的预览控制

'每个表格中的记录数量

'创建一个符合打印要求嘚表格

'将表头添加到此表格中

'添加表格控件到页面中

'在页面中添加一个换行符

'添加表格控件到页面中

'功能:添加页的换行符

二、利用 IE 自身打茚

这种式比较简单，也常用的打印式只需要将报表页面设计好，用户通过 IE 菜单中的打印功能完成打印优点是简 单，容易实现缺点是鈈灵活，不能控制分页不能控制好页眉和页脚。

这种式需要将页面导出成 Office 文档或 pdf,最低的要求是客户端已经安装用以打开 Word、Excel 或 Pdf 文档的软件 这种式可以通过水晶报表组件或其他一些第三控件非常容易地实现。导出成 Pdf 形式后打印质量和效果都很好导出成

Word 或 Excel 后用户可以自定义咑印的内容和格式。 总之现有的打印案各有所长，在开发过程中应根据用户的需求作选择利用 IE 打印简单，容易实现在用户需求简

单戓打印内容较少的情况下采用此案比较适宜。利用自定义控件打印可以实现完全自定义但需要较高的技术要求和开发周期。利用导出的式则可以满足用户需要一点自定义或打印内容有多页的需求

1、控制"纵打"、横打”和“页面的边距。

3、ASP 页面打印时如何去掉页面底部的路徑和顶端的页码编号

（1）ie 的文件-〉页面设置-〉讲里面的页眉和页脚里面的东西都去掉打印就不出来了。

'//设置网页打印的页眉页脚为空

'//设置网页打印的页眉页脚为默认值

???.%> //与数据库进行交互

在网页制作中有许多的术语，例如：CSS、HTML、DHTML、XHTML  等等在下面的文章中我们

将会用箌一些有关于 HTML 的基本知识，而在你学习这篇入门教程之前请确定你已经具有了一定的

基础。下面我们就开始一步一步使用 DIV+CSS 进行网页布局設计吧

所有的设计第一步就是构思，构思好了一般来说还需要用PhotoShop

等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图

下面，我们需要根据构思图来规划一下页面的布局仔细分析一下该图，我们不难发现图片大致分

1、顶部部分，其Φ又包括了

2、内容部分又可分为侧边栏、主体内容；

3、底部包括一些版权信息。有了以上的分析我们就可以很容易的布局了，我们设計层如下图:

根据上图我再画了一个实际的页面布局图，说明一下层的嵌套关系这样理解起来就会更简单了。

HTML 元素具体我就不说明了*/

臸此，页面布局与规划已经完成接下来我们要做的就是开始书写 CSS。接下来我们在桌面新建一个文件夹命名为“DIV+CSS 布局练习”，在文件夹丅新建两个空的记事本文

的基本结构将其命名为 index.htm，另一个记事本文档则命名为

DIV 的基本结构代码如下：

为了使以后阅读代码更简易，我們应该添加相关注释接下来打开

把以上文件保存，用浏览器打开这时我们已经可以看到基础结构了，这个就是页面的框架了

关于以仩 CSS 的说明（详细请参考 CSS2.0 中文手册，网上有下载）：

1、请养成良好的注释习惯这是非常重要的；

元素，页面中所有的内容都应该写在这标簽对之内我就不多说了；

3、讲解一些常用的 CSS 代码的含义：

也使用了缩写，完整的应该是：

 左你也可以书写为

以上样式说明 body 部分对上右丅左边距为 0 像素，如果使用 auto 则是自动调整边距

另外还有以下几种写法：

说明上下边距为 0px，左右为自动调整；

我们以后将使用到的 padding 属性和 囿许多相似之处他们的参数是一样的，只不过各自表示的含义不相同margin 是外部距离，而 padding 则是内部距离

文字对齐式，可以设置为左、右、中这里我将它设置为居中对齐。

设置背景色为白色这里颜色使用了缩写，完整的应该是 可以用来给指定的层填充背景色、背景图片以后我们将用到如下格式： 表示：使用#CCC(灰度色)填充整个层，使用

表示图片位于当前层的左上端no-repeat 表示仅显示图片大小而不填充满整个层。

用于定位背景图片分别表示 上 /  右

表示 X 座标为 20 像素，Y 座标为 100 像素的精确定位；

分别表示 填充满整个层 /  不填充 /

分别表示高度(px)、宽度(px)、字体顏色(HTML

4、如何使页面居中大家将代码保存后可以看到，整个页面是居中显示的那么究竟是什么原因使得页面居中显示呢？

按照前面的说奣可以知道，表示上下边距为 0左右为自动，因此该层就会自动居中了 如果要让页面居左，则取消掉 auto 值就可以了因为默认就是居左顯示的。

5、这里我只介绍这些常用的 CSS 属性了其他的请参看 CSS2.0 中文手册。 当我们写好了页面大致的 DIV 结构后我们就可以开始细致地对每一个蔀分进行制作了。

在上一章中我们写入了一些样式那些样式是为了预览结构而写入的，我们把 中的样式全部清除掉重新写入以下样式玳码：

这两项分别是控制页面中超链接的样式，具体我就不说明了请大家参阅手册。

指定整个页面的显示区域

800 像素，这里根据实际所需设定

auto，则是页面上、下边距为 10 个像素并且居中显示。 上一章中我们讲过对层的 margin 属性的左右边距设置为 auto

接下来，我们开始制作 TOP 部分TOP 部分包括了 r，首先我们要做的就是对设计好的图片进行切片以下是在

 部分切片为两部分，第一部分包括了 色这里我于是将这一部分保存为 GIF 格式，调色板选择为精确选择 Alpha 透明度，色版为白色(此 处颜色应与背景色相同)导出为

到这里，有的朋友就说了* 格式？使用 JPEG 不是哽好吗

格式的图片文件更小，这样能使页面载入的速度更快当然使用此格式之前必须确定图片并 没有使用太多的颜色，当我们使用了 GIF 格式时从肉眼上并不能看出图片有什么太大的变化，因此这是可行的

r 部分还能使用 GIF 格式吗？

答案是不能因为 Banner 部分是一个细致的图片，如果使用 GIF 格式颜色会有太大的损失所以必须 使用 JPEG 格式，将文件导出为

 合理的切片是非常之重要的因为切片的法正确与否决定了 书写嘚简易程度以及页面载入速

切好片后，我们还需要对 TOP 部分进行分析并将 DIV 结构写入

为什么要这么写呢因为对菜单使用列表<li>形式，可以在以後便对菜单定制样式

而为什么要添加以下代码呢？

插入这一段代码是可以便地对菜单选项之间插入一些分隔样式例如预览图中的竖线汾隔。然后我们在 css.css 中再写入以下样式：

给页面头部分加入一个背景图片 LOGO并且不作填充。这里我们没有指定 层的高度，为什么不指定呢

因为 header 层中还有菜单和 项，所以层的高度暂时是未知的而层的属性又可以让层根据内容 自动设定调整，因此我们并不需要指定高度

开始此节的学习前，请确认你已经参照之前的几节内容写入了 文件中这一节我将告诉大家如何用列表<li>来制作菜单。

元素大家自己去参考相關的内容吧

它们最主要的作用就是在 HTML 中以列表的形式来显示一些信息。

还有一点需要大家一定要分清楚的当在 CSS 对应的设置语法则是

中對应的设置语法是.divID。

中对应的设置语法应该是#divID

{}同样，如果是包含在 {}这一点希望大家要分清楚了。

中的一切元素都是可以定义的例如 Φ设置它们，则直接写入元素的名称加上一对大括号{}就可以了所有的

按照上面的介绍，我们先在

:none这一句是取消列表前点，因为我们不需要这些点

的缩进，这样做可以使所有的列表内容都不缩进

 的左右是让内容都在同一行显示，因此使用了浮动属性(float) 到这一步，建议夶家先保存预览一下效果我们再添加下面的内容，效果如下：

这时列表内容是排列在一行，我们在#menu

的作用就是让列表内容之间产生一個 20 像素的距离(左：10px右：10px)，预览的效果

现在雏形已经出来了，我们再来固定菜单的位置把代码改成如下：

使得菜单位于页面右侧*/

这时，位置已经确定了可是构思图中，菜单选项之间还有一条竖线怎么办呢？

别忘了我们早就已经留好了一个空的<li 按照上面说的法，我們再添加以下代码：

保存预览一下竖线是否已经出来了？关于这段代码就不多讲了应该是很容易理解的。

不过菜单选项的文字却在頂部，我们再修改成以下代码：

大家可以去参阅一下手册我就不多讲了。

效果基本上已经实现了剩下的就是修改菜单的超链接样式，茬

这个也不多说了没什么好说的了，最后的效果如下：

这一节里面主要就是想告诉大家如何使用好

首先，如果你曾用过 table 制作网页你僦应该知道，如果要在表格中绘制一条虚线该如何做那需要 制作一个很小的图片来填充，其实我们还有更简单的办法只要在<td></td>中加入这麼一段就可以了，

大家可以再次参考手册然后你就能明白 多效果来，实线、虚线、双线、阴影线等等

以上代码便可以实现设计草图中嘚

/*画一条浅灰色实线*/

很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源使得页面载入速度

clear:both，表示清除左、右所有的浮動在接下来的布局中我们还会用这个属性： 元素设置了浮动，如果不清除则会影响

以上是页面主体部分我们在

/*不允许左侧存在浮动*/

/*超絀宽度部分隐藏*/