" 小李的名字空间是

""，那么当两個文档交换数据时也不会混淆<book>标识，因为它属于不同的名字空间 更通俗的解释是：名字空间就是给文档做一个标记，告诉别人这个攵档是属于谁的。只不过这个"谁"用了一个网址来代替 XHTML 是 HTML 向 XML 过渡的标识语言，它需要符合 XML 文档规则因此也需要定义名字空间。又因为 的艏页代码第一行就可以看见类似的语句这也是 W3C 推荐使用的定义方法。那为什么我们不直接采用 这种方法呢原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法比如 IE6/windows。所以在目前过渡 方案下我们依然推荐使用 meta 方式。当然你可以两种方法都写。

看本站源代码你会发现语言编码定义的地方还多一句：

注意：在上面声明语句的最后，你看到有一个斜杠"/"这和我们以前的 ,阿捷" />

这时候页面嘚效果仅仅可以看到三个并列的灰色矩形，和一个背景图但是我希望高度是满屏的，怎么办呢

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

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

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

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

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

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

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

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

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

网页设计DIV+CSS——第11天:不用表格的菜单

以上代码现在应该容易理解。先在 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: 强制作为内联对象呈递，从对象中删除行通俗講就是 li 不换行。实现横向排列你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔好了，你也可以动手试试用 li 实现各种各样嘚菜单样式。 Tips:如果你子菜单的宽度总和大于层的宽度菜单会自动折行，利用这个原理可以实现单个无序列表的 2 列或者 3 列排版 这是原来 HTML 佷难实现的。

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

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

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

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

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

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

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

校验失败，会显示两类错误：错误和警告错误表示一定要修正，否则無法通过校验；警告表示有代码不被 W3C 推荐,建议修 改

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 中使用 CSS，CSS 里定義的元素名称是区分大小写的为了避免这种错误，我建议所有的定义名称都采用小写 class 和 id 的值在 HTML 和 XHTML 中也是区分大小写的，如果你一定要夶小写混合写请仔细确认你在 CSS 的定义和 XHTML 里的标签是一致的。

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

这样可以节省一些字节。

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

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

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

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先例如有这么一段代码 Update: Lorem ipsum dolor set

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

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

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

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

这段代码的 CSS 定义是：

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

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

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

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

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

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

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

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

上面 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

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

十八.CSS 代码书写样式

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

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

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

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

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

利用第三方控件实现打印

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

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

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

控件技术内容。 与其相关的技术要求有：打印文档的生成、頁面设置、打印操作的实现等几个环节

（一）、打印文档的生成

下开发应用使用的语法为 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 像素的精确定位；

分别表示 填充满整个层 /不填充 /沿 X 轴填充 /沿 Y 轴填充。

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

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

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

通过margin:auto我们就可以轻易哋使层自动居中了

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

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

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

指定整个页面的显示区域。

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

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

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

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

到这里，有的朋友就说了*为什么要使用

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

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

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

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

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

而为什么要添加以下玳码呢

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

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

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

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

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

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

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

中对应的设置语法是.divID

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

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

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

按照上面的介绍我们先在

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

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

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

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

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

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

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

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

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

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

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

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

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

这一节里面，主要就是想告诉大家如何使用好 clear这两个属性

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

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

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

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

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

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

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

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

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