第 1 页
《Div+CSS 布局大全》
整理者：Jesse Zhao
网站：http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜，希望她可以永远快乐幸福！！！
《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:
[email protected]
第 2 页
目录
div＋css布局入门 ................................................................................................................................ 4
XHTML下css+div布局总结..................................................................................................................... 6
网页设计DIV+CSS——第1天:选择什么样的DOCTYPE ........................................................................... 9
第一天 ............................................................................................................................................ 9
什么是DOCTYPE............................................................................................................................. 10
我们选择什么样的DOCTYPE ........................................................................................................... 10
补充 .............................................................................................................................................. 10
网页设计DIV+CSS——第2天:什么是名字空间 ................................................................................... 10
网页设计DIV+CSS——第3天:定义语言编码 ....................................................................................... 11
网页设计DIV+CSS——第4天:调用样式表........................................................................................... 11
外部调用样式表............................................................................................................................. 11
双表法调用样式表 ......................................................................................................................... 12
网页设计DIV+CSS——第5天:head区的其他设置 ............................................................................... 12
收藏夹小图标 ............................................................................................................................... 12
为搜索引擎准备的内容.................................................................................................................. 12
网页设计DIV+CSS——第6天:XHTML代码规范 .................................................................................... 12
1.所有的标记都必须要有一个相应的结束标记 ............................................................................. 13
2.所有标签的元素和属性的名字都必须使用小写 ......................................................................... 13
3.所有的XML标记都必须合理嵌套 ............................................................................................... 13
4.所有的属性必须用引号""括起来 ............................................................................................... 13
5.把所有<和&特殊符号用编码表示 ............................................................................................... 13
6.给所有属性赋一个值.................................................................................................................. 13
7.不要在注释内容中使“--”....................................................................................................... 13
网页设计DIV+CSS——第7天:CSS入门 ............................................................................................... 14
1.基本语法规范............................................................................................................................. 14
2.颜色值....................................................................................................................................... 14
3.定义字体 ................................................................................................................................... 14
《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:
[email protected]
第 3 页
4.群选择器 ................................................................................................................................... 14
5.派生选择器 ............................................................................................................................... 14
6.id选择器 .................................................................................................................................. 14
6.类别选择器 ............................................................................................................................... 15
7.定义链接的样式 ......................................................................................................................... 15
网页设计DIV+CSS——第8天:CSS布局入门 ........................................................................................ 15
1.定义DIV .................................................................................................................................... 15
2.CSS2盒模型 ............................................................................................................................... 16
3.辅助图片一律用背景处理 .......................................................................................................... 17
网页设计DIV+CSS——第9天:第一个CSS布局实例 ............................................................................ 17
1.确定布局 ................................................................................................................................... 18
2.定义body样式 ........................................................................................................................... 18
3.定义主要的div .......................................................................................................................... 18
4.100%自适应高度? ....................................................................................................................... 20
网页设计DIV+CSS——第10天:自适应高度 ......................................................................................... 20
网页设计DIV+CSS——第11天:不用表格的菜单.................................................................................. 21
1.不用表格的菜单(纵向) .............................................................................................................. 21
2.不用表格的菜单(横向) .............................................................................................................. 22
网页设计DIV+CSS——第12天:校验及常见错误.................................................................................. 24
1.XHTML校验 ................................................................................................................................ 24
2.CSS2校验 .................................................................................................................................. 25
CSS的十八般技巧 ................................................................................................................................ 25
WEB打印实例教程 ................................................................................................................................ 30
Div+CSS布局入门教程 ........................................................................................................................... 37
《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:
[email protected]
第 4 页
div＋css布局入门
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 结构化HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明) 我们通常采用DIV元素来将这些结构定义出来，类似这样：
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:
[email protected]
第 5 页
另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.) 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码
，现在可以只在HTML中写，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。 亲自实践一下结构化 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： 嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。 用CSS替换传统方法 下面的列表将帮助你用CSS替换传统方法： HTML属性以及相对应的CSS方法 HTML属性 CSS方法 说明 align="left" align="right" float: left; float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等 当你使用float属性，必须给这个浮动元素定义一个宽度。 marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。 vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f; 在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。 bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。 bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left border="3"
[email protected]
[email protected]
[email protected]
14px大小的字体 这个方法比较简单灵活，可以随时根据页面需要新建和删除。 (7)定义链接的样式 CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如： a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;} 以上语句分别定义了 "链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
[email protected]
Angelfish (67 items)Angels/Frogfish (35 items)Angelfish (5526 items)Angelfish (15 items) (9)缩写是按照顺时针的顺序 margin:25px 0 25px 0; (10)行高 line-height:150% 说明行距为正常的150% 10)结构化代码div(division)、id、class 用它们来书写紧凑的xhtml，更明智的使用css. (1)结构化id标签，与class的有区别： 如果你的属性页面包含了一个div，它的id为"content",它就不可能有另外一个div或者其他元素拥有相同的名字。相反，class属性可以在意个页面中一次又一次地使用。 (2)id的规则 一个id值必须用一个字母或者下划线开头，它不能用一个数字进行开头，然后跟随字母、数字和下划线。空格和连字符-都是不允许的。 11）制作好的网站可以到w3c进行标准校正 http:validator.w3.org http://jigsaw.w3.org/css-validator/
[email protected]
[email protected]
标识，如果小王的名字空间是"http://www.xiaowang.com"，小李的名字空间是"http://www.xiaoli.com"，那么当两个文档交换数据时，也不会混淆标识，因为它属于不同的名字空间。 更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。 XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。 后面的lang="gb2312",指定你的文档用简体中文。
和
等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如[email protected]
[email protected]
和
而不一定写对应的和 来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如: 和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
<br> 3.所有的XML标记都必须合理嵌套
<br> 同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码： <p><b></p>/b> 必须修改为： <p><b></b>/p> 就是说，一层一层的嵌套必须是严格对称。
<br> 4.所有的属性必须用引号""括起来
<br> 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如: <height=80> 必须修改为： <height="80"> 特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如： <alt="say'hello'">
<br> 5.把所有<和&特殊符号用编码表示
<br> 任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
<br> 任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
<br> 任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
<br> 注：以上字符之间无空格。
<br> 6.给所有属性赋一个值
<br> XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
<br> 7.不要在注释内容中使“--”
<br> “--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的: <!--这里是注释-----------这里是注释--> 用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释--> 以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
<br> 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
<br> 第 14 页
<br> 网页设计DIV+CSS——第7天:CSS入门
<br> 在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节。 CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
<br> 1.基本语法规范
<br> 分析一个典型CSS的语句： p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
<br> 其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
<br> 样式声明写在一对大括号"{}"中；
<br> COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
<br> "#FF0000"和"#FFFFFF"是属性的值(value)。
<br> 2.颜色值
<br> 颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
<br> 3.定义字体
<br> web标准推荐如下字体定义方法： body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
<br> 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
<br> Lucida Grande字体适合Mac OS X；
<br> Verdana字体适合所有的Windows系统；
<br> Lucida适合UNIX用户
<br> "宋体"适合中文简体用户;
<br> 如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
<br> 4.群选择器
<br> 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li { font-size : 12px ; }
<br> 5.派生选择器
<br> 可以使用派生选择器给一个元素里的子元素定义样式，例如这样： li strong { font-style : italic; font-weight : normal；} 就是给li下面的子元素strong定义一个斜体不加粗的样式。
<br> 6.id选择器
<br> 用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层 <div id="menubar"></div> 然后在样式表里这样定义： #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
<br> 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
<br> 第 15 页
<br> id选择器也同样支持派生，例如： #menubar p { text-align : right; margin-top : 10px; } 这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
<br> 6.类别选择器
<br> 在CSS里用一个点开头表示类别选择器定义，例如： .14px {color : #f60 ;font-size:14px ;} 在页面中，用class="类别名"的方法调用： <span class="14px">14px大小的字体</span> 这个方法比较简单灵活，可以随时根据页面需要新建和删除。
<br> 7.定义链接的样式
<br> CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如： a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;} 以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 呵呵，看了这么多，有点头晕吧，实际上CSS的语法规范还有很多，这里列的只是一些常用的，毕竟我们是循序渐进，不可能一口吃成胖子:)
<br> 网页设计DIV+CSS——第8天:CSS布局入门
<br> CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。
<br> 1.定义DIV
<br> 分析一个典型的定义div例子： #sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid; BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: #CCC 2px solid; BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150%; WIDTH:60%; } 说明如下：
<br> 层的名称为sample，在页面中用
<br> 就可以调用这个样式。
<br> MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。
<br> 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
<br> 第 16 页
<br> 注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
<br> PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色。
<br> BORDER是指层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
<br> BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
<br> COLOR用于定义字体颜色，上一节已经介绍过。
<br> TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
<br> LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
<br> WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。
<br> 下面是这个层的实际表现: 这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容， 这里是演示内容，这里是演示内容， 这里是演示内容，这里是演示内容， 这里是演示内容... 我们可以看到边框是2px的灰色，背景图片在右下没有重复，内容距离上和左边框20px，内容居中，一切和预想的一样。hoho，虽然不好看，但它是最基本的，掌握了它，你就已经学会一半的CSS布局技术了。就是这样，不算难吧！(另一半是什么？另一半是层与层之间的定位。我会在后面逐步讲解。)
<br> 2.CSS2盒模型
<br> 自从1996年CSS1的推出，W3C组织就建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层 。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。
<br> 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
<br> 第 17 页
<br> 3.辅助图片一律用背景处理
<br> 用XHTML+CSS布局，有一个技术一开始让你不习惯，应该说是一种思维方式与传统表格布局不一样，那就是：所有辅助图片都用背景来实现。类似这样： BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; 尽管可以用直接插在内容中，但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。例如：相册中的图片、图片新闻中的图片，上面的3d盒模型图片都属于内容的一部分，它们可以用元素直接插在页面里，而其它的类似logo，标题图片，列表前缀图片都必须采用背景方式或者其他CSS方式显示。 这样做的原因有2点：
<br> 将表现与结构彻底相分离(参考阅读另一篇文章：《理解表现与结构相分离》)，用CSS控制所有的外观表现，便于改版。
<br> 使页面更具有易用性，更有亲和力。例如：盲人使用屏幕阅读机，用背景技术实现的图片就不会被朗读出来。
<br> 网页设计DIV+CSS——第9天:第一个CSS布局实例
<br> 接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。
<br> 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
<br> 第 18 页
<br> 注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：
<br> 1.确定布局
<br> w3cn的最初设计草图如下：
<br> 用表格的设计方法的话，一般都是上中下三行布局。用DIV的话，我考虑使用三列来布局,成为这样。
<br> 2.定义body样式
<br> 先定义整个页面的body的样式,代码如下： body { MARGIN: 0px; PADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom; FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; COLOR: #666; FONT-SIZE:12px; LINE-HEIGHT:150%; } 以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。
<br> 3.定义主要的div
<br> 初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
<br> /*定义页面左列样式*/ #left{ WIDTH:200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #CDCDCD; } /*定义页面中列样式*/ #middle{ POSITION: absolute; LEFT:200px;
<br> 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
<br> 第 19 页
<br> TOP:0px; WIDTH:300px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #DADADA; } /*定义页面右列样式*/ #right{ POSITION: absolute; LEFT:500px; TOP:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #FFF; } 注意：定义中列和右列div我都采用了POSITION: absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。 这时候整个页面的代码是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>欢迎进入新《网页设计师》:web标准教程及推广 页面左列
页面中列
页面右列
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
[email protected]
[email protected]
，整个菜单的效果实现的秘密完全在于id="menu"，我们再来看CSS中关于menu的定义： (1)首先定义了menu层的主要样式: #menu { MARGIN: 15px 20px 0px 15px; /*定义层的外边框距离*/ PADDING:15px; /*定义层的内边框为15px*/ BACKGROUND: #dfdfdf; /*定义背景颜色*/ COLOR: #666; /*定义字体颜色*/ BORDER:#fff 2px solid; /*定义边框为2px白色线条*/ WIDTH:160px; /*定义内容的宽度为160px*/ } (2)其次定义无序列表的样式：
[email protected]
和的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。 (3)定义onmouseover效果 #menu li a { PADDING:5px 0px 5px 15px; DISPLAY: block; FONT-WEIGHT: bold; BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none; } #menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; } 解释如下：
[email protected]
样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。 Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。 感谢zhuweiwei指出横向菜单的bug，本文7月6日修正。
[email protected]
其他标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。如果你的页面通过XHTML1.0校验，可以在页面上放置这么一个图标： 代码如下：
[email protected]
[email protected]
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
[email protected]
[email protected]
[email protected]
[email protected]
//打印 WebBrowser1.ExecWB(6,1); //打印设置 WebBrowser1.ExecWB(8,1); //打印预览 WebBrowser1.ExecWB(7,1); 3、一个实例项目采用的打印方案 服务器端程序方式、打印预览接口调用，下面为例， 主要参考项目中的： pageErrorPrint.aspx.vb 文件 主调用页
[email protected]
[email protected]
") phContainer.Controls.Add(ltBreak) End Sub 二、利用IE自身打印 这种方式比较简单，也常用的打印方式，只需要将报表页面设计好，用户通过IE菜单中的打印功能完成打印。优点是简单，容易实现，缺点是不灵活，不能控制分页，不能控制好页眉和页脚。 三、将报表导出成Word,Excel或PDF形式打印 这种方式需要将页面导出成Office文档或pdf,最低的要求是客户端已经安装用以打开Word、Excel或Pdf文档的软件。这种方式可以通过水晶报表组件或其他一些第三方控件非常容易地实现。导出成Pdf形式后打印质量和效果都很好，导出成Word或Excel后用户可以自定义打印的内容和格式。 总之，现有的打印方案各有所长，在开发过程中应根据用户的需求作选择，利用IE打印简单，容易实现，在用户需求简单或打印内容较少的情况下采用此方案比较适宜。利用自定义控件打印可以实现完全自定义，但需要较高的技术要求和开发周期。利用导出的方式则可以满足用户需要一点自定义或打印内容有多页的需求。 ------------------------------------------------------------- 1、控制"纵打"、横打”和“页面的边距。 （1） （2）
[email protected]
<%=rs(0)%>
<%rs.movenext%> <%wend%> 3、ASP页面打印时如何去掉页面底部的路径和顶端的页码编号 （1）ie的文件-〉页面设置-〉讲里面的页眉和页脚里面的东西都去掉，打印就不出来了。 （2） New Document [email protected]
4、浮动帧打印 4、用FileSystem组件实现WEB应用中的本地特定打印 服务器端脚本： <%„„„ set conn=server.CreateObject ("adodb.connection") conn.Open "DSN=name;UID=XXXX;PWD=XXXX;" set rs=server.CreateObject("adodb.recordset")
[email protected]
正确的写法： 
