精华内容
下载资源
问答
  • 列表项用自定义的图标作为标识

    千次阅读 2017-02-19 21:49:18
    首先介绍关于列表项的相关知识:list-style: none; 列表项样式 list-style-image: url(li_bg.jpg); 指定列表项样式为图片 list-style-position:inside、outside 列表项的位置,inside含义是列表项显示在li标签里面,...
    首先介绍关于列表项的相关知识:list-style: none;    列表项样式
    
    list-style-image: url(li_bg.jpg);    指定列表项样式为图片

    list-style-position:inside、outside  列表项的位置,inside含义是列表项显示在li标签里面,outside含义是列表项显示在li标签外面。

    具体用法:(1)首先在ol设置 list-style:

                      #content ol{
                                     list-style: none;
                                 }

                          (2)在ol li设置background:

                     #content ol li{
                                     background: url(../img/li_bg.jpg) no-repeat  1px 6px;
                                 }

     具体例子如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    #box{
    margin:20px auto;
    width:200px;
    height:180px;
    border-top: 3px solid #FF8400;
    border-left: 1px solid #D9E0EE;
    border-bottom: 1px solid #D9E0EE;
    border-right: 1px solid #D9E0EE;
    }
    #title{
    margin:5px;
    }
    #content{
    border-top: 1px solid #D9E0EE;
    }
    #content ol{
    list-style: none;
    
    }
    #content ol li{
    background: url(../img/li_bg.jpg) no-repeat  1px 6px;
    margin-left: -30px;
    padding-left: 10px;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <div id="title">
    <span>行业动态</span>
    </div>
    <div id="content">
    <ol>
    <li>气质不凡绝妙签名</li>
    <li>精彩你的绝妙生活</li>
    <li>让草根推荐草根</li>
    <li>精彩生活快来看</li>
    <li>草根名博有伯乐</li>
    </ol>
    </div>
    </div>
    </body>
    </html>



    展开全文
  • div + css 详解

    千次阅读 2011-11-28 13:55:47
    Div+CSS 布局大全》 整理者:Jesse Zhao 网站:http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!! 《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 ...

    第 1 页
    《Div+CSS 布局大全》
    整理者:Jesse Zhao
    网站:http://JesseZhao.cnblogs.com 送给我最爱的女朋友蜜蜜,希望她可以永远快乐幸福!!!
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 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:prolibertine@gmail.com
    第 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:prolibertine@gmail.com
    第 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元素来将这些结构定义出来,类似这样: <div id="header"></div> <div id="content"></div> <div id="globalnav"></div> <div id="subnav"></div> <div id="search"></div> <div id="shop"></div> <div id="footer"></div> 这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全不同于#content里的图片规则。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 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页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中,table就是表格,而不是其他什么(比如被用来布局和定位)。 亲自实践一下结构化 上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样: <div id="navcontainer"> <div id="globalnav"> <ul>a list</ul> </div> <div id="subnav"> <ul>another list</ul> </div> </div> 嵌套的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"
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 6 页
    cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。 你可以使用 table, td or th 这些选择器. 如果你需要设置无边框效果,可以使用CSS定义: border-collapse: collapse; <br clear="left"> <br clear="right"> <br clear="all"> clear: left; clear: right; clear: both; 许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用clear属性. cellpadding="3" vspace="3" hspace="3" padding: 3px; 用CSS,任何元素都可以设定padding属性,同样,padding可以分别设置top, right, bottom and left。padding是透明的。 align="center" text-align: center; margin-right: auto; margin-left: auto; Text-align 只适用于文本. 象div,p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中 一些令人遗憾的技巧和工作环境 由于浏览器对CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧,盒模型bug的技巧等等。所有这些技巧都在Molly Holzschlag的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。 另外一个关于CSS技巧的资源站点是Big John和Holly Bergevin的“Position is Everything”。
    XHTML下css+div布局总结
    xml(extensible Markup Language)的出现,结构化文档和数据有了一个通用的、科适应的格式,不仅仅应用在web上,也可以应用在任何地方。标准称为可能。 XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。它实现HTML向XML的过渡。 CSS是Cascading Style Sheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。 1)为页面添加正确的DOCTYPE DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你 DOCTYPE定义的DTD(文档类型定义)来解释页面代码。 XHTML1.0提供了三种DOCTYPE可选择: (1)过渡型(Transitional )--使用非常普遍。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    (2)严格型(Strict ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 7 页
    (3)框架型(Frameset ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 2)设定一个名字空间(Namespace) 直接在DOCTYPE声明后面添加如下代码: <html XMLns="http://www.w3.org/1999/xhtml" > 一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。 3)声明你的编码语言 为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下: <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5。
    4)用小写字母书写所有的标签 XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的: 5)为图片添加 alt 属性 为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义: <img src="logo.gif" alt="logo.gif"> 正确的写法: <img src="logo.gif" alt="互动力工作室标志,点击返回首页"> 6)给所有属性值加引号 在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。还必须用空格分开属性。 例:<hr width="75%"size="7"/> 这也是不正确的 7)关闭所有的标签 在XHTML中,每一个打开的标签都必须关闭。空标签也要关闭,在标签尾部使用一个正斜杠 "/"来关闭它们自己。例如: <br /> 8)收藏夹小图标 例如:首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区: <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 9)用CSS定义元素外观 用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,减轻工作量和服务器的负荷,增加站点的扩展能力和应用。 css是不区别空格和大小写的,下面是一些基础的归纳 (1)颜色值
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 8 页
    颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。 (2)定义字体 web标准推荐如下字体定义方法: body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; Lucida Grande字体适合Mac OS X; Verdana字体适合所有的Windows系统; Lucida适合UNIX用户 "宋体"适合中文简体用户; 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用; (3)群选择器 当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; } (4)派生选择器 可以使用派生选择器给一个元素里的子元素定义样式,例如这样: li strong { font-style : italic; font-weight : normal;} 就是给li下面的子元素strong定义一个斜体不加粗的样式。 (5)id选择器 用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 <div id="menubar"></div> 然后在样式表里这样定义: #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 id选择器也同样支持派生,例如: #menubar p { text-align : right; margin-top : 10px; } 这个方法主要用来定义层和那些比较复杂,有多个派生的元素。 (6)类别选择器 在CSS里用一个点开头表示类别选择器定义,例如: .14px {color : #f60 ;font-size:14px ;} 在页面中,用class= "类别名"的方法调用: <span class="14px">14px大小的字体</span> 这个方法比较简单灵活,可以随时根据页面需要新建和删除。 (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”。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 9 页
    (8)组合使用选择器创造精致的设计效果 用漂亮的图案代替普通无序列表前沉闷的黑点。站点http://marine.happycog.com/ 先用css规则告诉类别属性inventory的无序列表。 ul.inventory{ list-style:disc url(/images/common/lister2.gig) inside;} 它的调用标记: <ul class="inventory"> <li><a href="/angelfish">Angelfish</a>(67 items)</li> <li><a href="/angeld">Angels/Frogfish</a>(35 items)</li> <li><a href="/anthias">Angelfish</a>(5526 items)</li> <li><a href="/basslets">Angelfish</a>(15 items)</li> <ul> (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/
    网页设计DIV+CSS——第1天:选择什么样的DOCTYPE
    前言
    大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧
    第一天
    开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。 查看本站首页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 10 页
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 那么这些代码有什么含义?一定要放置吗?
    什么是DOCTYPE
    上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。 要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。 XHTML 1.0 提供了三种DTD声明可供选择:
     过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    我们选择什么样的DOCTYPE
    理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。 注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。 打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。
    补充
    DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。
    网页设计DIV+CSS——第2天:什么是名字空间
    DOCTYPE声明好以后,接下来的代码是: <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 通常我们HTML4.0的代码只是<html>,这里的"xmlns"是什么呢? 这个"xmlns"是XHTML namespace的缩写,叫做"名字空间"声明。名字空间是什么作用呢?阿捷自己的理解是:
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 11 页
    由于xml允许你自己定义自己的标识,你定义的标识和其他人定义的标识有可能相同,但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生,XML采用名字空间声明,允许你通过一个网址指向来识别你的标识。例如: 小王和小李都定义了一个<book>标识,如果小王的名字空间是"http://www.xiaowang.com",小李的名字空间是"http://www.xiaoli.com",那么当两个文档交换数据时,也不会混淆<book>标识,因为它属于不同的名字空间。 更通俗的解释是:名字空间就是给文档做一个标记,告诉别人,这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。 XHTML是HTML向XML过渡的标识语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标识,所以它的名字空间都相同,就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧,目前阶段我们只要照抄代码就可以了。 后面的lang="gb2312",指定你的文档用简体中文。
    网页设计DIV+CSS——第3天:定义语言编码
    第三步是定义你的语言编码,类似这样: <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言,我们一般使用gb2312(简体中文),制作多国语言页面也有可能用Unicode、ISO-8859-1等,根据你的需要定义。 通常这样定义就可以了。但是要补充说明的是,XML文档并不是这样定义语言编码的,XML的定义方式如下: <?xml version="1.0" encoding="gb2312"?> 你在Macromedia.com的首页代码第一行就可以看见类似的语句,这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢?原因是一些浏览器对标准的支持不完善,不能正确理解这样的定义方法,比如IE6/windows。所以在目前过渡方案下,我们依然推荐使用meta方式。当然,你可以两种方法都写。 看本站源代码,你会发现语言编码定义的地方还多一句: <meta http-equiv="Content-Language" content="gb2312" /> 这是针对老版本浏览器写的,以保证各种浏览器都能正确解释页面。 注意:在上面声明语句的最后,你看到有一个斜杠"/",这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如<body>和</body>、<p>和</p>等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/"。例如<br>写成<br />、<img>写成<img />,加空格的原因是避免代码连在一起浏览器不识别。
    网页设计DIV+CSS——第4天:调用样式表
    用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。 事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的。
    外部调用样式表
    在以前,我们通常采用2种方法使用样式表:
     页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:
    <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
     外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。
    <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 12 页
    在符合web标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。
    双表法调用样式表
    查看某些符合标准站点的原代码,你可能看到,在调用样式表的地方有如下2句: <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style> 为什么要写两次呢? 实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而"@import"命令在netscape 4.0版本浏览器是无效的。也就是说,当你希望某些效果在netscape 4.0浏览器中隐藏,在4.0以上或其它浏览器中又显示的时候,你可以采用"@import"命令方法调用样式表。
    网页设计DIV+CSS——第5天:head区的其他设置
    这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。
    收藏夹小图标
    如果你将本站加入收藏夹,可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单,首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区: <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    为搜索引擎准备的内容
    代码如下,替换成你自己站点的内容就可以:
     允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索,推荐采用robots.txt方法
    <meta content="all" name="robots" />
     设置站点作者信息
    <meta name="author" content="ajie@netease.com,阿捷" />
     设置站点版权信息
    <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
     站点的简要介绍(推荐)
    <meta name="description" content="新网页设计师。web标准的教程站点,推动web标准在中国的应用" />
     站点的关键词(推荐)
    <meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" /> 先介绍这么多。补充说明,前面花了5节都是讲head区的代码,实际页面内容还一字未提,呵呵,不要急,其实head区是非常重要的,看一个页面的head的代码就可以知道设计师是否够专业。
    网页设计DIV+CSS——第6天:XHTML代码规范
    在开始正式内容制作之前,我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 13 页
    1.所有的标记都必须要有一个相应的结束标记
    以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如: <br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />
    2.所有标签的元素和属性的名字都必须使用小写
    与HTML不一样,XHTML对大小写是敏感的,<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body> 。大小写夹杂也是不被认可的,通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
    3.所有的XML标记都必须合理嵌套
    同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码: <p><b></p>/b> 必须修改为: <p><b></b>/p> 就是说,一层一层的嵌套必须是严格对称。
    4.所有的属性必须用引号""括起来
    在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。例如: <height=80> 必须修改为: <height="80"> 特殊情况,你需要在属性值里使用双引号,你可以用",单引号可以使用&apos;,例如: <alt="say&apos;hello&apos;">
    5.把所有<和&特殊符号用编码表示
     任何小于号(<),不是标签的一部分,都必须被编码为& l t ;
     任何大于号(>),不是标签的一部分,都必须被编码为& g t ;
     任何与号(&),不是实体的一部分的,都必须被编码为& a m p;
    注:以上字符之间无空格。
    6.给所有属性赋一个值
    XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如: <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为: <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
    7.不要在注释内容中使“--”
    “--”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的: <!--这里是注释-----------这里是注释--> 用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释--> 以上这些规范有的看上去比较奇怪,但这一切都是为了使我们的代码有一个统一、唯一的标准,便于以后的数据再利用。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 14 页
    网页设计DIV+CSS——第7天:CSS入门
    在了解XHTML代码规范后,我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了,可以跳过这一节,直接进入下一节。 CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
    1.基本语法规范
    分析一个典型CSS的语句: p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
     其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
     样式声明写在一对大括号"{}"中;
     COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
     "#FF0000"和"#FFFFFF"是属性的值(value)。
    2.颜色值
    颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
    3.定义字体
    web标准推荐如下字体定义方法: body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
     字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
     Lucida Grande字体适合Mac OS X;
     Verdana字体适合所有的Windows系统;
     Lucida适合UNIX用户
     "宋体"适合中文简体用户;
     如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
    4.群选择器
    当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; }
    5.派生选择器
    可以使用派生选择器给一个元素里的子元素定义样式,例如这样: li strong { font-style : italic; font-weight : normal;} 就是给li下面的子元素strong定义一个斜体不加粗的样式。
    6.id选择器
    用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 <div id="menubar"></div> 然后在样式表里这样定义: #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 15 页
    id选择器也同样支持派生,例如: #menubar p { text-align : right; margin-top : 10px; } 这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
    6.类别选择器
    在CSS里用一个点开头表示类别选择器定义,例如: .14px {color : #f60 ;font-size:14px ;} 在页面中,用class="类别名"的方法调用: <span class="14px">14px大小的字体</span> 这个方法比较简单灵活,可以随时根据页面需要新建和删除。
    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”。 呵呵,看了这么多,有点头晕吧,实际上CSS的语法规范还有很多,这里列的只是一些常用的,毕竟我们是循序渐进,不可能一口吃成胖子:)
    网页设计DIV+CSS——第8天:CSS布局入门
    CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。
    1.定义DIV
    分析一个典型的定义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%; } 说明如下:
     层的名称为sample,在页面中用
    就可以调用这个样式。
     MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN: 10px;"。如果边距为零,要写成"MARGIN: 0px;"。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 16 页
    注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。MARGIN是透明元素,不能定义颜色。
     PADDING是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素,不能定义颜色。
     BORDER是指层的边框,"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。
     BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bg_logo.gif)"来指定背景图片路径;其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复,如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
     COLOR用于定义字体颜色,上一节已经介绍过。
     TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。
     LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。
     WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。
    下面是这个层的实际表现: 这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容, 这里是演示内容,这里是演示内容, 这里是演示内容,这里是演示内容, 这里是演示内容... 我们可以看到边框是2px的灰色,背景图片在右下没有重复,内容距离上和左边框20px,内容居中,一切和预想的一样。hoho,虽然不好看,但它是最基本的,掌握了它,你就已经学会一半的CSS布局技术了。就是这样,不算难吧!(另一半是什么?另一半是层与层之间的定位。我会在后面逐步讲解。)
    2.CSS2盒模型
    自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层 。盒模型主要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 17 页
    3.辅助图片一律用背景处理
    用XHTML+CSS布局,有一个技术一开始让你不习惯,应该说是一种思维方式与传统表格布局不一样,那就是:所有辅助图片都用背景来实现。类似这样: BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; 尽管可以用直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一部分,它们可以用元素直接插在页面里,而其它的类似logo,标题图片,列表前缀图片都必须采用背景方式或者其他CSS方式显示。 这样做的原因有2点:
     将表现与结构彻底相分离(参考阅读另一篇文章:《理解表现与结构相分离》),用CSS控制所有的外观表现,便于改版。
     使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
    网页设计DIV+CSS——第9天:第一个CSS布局实例
    接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 18 页
    注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:
    1.确定布局
    w3cn的最初设计草图如下:
    用表格的设计方法的话,一般都是上中下三行布局。用DIV的话,我考虑使用三列来布局,成为这样。
    2.定义body样式
    先定义整个页面的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%。
    3.定义主要的div
    初次使用CSS布局,我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho,别说我偷懒,先实现简单的,增加点信心嘛!)。分别定义左中右的宽度为200:300:280,在CSS中如下定义:
    /*定义页面左列样式*/ #left{ WIDTH:200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #CDCDCD; } /*定义页面中列样式*/ #middle{ POSITION: absolute; LEFT:200px;
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 19 页
    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标准教程及推广</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <meta content="all" name="robots" /> <meta name="author" content="ajie(at)netease.com,阿捷" /> <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" /> <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." /> <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" /> </head> <body> <div id="left">页面左列</div> <div id="middle">页面中列</div> <div id="right">页面右列</div> </body> </html> 这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 20 页
    4.100%自适应高度?
    为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"height:100%;",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。
    网页设计DIV+CSS——第10天:自适应高度
    如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面): Body 这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;} 这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar和#content 这里是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; } 这里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; },背景颜色用的是#main的背景色 这里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;} 这里是主要内容,根据内容自动适应高度 这里是主要内容,根据内容自动适应高度 这里是主要内容,根据内容自动适应高度 这里是#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。 这个例子的页面主要代码如下: <div id="header"></div> <div id="mainbox"> <div id="menu"></div> <div id="sidebar"></div> <div id="content"></div> </div> <div id="footer"></div> 具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加,#content的高度就会增高,同时#mainbox的高度也会撑开,#footer层就自动下移。这样就实现了高度的自适应。 另外值得注意的是:#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;",这是浮动法定位,还可以采用绝对定位来实现这样的效果。 这个方法存在另一个问题,就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色,因为在Mozilla等浏览器中#mainbox的背景色失效。) 好了,主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。如果你希望尝试其他布局,推荐看看以下文章:
     CSS布局16例
     onestab:三栏复合布局演示
     onestab:自由伸展的三栏式版面
    Tips:[onestab 的"P.I.E"专题] 还有更多精彩介绍,推荐去看看。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 21 页
    网页设计DIV+CSS——第11天:不用表格的菜单
    布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片: 样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;} 页面代码:<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3cn_200x80.gif" width="200" /></a></div> 以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。 接下来是定义菜单。
    1.不用表格的菜单(纵向)
    我们先来看菜单的最终效果:  什么是网站标准  使用标准的好处  怎样过渡  相关教程  工具  资源及链接
    通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句: <div id="menu"> <ul> <li><a title="网站标准" href="http://www.w3cn.org/webstandards.html">什么是网站标准</a></li> <li><a title="标准的好处" href="http://www.w3cn.org/benefits.html">使用标准的好处</a></li> <li><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li> <li><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li> <li><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li> <li><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li> </ul> </div> 没有用任何table,而用的是无序列<li>,整个菜单的效果实现的秘密完全在于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)其次定义无序列表的样式:
    #menu ul {
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 22 页
    MARGIN: 0px; PADDING: 0px; BORDER: medium none; /*不显示边框*/ LINE-HEIGHT: normal; LIST-STYLE-TYPE: none; } #menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;} 说明:这里用的是id选择器的派生方法定义(参考第7天:CSS入门的介绍)了在menu层中的子元素<ul>和<li>的样式。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; } 解释如下:
     "display:block;"表示将标签a当作块级元素来显示,使得链接变成一个按钮;
     "BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明,"2px 8px"指定图标的位置是距左边2px,距上边8px。这一句也可以拆分写成四句:"BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"
     "#menu li a:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。
    ok,不用表格的菜单就这样实现了。大家可以明显感觉到,原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。
    2.不用表格的菜单(横向)
    上面是纵向的菜单,如果要显示横向菜单,用li也可以吗?当然是可以的,下面给出代码,效果就在本页顶部: 页面代码
    <div id="submenu"> <ul> <li id="one"><a title="首页" href="http://www.w3cn.org/">Home</a></li> <li id="two"><a title="关于我们" href="http://www.w3cn.org/aboutus.html">关于我们</a></li> <li id="three"><a title="网站标准" href="http://www.w3cn.org/webstandards.html">网站标准</a></li> <li id="four"><a title="标准的好处" href="http://www.w3cn.org/benefits.html">标准的好处</a></li> <li id="five"><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li> <li id="six"><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 23 页
    <li id="seven"><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li> <li id="eight"><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li> <li id="nine"><a title="常见问题" href="http://www.w3cn.org/faq.html">常见问题</a></li> </ul> </div> 样式表代码
    #submenu { MARGIN: 0px 8px 0px 8px; PADDING: 4px 0px 0px 0px; BORDER: #fff 1px solid; BACKGROUND: #dfdfdf; COLOR: #666; HEIGHT:25px; } #submenu ul { CLEAR: left; MARGIN: 0px; PADDING:0px; BORDER: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; DISPLAY:inline; } #submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px; TEXT-ALIGN: center} #submenu li a { DISPLAY: block; PADDING:2px 3px 2px 3px; BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; FONT-WEIGHT: bold; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none; } #submenu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; }
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 24 页
    #submenu ul li#one A { WIDTH: 60px} #submenu ul li#two A { WIDTH: 80px} #submenu ul li#three A { WIDTH: 80px} #submenu ul li#four A { WIDTH: 90px} #submenu ul li#five A { WIDTH: 80px} #submenu ul li#six A { WIDTH: 80px} #submenu ul li#seven A { WIDTH: 60px} #submenu ul li#eight A { WIDTH: 90px} #submenu ul li#nine A { WIDTH: 80px} 以上代码不逐一分析了。横向菜单的关键在于:定义<li>样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递,从对象中删除行,通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度,控制菜单的间隔。好了,你也可以动手试试,用li实现各种各样的菜单样式。 Tips:如果你子菜单的宽度总和大于层的宽度,菜单会自动折行,利用这个原理可以实现单个无序列表的2列或者3列排版,这是原来HTML很难实现的。 感谢zhuweiwei指出横向菜单的bug,本文7月6日修正。
    网页设计DIV+CSS——第12天:校验及常见错误
    辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准?W3C和一些志愿者网站提供了在线校验程序,来帮助我们检查页面是否符合标准,并提供了修正错误的帮助信息。这些校验非常有用,是我调试页面第一步要做的事情。
    1.XHTML校验
     校验网址:http://validator.w3.org/
     校验方式:网址校验、文件上传校验
    校验成功,会显示"This Page Is Valid XHTML 1.0 Transitional!",如图: 校验失败,会显示更多校验选项和错误信息,如图: 一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 25 页
    XHTML校验常见错误原因对照表
     No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
     No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
     end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
     an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
     element "DIV" undefined---DIV标签不能用大写,要改成小写div。
     required attribute "alt" not specified---图片需要加alt属性。
     required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
    其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的,比如忘记了一个</li>其他<li>标签都会报错,所以不要看到一堆的错误害怕,通常解决了一个错误,其他的错误也都没有了。如果你的页面通过XHTML1.0校验,可以在页面上放置这么一个图标: 代码如下: <p> <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>
    2.CSS2校验
     校验网址:http://jigsaw.w3.org/css-validator/
     校验方式:网址校验、文件上传校验、直接贴入代码校验
    校验成功,会显示"恭喜恭喜,此文档已经通过样式表校验! ",hoho,校验信息支持中文噢。如图: 校验失败,会显示两类错误:错误和警告。错误表示一定要修正,否则无法通过校验;警告表示有代码不被W3C推荐,建议修改。
    CSS2校验常见错误原因对照表
     (错误)无效数字 : color909090 不是一个 color 值 : 909090 ---十六进制颜色值必须加"#"号,即#909090
     (错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值,正确写法6px
     (错误)属性 scrollbar-face-color 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
     (错误)值 cursorhand不存在 : hand是非标准属性值,修改为cursor:pointer
     (警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候,最后以一个类别的字体结束,例如"sans-serif",以保证在不同操作系统下,网页字体都能被显示。
     (警告)Line : 0 can't find the warning message for otherprofile --表示在代码中有非标准属性或值,校验程序无法判断和提供相应的警告信息。
    同样,通过检验后,可以放置一个CSS校验通过图标,代码如下: <p> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>
    CSS的十八般技巧
    最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS,影响CSS的效率发挥。我来分析总结一下错误所在,帮助大家更加容易使用CSS。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 26 页
    本文总结了我开始使用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前的元素限定
    当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如: div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成 #content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字节。
    五.默认值
    通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样: * { margin:0; padding:0; }
    六.不需要重复定义可继承的值
    CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。
    七.最近优先原则
    如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文件中,你已经定义了元素p,又定义了一个class"update"
    p {
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 27 页
    margin:1em 0; font-size:1em; color:#333; } .update { font-weight:bold; color:#600; } 这两个定义中,class="update"将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
    八.多重class定义
    一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。 .one{width:200px;background:#666;} .two{border:10px solid #F00;} 在页面代码中,我们可以这样调用 <div class="one two"></div> 这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。
    九.使用子选择器(descendant selectors)
    CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码: <div id="subnav"> <ul> <li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>> <li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li> <li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li> </ul> </div> 这段代码的CSS定义是: div#subnav ul { /* Some styling */ } div#subnav ul li.subnavitem { /* Some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } div#subnav ul li.subnavitemselected { /* Some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 你可以用下面的方法替代上面的代码 <ul id="subnav"> <li> <a href="#"> Item 1</a> </li> <li class="sel"> <a href="#"> Item 1</a> </li> <li> <a href="#"> Item 1</a> </li> </ul> 样式定义是:
    #subnav { /* Some styling */ } #subnav li { /* Some styling */ }
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 28 页
    #subnav a { /* Some styling */ } #subnav .sel { /* Some styling */ } #subnav .sel a { /* Some styling */ } 用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
    十.不需要给背景图片路径加引号
    为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如: background:url("images/***.gif") #333; 可以写为 background:url(images/***.gif) #333; 如果你加了引号,反而会引起一些浏览器的错误。
    十一.组选择器(Group selectors)
    当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。 例如:定义所有标题的字体、颜色和margin,你可以这样写: h1,h2,h3,h4,h5,h6 { font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif; color:#333; margin:1em 0; } 如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如: h1 { font-size:2em; } h2 { font-size:1.6em; }
    十二.用正确的顺序指定链接的样式
    当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link :visited :hover :active。抽取第一个字母是"LVHA",你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。 如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。
    十三.清除浮动
    一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。
    通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文)。
    上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论。
    上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts》
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 29 页
    十四.横向居中(centering)
    这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样: 你可以这样定义使它横向居中: #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; } 但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样: body { text-align:center; } #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; } 第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。
    十五.导入(Import)和隐藏CSS
    因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如: @import url("main.css"); 然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法: @import "main.css";
    这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart》
    十六.针对IE的优化
    有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。
     1.注释的方法
    o (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector): html>body p { /* 定义内容 */ }
    o (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) * html p { /* declarations */ }
    o (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用"反斜线"技巧: /* \*/ * html p {
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 30 页
    declarations } /* */
     2.条件注释(conditional comments)的方法
    另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样: <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
    十七.调试技巧:层有多大?
    当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。 另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。
    十八.CSS代码书写样式
    在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式: selector1, selector2 { property:value; } 当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。 我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。 最后,关闭的大括号}单独写一行。
    WEB打印实例教程
    做Web开发的人员一定都会面临一个共同的难题,那就是打印。的确,相对于Windows桌面应用程序来讲,Web应用程序的打印有种种限制,技术人员在项目开发过程中经常会遇到用户这样或那样的需求. 做过桌面应用开发的人都会非常熟悉水晶报表、Active Report之类的报表控件,它们不仅有简单灵活的设计界面,更具有非常强大的报表功能,能满足各种报表的打印需求。而Web应用则因为其特殊的呈现方式,只能寻求其他的解决方案。现在我们来分析一下目前已经成形的Web打印方案: 现有的Web打印控制技术分成几种方案: 一.自定义控件完成打印 利用IE 自带的WebBrowser 控件实现打印 利用第三方控件实现打印 1、自定义控件方式 自定义控件方式就是利用VB 或VC 等工具生成COM 组件,用定义好的打印格式来分析打印源文件从而实现打印。只有将生成的组件下载并注册到客户机上,才能实现在客户端的
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 31 页
    打印。 难点主要是定义打印格式、如何来分析打印源文件。现有的比较好的方法是利用XML 技术来全面的解决问题,利用XML 可以非常容易地定义打印目标的文本、表格等内容的格式。 但对程序员的开发要求高,难度比较大。 2、利用WebBrowser 实现Web打印 WebBrowser是IE 内置的浏览器控件,无需用户下载。本文档所讨论的是有关IE6.0 版本 的WebBrowser 控件技术内容。与其相关的技术要求有:打印文档的生成、页面设置、打印操作的实现等几个环节。 (一)、打印文档的生成 1、客户端脚本方式 客户端脚本分为VBScript、JavaScript、JScript 几种脚本语言。在IE 下开发应用使用的语法为JScript 的语法,由于它和JavaScript 几乎没有什么区别,所以也可以称其为JavaScript(下面简写为JS)。一般情况下,主要使用JS 来实现DOM 文档的分析,DOM 为微软提出的一种Web文档模型,主要用来实现Web脚本编程。 利用JS 可以分析源页面的内容,将欲打印的页面元素提取出来,实现打印。通过分析源文档的内容,可以生成打印目标文档。 优点:客户端独立完成打印目标文档的生成,减轻服务器负荷; 缺点:源文档的分析操作复杂,并且源文档中的打印内容要有约定; 2、服务器端程序方式 服务器端程序方式,主要是利用后台代码从数据库中读取打印源,生成打印目标文档。当的页面生成时,还应适当考虑使用CSS 来实现强制分页控制。 优点:可以生成内容非常的丰富的打印目标文档,目标文档的内容的可控性强。由于打印内容是从数据库中获取的,所以生成操作相对简单; 缺点:服务器端负载比较大; (二)、页面设置 页面设置主要是指设置打印文档的页边距、页眉、页脚、纸张等内容。页面设置将直接影响到打印文档版面的生成效果,所以它和打印文档的生成有着密切的关系。比如:表格的 行数、大小、位置、字体的大小等。 现有的技术是利用IE6.0 内置的打印模板方式来控制页面设置,其可以对打印目标文档产生非常大的影响。打印模板可以控制页边距、页眉、页脚、奇偶页等内容,并可以将用户的设置取得,还可以将设置发送到服务器端。 打印模板技术可以自定预览窗口和打印格式,最大限度地影响目标文档和打印效果。 (三)、打印操作的实现 此功能的实现主要是利用WebBrowser控件的函数接口来实现打印、打印预览(默认的)、 页面设置(默认的)。 <object ID='WebBrowser1' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'> //打印 WebBrowser1.ExecWB(6,1); //打印设置 WebBrowser1.ExecWB(8,1); //打印预览 WebBrowser1.ExecWB(7,1); 3、一个实例项目采用的打印方案 服务器端程序方式、打印预览接口调用,下面为例, 主要参考项目中的: pageErrorPrint.aspx.vb 文件 主调用页
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 32 页
    function PrintPage(iPageIndex,strQuery) { var strURL; strURL = "PageErrorPrint.aspx?PageIndex=" + iPageIndex + "&QueryString=" + strQuery; winPrint=window.open(strURL,"","left=2000,top=2000,fullscreen=3"); } 打印页HTML 源中的预览控制 <SCRIPT language="javascript"> document.write("<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>"); WebBrowser.ExecWB(7,1); window.opener=null; window.close(); </SCRIPT> 程序头 '首先声明表格容器 Protected WithEvents phContainer As System.Web.UI.WebControls.PlaceHolder '每个表格中的记录数量 Private Const ItemPerTable As Integer = 20 关键的实现部分 '创建一个符合打印要求的表格 tabPagePrint = NewPrintTable() '将表头添加到此表格中 Call AddTableTitle(tabPagePrint) '初始化记录器 i = 0 iItemIndex = iStartPoint For Each clsItem In clsAllData.ErrorCollection If i > 0 And i Mod ItemPerTable = 0 Then '添加表格控件到页面中 phContainer.Controls.Add(tabPagePrint) '在页面中添加一个换行符 Call AddPageBreak() '创建新一轮的表格 tabPagePrint = NewPrintTable() Call AddTableTitle(tabPagePrint) End If '将记录添加到表格中 Call AddItemToTable(iItemIndex, tabPagePrint, clsItem) iItemIndex = iItemIndex + 1 i = i + 1 Next '添加表格控件到页面中
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 33 页
    phContainer.Controls.Add(tabPagePrint) 支持函数 '功能:添加页的换行符 Private Sub AddPageBreak() Dim ltBreak As LiteralControl ltBreak = New LiteralControl("<p style='page-break-before:always'>") phContainer.Controls.Add(ltBreak) End Sub 二、利用IE自身打印 这种方式比较简单,也常用的打印方式,只需要将报表页面设计好,用户通过IE菜单中的打印功能完成打印。优点是简单,容易实现,缺点是不灵活,不能控制分页,不能控制好页眉和页脚。 三、将报表导出成Word,Excel或PDF形式打印 这种方式需要将页面导出成Office文档或pdf,最低的要求是客户端已经安装用以打开Word、Excel或Pdf文档的软件。这种方式可以通过水晶报表组件或其他一些第三方控件非常容易地实现。导出成Pdf形式后打印质量和效果都很好,导出成Word或Excel后用户可以自定义打印的内容和格式。 总之,现有的打印方案各有所长,在开发过程中应根据用户的需求作选择,利用IE打印简单,容易实现,在用户需求简单或打印内容较少的情况下采用此方案比较适宜。利用自定义控件打印可以实现完全自定义,但需要较高的技术要求和开发周期。利用导出的方式则可以满足用户需要一点自定义或打印内容有多页的需求。 ------------------------------------------------------------- 1、控制"纵打"、横打”和“页面的边距。 (1)<script defer> function SetPrintSettings() { // -- advanced features factory.printing.SetMarginMeasure(2) // measure margins in inches factory.SetPageRange(false, 1, 3) // need pages from 1 to 3 factory.printing.printer = "HP DeskJet 870C" factory.printing.copies = 2 factory.printing.collate = true factory.printing.paperSize = "A4" factory.printing.paperSource = "Manual feed" // -- basic features factory.printing.header = "This is MeadCo" factory.printing.footer = "Advanced Printing by ScriptX" factory.printing.portrait = false factory.printing.leftMargin = 1.0 factory.printing.topMargin = 1.0 factory.printing.rightMargin = 1.0 factory.printing.bottomMargin = 1.0 } </script> (2) <script language="javascript"> function printsetup(){ // 打印页面设置
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 34 页
    wb.execwb(8,1); } function printpreview(){ // 打印页面预览 wb.execwb(7,1); } function printit() { if (confirm('确定打印吗?')) { wb.execwb(6,6) } } </script> </head> <body> <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT> <input type=button name=button_print value="打印" οnclick="javascript:printit()"> <input type=button name=button_setup value="打印页面设置" οnclick="javascript:printsetup();"> <input type=button name=button_show value="打印预览" οnclick="javascript:printpreview();"> <input type=button name=button_fh value="关闭" οnclick="javascript:window.close();"> ------------------------------------------------ 关于这个组件还有其他的用法,列举如下: WebBrowser.ExecWB(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1) 打印页面设置 Web.ExecWB(10,1) 查看页面属性 Web.ExecWB(15,1) 好像是撤销,有待确认 Web.ExecWB(17,1) 全选 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 关闭窗体无提示 2、分页打印 <HTML> <HEAD>
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 35 页
    <STYLE> P {page-break-after: always} </STYLE> </HEAD> <BODY> <%while not rs.eof%> <P><%=rs(0)%></P> <%rs.movenext%> <%wend%> </BODY> </HTML> 3、ASP页面打印时如何去掉页面底部的路径和顶端的页码编号 (1)ie的文件-〉页面设置-〉讲里面的页眉和页脚里面的东西都去掉,打印就不出来了。 (2)<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="YC"> <script language="VBScript"> dim hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="\Software\Microsoft\Internet Explorer\PageSetup" '//设置网页打印的页眉页脚为空 function pagesetup_null() on error resume next Set RegWsh = CreateObject("WScript.Shell") hkey_key="\header" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" hkey_key="\footer" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"" end function '//设置网页打印的页眉页脚为默认值 function pagesetup_default() on error resume next Set RegWsh = CreateObject("WScript.Shell") hkey_key="\header" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b页码,&p/&P" hkey_key="\footer" RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d" end function </script> </HEAD> <BODY> <br/>
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 36 页
    <br/> <br/> <br/> <br/> <br/><p align=center> <input type="button" value="清空页码" οnclick=pagesetup_null()> <input type="button" value="恢复页吗" οnclick=pagesetup_default()><br/> </p> </BODY> </HTML> 4、浮动帧打印 <SCRIPT LANGUAGE=javascript> function button1_onclick() { var odoc=window.iframe1.document; var r=odoc.body.createTextRange(); var stxt=r.htmlText; alert(stxt) var pwin=window.open("","print"); pwin.document.write(stxt); pwin.print(); } </SCRIPT> 4、用FileSystem组件实现WEB应用中的本地特定打印 <script Language=VBScript> function print_onclick //打印函数 dim label label=document.printinfo.label.value //获得HTML页面的数据 set objfs=CreateObject("Scripting.FileSystemObject") //创建FileSystem组件对象的实例 set objprinter=objfs.CreateTextFile ("LPT1:",true) //建立与打印机的连接 objprinter.Writeline("__________________________________") //输出打印的内容 objprinter.Writeline("| |") objprinter.Writeline("| 您打印的数据是:"&label& " |”) objprinter.Writeline("| |") objprinter.Writeline("|_________________________________|") objprinter.close //断开与打印机的连接 set objprinter=nothing set objfs=nothing // 关闭FileSystem组件对象 end function </script> 服务器端脚本: <%„„„ set conn=server.CreateObject ("adodb.connection") conn.Open "DSN=name;UID=XXXX;PWD=XXXX;" set rs=server.CreateObject("adodb.recordset")
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 37 页
    rs.Open(“select „„”),conn,1,1 „„„.%> //与数据库进行交互 HTML页面编码: <HTML> „„„ <FORM ID=printinfo NAME="printinfo" > <INPUT type="button" value="打印>>" id=print name=print > //调用打印函数 <INPUT type=hidden id=text1 name=label value=<%=„„„%>> //保存服务器端传来的数据 „„„ </HTML>
    Div+CSS布局入门教程
    在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 38 页
    下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 39 页
    DIV结构如下: │body {} /*这是一个HTML元素,具体我就不说明了*/ └#Container {} /*页面层容器*/ ├#Header {} /*页面头部*/ ├#PageBody {} /*页面主体*/ │ ├#Sidebar {} /*侧边栏*/ │ └#MainBody {} /*主体内容*/ └#Footer {} /*页面底部*/ 至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 40 页
    <title>无标题文档</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html> 这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。 下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下: <div id="container">[color=#aaaaaa]<!--页面层容器-->[/color] <div id="Header">[color=#aaaaaa]<!--页面头部-->[/color] </div> <div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color] <div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color] </div> <div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color] </div> </div> <div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color] </div> </div>
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 41 页
    为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下: /*基本信息*/ body {font: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:#00FFFF} 把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。 关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载): 1、请养成良好的注释习惯,这是非常重要的; 2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了; 3、讲解一些常用的CSS代码的含义:
    font:12px Tahoma; 这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 42 页
    margin:0px; 也使用了缩写,完整的应该是: margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px 或 margin:0px 0px 0px 0px 顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写); 以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距, 另外还有以下几种写法: margin:0px auto; 说明上下边距为0px,左右为自动调整; 我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的, 只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。 text-align:center 文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。 background:#FFF 设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。 background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式: background:#ccc url('bg.gif') top left no-repeat; 表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片, top left 表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。 top/right/left/bottom/center 用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用 background:url('bg.gif') 20px 100px; 表示X座标为20像素,Y座标为100像素的精确定位; repeat/no-repeat/repeat-x/repeat-y 分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 43 页
    height / width / color 分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。 4、如何使页面居中? 大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢? 是因为我们在#container中使用了以下属性: margin:0 auto; 按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。 如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。 通过margin:auto我们就可以轻易地使层自动居中了。 5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。 当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。 在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把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:800px;margin:10px auto} 样式说明: a:link,a:visited {font-size:12px;text-decoration:none;} a:hover {}
    这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 44 页
    #container {width:800px;margin:10px auto} 指定整个页面的显示区域。 width:800px指定宽度为800像素,这里根据实际所需设定。 margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。 上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示。 接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片: 我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。 到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗? 因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 45 页
    * 接下来的Banner部分还能使用GIF格式吗? 答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。 * 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。 切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下: <div id="menu"> <ul> <li><a href="#">首页</a></li> <li class="menuDiv"></li> <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">设计</a></li> <li class="menuDiv"></li> <li><a href="#">相册</a></li> <li class="menuDiv"></li> <li><a href="#">论坛</a></li> <li class="menuDiv"></li> <li><a href="#">关于</a></li> </ul> </div>
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 46 页
    <div id="banner"> </div> 为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。 而为什么要添加以下代码呢? <li class="menuDiv"></li> 插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。 然后我们在css.css中再写入以下样式: /*页面头部*/ #header {background:url(logo.gif) no-repeat} 样式说明: #header {background:url(logo.gif) no-repeat} 给页面头部分加入一个背景图片LOGO,并且不作填充。 这里,我们没有指定header层的高度,为什么不指定呢? 因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。 使用列表<li>制作菜单 开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。 这一节我将告诉大家如何用列表<li>来制作菜单。 <div id="menu"> <ul> <li><a href="#">首页</a></li>
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 47 页
    <li class="menuDiv"></li> <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">设计</a></li> <li class="menuDiv"></li> <li><a href="#">相册</a></li> <li class="menuDiv"></li> <li><a href="#">论坛</a></li> <li class="menuDiv"></li> <li><a href="#">关于</a></li> </ul> </div> 以上是这部分的结构,有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。 还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。 如果id="divID"这个层中包括了一个<img></img>,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。 另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。
    按照上面的介绍,我们先在css.css中写入以下代码:
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 48 页
    #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} 解释一下: #menu ul {list-style:none;margin:0px;} list-style:none,这一句是取消列表前点,因为我们不需要这些点。 margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。 #menu ul li {float:left;} 这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。 到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下: 这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;margin:0 10px} margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下: 现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下: #menu {padding:20px 20px 0 0} /*利用padding:20px 20px 0 0来固定菜单位置*/ #menu ul {float:right;list-style:none;margin:0px;}
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 49 页
    /*添加了float:right使得菜单位于页面右侧*/ #menu ul li {float:left;margin:0 10px} 这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢? 别忘了,我们早就已经留好了一个空的<li class="menuDiv"></li>,要想加入竖线就使用它了。 按照上面说的方法,我们再添加以下代码: .menuDiv {width:1px;height:28px;background:#999} 保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。 不过,菜单选项的文字却在顶部,我们再修改成以下代码: #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} 关于display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。 效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码: #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{} 这个也不多说了,没什么好说的了,最后的效果如下: 这一节到这里就完毕了
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 50 页
    这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试: <div style="border-bottom:1px dashed #ccc"></div> 大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。 <div id="banner"></div> 以上代码便可以实现设计草图中的banner,在css.css中加入以下样式: #banner { background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/ width:730px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:240px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/ } 通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。 另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 51 页
    <div id="pagebody"><!--页面主体--> <div id="sidebar"><!--侧边栏--> </div> <div id="mainbody"><!--主体内容--> </div> </div> 以上是页面主体部分,我们在css.css中添加以下样式: #pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/ } #sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/ } #mainbody { width:570px; text-align:left;
    《Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http://jessezhao.cnblogs.com MSN/Mail:prolibertine@gmail.com
    第 52 页
    float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden } 为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码: border:1px solid #E00; height:200px 保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。 而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。 CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。
    展开全文
  • CSS中DIV定位

    千次阅读 2012-08-11 17:51:03
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用...
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用div标签;三是class
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“div 套 div”的缺点,过量使用div标签;三是class过多,造成class灾难。

    要正确使用css,对css的基本只是就不能够不了解。既然是漫谈,我这里就只讲四个方面,最后给出xkland项目作为实例。

    一、CSS中的块模型

    在CSS的定义中,有的html标签被浏览器当成一个块来显示,比如div、table、p、ul等等,我们称之为块元素;有的html标签被浏览器显示在文本行之类,如a、span、font等等,我们称之为行内元素。行内元素我这里就不讲了,只讲讲块元素的模型。

    每一个块元素都可以分为context、padding、boder和margin几个部分,我们常说的宽和高,通常指的是context的宽和高(也有可能是context+padding,具体跟浏览器有关),padding代表内容和边框之间的填充,margin代表边框之外的空白,如下图:
    /

    这几个部分都是可以通过CSS进行指定的,当然,CSS还可以控制背景,因此,我们可以通过CSS来灵活控制我们页面的外观。

    二、CSS中的文档流模型

    所有的块元素在html文档中是按照它们出现在文档中的先后顺序排列的(当然,嵌套不在此列),每一个块都会另起一行。如下图:
    /

    他们对应的html如下:
    /<div id="div1">div1</div>
    /<div id="div2">div2</div>
    /<div id="div3">div3</div>

    为了定义他们的宽度、高度还有边框,我们定义如下的CSS:
    /#div1  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    /#div2  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    /#div3  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    三、CSS中的相对定位和绝对定位模型

    在文档流中,每个块元素都会被安排到流中的一个位置,我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位,相对定位是相对于该块元素在文档流中的位置的,比如,我们可以使用相对定位把div2放到div1的右侧,CSS代码如下:
    /#div1  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    /#div2  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    position: relative;
    /    top: -64px;
    /    left: 204px;
    /}

    /#div3  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /}

    下面是效果:
    /

    可以看到一个有趣的现象,那就是虽然我们把div2移走了,但是div1和div3中间还是有一个空间,说明相对定位的元素是会占据文档流空间的,这里的div2就是典型的“站着茅坑不拉屎”。

    使用绝对定位也是可以把div2摆到div1的右边的,而且绝对定位是不会占据文档流空间的,如下图,div1和div3之间没有空白:
    /

    div2的CSS代码:
    /#div2  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    position: absolute;
    /    top: 15px;
    /    left: 214px;
    /}


    绝对定位是个好东西,可以把内容显示到页面上的任何位置,但是对于我们程序员来说,却不能使用太多的绝对定位,因为使用程序动态向div中添加内容,div的大小是不可知的,无法将每一个div的位置都定死。

    四、CSS中的浮动和清除模型

    在CSS中,最让人不好理解的应该算是float和clear意义了。float可以达到这样一个效果,就是本来应该一行一个的块元素,如果定义了float属性,则只要行的空间足够,它会跑别的float元素的屁股后面,而不再会单独占用一行,如下图:
    /

    这里把div2和div3都定义了为浮动,代码如下:

    /#div2  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    /#div3  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    那什么情况下需要clear呢?这是因为float的元素和绝对定位的元素一样,也是不占用文档空间的,因此,如果我们把div2和div3都嵌套在div1中, 并且把div2和div3都定义为浮动,那么由于它们不占用文档空间,设置为浮动后div2和div3都不属于div1的内容了,所以作为父元素的div1没有内容填充,不知道自动扩展大小,以至于显示出来div2和div3会跑到div1的外面,如下图:
    /

    下面是它们的html代码:
    /<div id="div1">div1
    /<div id="div2">div2</div>
    /<div id="div3">div3</div>
    /</div>

    下面是它们的css代码:
    /#div1  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 450px;
    /    margin:2px;
    /}

    /#div2  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    /#div3  {
    /    border: 1px solid #000099;
    /    height: 60px;
    /    width: 200px;
    /    margin:2px;
    /    float:left;
    /}

    因为float的元素不占用文档流空间,有时候被的元素还会重叠到float元素上,这里我就不举例了。

    为了解决上面的问题,就需要在float之后的元素上面使用clear,在此例中,我们在div3后面加入一个空段落,并设置其为clear,如下:
    /<div id="div1">div1
    /<div id="div2">div2</div>
    /<div id="div3">div3</div>
    /<p class="clear"></p>
    /</div>

    clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下

    下面是新增加的空段落的CSS代码:

    /.clear {
    /    clear:left;
    /}

    这时div1有了p这块内容(尽管p里面是空的),并且clear:为left, 使得p的上外边框边界刚好在其上浮动元素的下外边距边界之下。
    效果图:
    /

    还是以我的xkland项目为例,来设计一个完整的页面吧。下面是我的welcome.jsp页面的布局图:
    /

    在这个页面中,我完全摆脱了“表格套表格”的模式,而且除了最上面一行在一个div里面显示logo、advertisment和appendix的div外,其它的地方没有div嵌套。尽量减少div嵌套的有力武器是理解div的意义,div代表division,是部分的意思,也就是说只有在确实没有标签能够作为一个部分的根元素的时候才需要div。在上面的例子中,菜单条就没有使用div。菜单条是使用列表实现的,因为列表的都包含在ul标签中,因此没有必要使用div。下面是上图的html代码:

    /<body>
    /<div id="header">
    /  <div id="logo">此处显示 id "logo" 的内容</div>
    /  <div id="appendix">此处显示 id "appendix" 的内容</div>
    /  <div id="advertisment">此处显示 id "advertisment" 的内容</div>
    /</div>
    /<ul id="menu">
    /  <li>菜单项一</li>
    /  <li>菜单项二</li>
    /  <li>菜单项三</li>
    /  <li class="lastMenuItem">最后一个菜单项</li>
    /</ul>
    /<div id="loginView">此处显示 id "loginView" 的内容</div>
    /<div id="catalog">此处显示 id "catalog" 的内容</div>
    /<div id="search">此处显示 id "search" 的内容</div>
    /<div id="newTopics">此处显示 id "newTopics" 的内容</div>
    /<div id="newReply">此处显示 id "newReply" 的内容</div>
    /<div id="hotTopics">此处显示 id "hotTopics" 的内容</div>
    /<div id="statistics">此处显示 id "statistics" 的内容</div>
    /<div id="hotGroups">此处显示 id "hotGroups" 的内容</div>
    /<div id="hotUsers">此处显示 id "hotUsers" 的内容</div>
    /<div id="footer">此处显示 id "footer" 的内容</div>
    /</body>

    是不是很简洁?

    而关于页面美化和布局的内容,全部转移到了CSS中。先来说说菜单项,菜单项是使用列表实现的,而列表常规的显示样式是下面这样的:
    /

    怎么样才能让它们显示到一行呢?那就是我前面讲到的float属性。我们给id为menu的ul定义如下样式,来显示边框:
    /#menu  {
    /    border: 1px solid #0F54C3;
    /    padding:5px;
    /    margin:0px;
    /    width:804px;
    /    margin:1px 0px;
    /    height: 12px;
    /}

    为了避免前面讲到的float元素跑到边框之外,我这里没有使用clear,而是将menu的height属性定义为12px,和页面上的字体等高,而菜单只有一行,因此不会跑到边框之外。menu中的每一个菜单项都是一个li,我们可以通过#menu li { }来定义它的样式,这种方式叫做后代选择器,充分使用这种选择器,是避免使用过多的类的有力武器,从前面的html代码中可以看出,我只对最后一个菜单项定义了类,因为我不想最后一个菜单后面还跟一个小竖线,菜单项之间的小竖线是通过定义li的右边框样式做到的,其css代码如下:
    /#menu li  {
    /    float:left;
    /    padding-left:10px;
    /    padding-right:10px;
    /    border-right-width: 1px;
    /    border-right-style: solid;
    /    border-right-color: #0F54C3;
    /}

    /#menu .lastMenuItem  {
    /    border-right-style:none;
    /}


    对于下面那么多的框框,除了#netTopics我使用绝对定位把它摆到了右边作为主要内容区之外,其它的都是顺着文档流摆下来的,只定义了宽度,而不需要定义位置。

    如果我们要美化页面,比如添加网站特有的图片,我们可以修改#logo、#advertisment、#appendix的css代码,甚至当以后别人美化我的网站时,可以把这三个div的visible设置为false,而直接定义#header的样式。在这里,我们只简单的把#logo的背景设置为logo图片,并去掉边框。下面是css代码:

    /#logo  {
    /    float:left;
    /    height: 60px;
    /    width: 200px;
    /    background:url(../images/xkland_logo.gif) no-repeat left top;
    /}


    对于其他的div,我们还需要为它们添加内容,#loginView这个稍微特殊一点,需要添加标题和表单,而其他的div就简单得多,只需要标题和列表就够了。这里我们以#loginView为例,下面是添加内容之后的效果:
    /

    别看这里面布局也挺复杂的,我也完全没有使用表格。下面是html代码:

    /<div id="loginView">
    /  <h3>用户登录</h3>
    /<form name="form1" id="form1" method="post" action="">
    /  <p>用户名:
    /      <input class="textInput" name="userName" type="text" id="userName" />
    /  </p>
    /  <p>密 码: 
    /    <input class="textInput" name="password" type="password" id="password" />
    /  </p>
    /  <ul>
    /      <li>忘记密码?</li>
    /      <li>新用户注册</li>
    /      <li><input type="checkbox" name="checkbox" value="checkbox" />记住我</li>
    /  </ul>
    /  <p class="clear">
    /  <input type="submit" name="Submit" value="登 录" />
    /  </p>
    /</form>
    /</div>

    可以看到,我使用的h3标签来作为标题,这样避免了为标题另外嵌套一个div,对输入文本框定义了类textInput来定义它们的样式,而其他的文本内容,我都是使用了p标签和ul、li标签,从上面的效果图就可以看出CSS的强大。下面是它们的css代码:
    /#loginView  {
    /    border: 1px solid #0F54C3;
    /    width: 280px;
    /    margin:1px 0px;
    /}

    /h3  {
    /    border-bottom-width: 2px;
    /    border-bottom-style: solid;
    /    border-bottom-color: #0F54C3;
    /    padding-top: 5px;
    /    padding-right: 5px;
    /    padding-bottom: 5px;
    /    padding-left: 15px;
    /    margin: 0px;
    /    font-size: 10.5pt;
    /}

    /#loginView p  {
    /    margin:3px;
    /    text-align:center;
    /}

    /#loginView form  {
    /    margin:0px;
    /}

    /.textInput  {
    /    border: 1px solid #CCCCCC;
    /    width: 15em;
    /    height:12px;
    /}

    /#loginView ul  {
    /    margin:8px 10px 3px 10px;
    /}

    /#loginView ul li  {
    /    float: left;
    /    width: 130px;
    /    height:18px;
    /}

    /.clear  {
    /    clear: left;
    /}

    总之,使用CSS将程序和美工分离是绝对的真理,我们程序员只要能够在框框内输出正确的数据就够了,这样能够尽量减少程序的bug,美化页面的事就让界面设计师去做吧。当然,我们程序员还是要能够在html中设计正确的division划分和嵌套,让界面设计师在设计界面的时候能够找到定义CSS的锚点

    展开全文
  • div+css基础教程

    千次阅读 2013-11-21 00:29:05
    本文存下来作为备忘。 第一节 了解div+css 一、什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和背景的元素。div的起始标签和结束标签之间的...

    本文存下来作为备忘。

    第一节  了解div+css

    一、什么是div+css

    div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

    css是英语cascadingstyle sheets(层叠样式表单)的缩写,它是一种用来表现 html 或 xml 等文件式样的计算机语言。

    div+css是网站标准(或称“web标准”)中常用术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为xhtml网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位。

    html语言自html4.01以来,不再发布新版本,原因就在于html语言正变得越来越复杂化、专用化。即标记越来越多,甚至各个浏览器生产商也开发出只适合于其特定浏览器的html标记,这显然有碍于html网页的兼容性。于是w3c组织进而重新从sgml中获取营养,随后,发布了xml,xml是一种比html更加严格的标记语言,全称是可扩展标记语言。但是xml过于复杂,且当前的大部分浏览器都不完全支持xml。于是xhtml这种语言就派上了用场,xhtml语言就是一种可以将html语言标准化,用xhtml语言重写后的html页面可以应用许多xml应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。

    二、div+css的优势

    1、符合w3c标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。

    2、对浏览者和浏览器更具亲和力。由于css富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是什么,您的网站都能很好的兼容。

    3、使页面载入得更快。页面体积变小,浏览速度变快,由于将大部分页面代码写在了css当中,使得页面体积容量变得更小。相对于表格嵌套的方式,div+css将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。

    4、保持视觉的一致性。以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。而使用div+css的制作方法,将所有页面,或所有区域统一用css文件控制,就避免了不同区域或不同页面体现出的效果偏差。

    5、修改设计时更有效率。由于使用了div+css制作方法,使内容和结构分离,在修改页面的时候更加容易省时。根据区域内容标记,到css里找到相应的id,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式,在团队开发中更容易分工合作而减少相互关联性。

    6、搜索引擎更加友好。相对与传统的table,

    采用div+css技术的网页,由于将大部分的html代码和内容样式写入了css文件中,这就使得网页中代码更加简洁,正文部分更为突出明显,便于被搜索引擎采集收录。

    三、css+div网站设计的缺陷

    尽管div+css具有一定的优势,不过现阶段css+div网站建设存在的问题也比较明显,主要表现在:

    1、对于css的高度依赖使得网页设计变得比较复杂。相对于html4.0中的表格布局(table),css+div尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了,这在一定程度上影响了xhtml网站设计语言的普及应用。

    2、css文件异常将影响整个网站的正常浏览。css网站制作的设计元素通常放在一个或几个外部文件中,这些文件有可能相当复杂,甚至比较庞大,如果css文件调用出现异常,那么整个网站将变得惨不忍睹。

    3、对于css网站设计的浏览器兼容性问题比较突出。虽然说div+css解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,css+div还有待于各个浏览器厂商的进一步支持。

    4、css+div对搜索引擎优化与否取决于网页设计的专业水平而不是css+div本身。css+div网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比html网站有更简洁的代码设计。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

    如何更有效、更合理的运用web2.0设计标准,这需要很长时间的学习和锻炼。而如何将div+css运用的更好,需要通过不断的实践和体检,积累丰富的设计经验,才能很好的掌握这门技术。

     

    第二节  css布局标签

    一、什么时候应该用div?

    div元素是一个标签,但多层嵌套的div会严重影响代码的可阅读性。什么时候应该用div虽然没有什么硬性的规定,但div更适用于大体框架的定位。

    例如我们要定义一块头部的区域,一般会这样定义一个div:

    <ul id="navbar">
    <li id="articles">articles</li>
    <li id="topics">topics</li>
    <li id="about">about</li>
    <li id="contact">contact</li>
    <li id="contribute">contribute</li>
    <li id="feed">feed</li>
    </ul>
    <h1 id="masthead">
    <a href="/">
    <img src="/pix/alalogo.gif" alt="a list apart: for peoplewho make websites"
    />
    </h1>
    no. 214

    这个例子定义了最上面的导航(ul部分),左边的logo和no.214的标记.

    二、最常用的布局标签

    h1:这个标签表达的意思就如同它原先的作用一样明显(大标题)。

    h2:使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p

    ul:这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分,所以还是用ul来的比较确切。

    b:这个已经不再推荐使用的标签,但因为短小,在布局上却能带来不少的方便,有些时候(比如细小地方的布局定义)还是不错的选择。

    css放入网页的方式,可以在html文件内直接宣告样式,也可以在外部连接套用。外部连接套用时,所有的css样式都存在另外一个文件中,文件名称为.css。

    第三节  页面布局设计

    在网页制作设计中,第一步就是构思,可以用photoshop或fireworks等图片处理软件将需要制作的页面布局简单的构画出来,然后根据布局图设计。

    一般来说,页面包括:顶部部分,其中又包括了logo、menu和一幅banner图片;内容部分,又可分为侧边栏、主体内容;底部,包括一些版权信息。可以命名为:顶部层header、内容层pagebody、侧边栏层sidebar、主体内容层mainbody、底部层footer。层的嵌套关系div结构设计为:

    │body {} /*这是一个html元素
    └#container {} /*页面层容器*/ 
    ├#header{} /*页面头部*/
    ├#pagebody {} /*页面主体*/ 
    │ ├#sidebar {} /*侧边栏*/ 
    │ └#mainbody{} /*主体内容*/ 
    └#footer {} /*页面底部*/ 

    接下来就可以书写html代码和css了。

    第四节  写入整体层结构与css

    新建一个文件夹,命名为“div+css布局练习”,在文件夹下新建两个空的记事本文档。

    将一个记事本文档命名为index.htm,输入以下内容:

     <!doctype html public"-//w3c//dtd xhtml 1.0 transitional//en"
    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
     <htmlxmlns="http://www.w3.org/1999/xhtml">
     <head>
     <metahttp-equiv="content-type" content="text/html;charset=gb2312" />
     <title>无标题文档</title>
     <link href="css.css"rel="stylesheet" type="text/css" />
     </head>
     <body>
     </body>
     </html>
     这是xhtml的基本结构。下面,我们在<body></body>标签对中写入div的基本结构,为了使以后阅读代码更简易,我们添加相关注释:

     <div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]
    <div id="header">[color=#aaaaaa]<!--页面头部-->[/color]
    </div>
    <div id="pagebody">[color=#aaaaaa]<!--页面主体-->[/color]
    <div id="sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
    </div>
    <div id="mainbody">[color=#aaaaaa]<!--主体内容-->[/color]
    </div>
    </div>
    <div id="footer">[color=#aaaaaa]<!--页面底部-->[/color]
    </div>
     </div>
     将另一个记事本文档命名为css.css,写入css信息,代码如下:

     

    /*基本信息*/
     body {font:12pxtahoma;margin:0px;text-align:center;background:#fff;}
     /*页面层容器*/
     #container {width:100%}
     /*页面头部*/
     #header {width:800px;margin:0auto;height:100px;background:#ffcc99}
     /*页面主体*/
     #pagebody {width:800px;margin:0auto;height:400px;background:#ccff00}
     /*页面底部*/
     #footer {width:800px;margin:0auto;height:50px;background:#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:0px;margin-left:0px,也可以写成margin:0px 0px 0px 0px,顺序是 上 / 右 / 下 / 左,还可以书写为margin:0(缩写);这个样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,另外还有以下几种写法:margin:0pxd auto;说明上下边距为0px,左右为自动调整;以后使用到的padding属性和margin有许多相似之处,他们的参数是一样的,只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。

    text-align:center 文字对齐方式,可以设置为左、右、中,这里设置为居中对齐。

    background:#fff 设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#ffffff。background可以用来给指定的层填充背景色、背景图片,以后会用到这个格式:background:#ccc:

    url('bg.gif') topleft no-repeat;表示使用#ccc(灰度色)填充整个层,使用bg.gif做为背景图片,top left表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。top/right/bottom/left/center用于定位背景图片,分别表示上 /右 / 下 / 左 / 中;还可以使用background:url('bg.gif') 20px100px;表示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,左右为自动,因此该层就会自动居中了。如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。

    第五节  页面顶部制作

    当我们写好了页面大致的div结构后,我们就可以开始细致地对每一个部分进行制作了。

     我们把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:800px;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下对设计好的图片进行切片,第一部分

    为logo部分,由于logo图片并没有太多的颜色,这里我于是将这一部分保存为gif格式(这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色),调色板选择为精确,选择alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。第二部分为banner部分,因为banner部分是一个细致的图片,如果使用gif格式颜色会有太大的损失,所以必须使用jpeg格式,将文件导出为banner.jpg。

     然后我们在css.css中再写入以下样式:

     /*页面头部*/

     #header {background:url(logo.gif)no-repeat}

     这个样式给页面头部分加入一个背景图片logo,并且不作填充。这里,我们没有指定header层的高度,因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。

     下面我们制作菜单,代码如下:

    <div id="menu">
    <ul>
    <li><a href="#">首页</a></li>
    <li class="menudiv"></li>
    <li><a href="#">博客</a></li>
    <li class="menudiv"></li>
    <li><a href="#">设计</a></li>
    <li class="menudiv"></li>
    <li><a href="#">相册</a></li>
    <li class="menudiv"></li>
    <li><a href="#">论坛</a></li>
    <li class="menudiv"></li>
    <li><a href="#">关于</a></li>
     </ul>
    </div>
    <div id="banner">
    </div>

     以上<ul></ul>、<li></li>这两个html元素主要的作用就是在html中以列表的形式来显示一些信息。对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。<li class="menudiv"></li>这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。需要分清楚的是,当在html中定义为id="divid"时,在css对应的设置语法则是#divid{}存,如果在html中定义为class="divid"时,则在css中对应的设置语法是.divid。如果id="divid"这个层中包括了一个<img></img>,则这个img在css中对应的设置语法应该是#dividximg {},同样,如果是包含在class="divid"这个层中时,则设置语法应该是.divid img {}。另外,html中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在css中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的css代码都应该写在大括号{}中。

    然后我们在css.css中再写入以下样式:

     #menu ul{list-style:none;margin:0px;}

     #menu ul li {float:left;}

    第一个样式list-style:none,这一句是取消列表前点,因为我们不需要这些点。margin:0px,这一句是删除ul的缩进,这样做可以使所有的列表内容都不缩进。第二个样式使用了浮动属性(float),float:left是让内容都在同一行显示。

     我们在#menu ul li {}再加入代码margin:0 10px,改成:

     #menu ul li {float:left;margin:010px}

     margin:0 10px的作用是让列表内容之间产生一个20像素的距离(左:10px,右:10px)。

     明白了这些,我们再来固定菜单的位置,把代码改成如下:

     #menu {padding:20px 20px 0 0}

     /*利用padding:20px 20px 0 0来固定菜单位置*/

     #menu ul{float:right;list-style:none;margin:0px;}

     /*添加了float:right使得菜单位于页面右侧*/

     #menu ul li {float:left;margin:010px}

     这样,位置就确定了。下面在菜单间加入竖线,对留好的空的<liclass="menudiv"></li>,再添加以下代码:

     .menudiv{width:1px;height:28px;background:#999}

     保存预览一下,竖线已经出来。不过,菜单选项的文字却在顶部,我们再修改成以下代码:

     #menu ul li {float:left;margin:010px;display:block;line-height:28px}

     效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码:

     #menu ul li a:link,#menu ul lia:visited {font-weight:bold;color:#666}

     #menu ul li a:hover{}

    第六节  页面顶部的完整代码

    下面给出本例页面顶部的完整代码,供学习参考:

     index.htm的内容:

     

    <!doctype html public"-//w3c//dtd xhtml 1.0 transitional//en"
    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
     <htmlxmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="content-type"content="text/html; charset=gb2312" />
     <title>无标题文档</title>
     <link href="css.css"rel="stylesheet" type="text/css" media="all"/>
     </head>
      
     <body>
     <div id="container">
     <div id="header">
     <div id="menu">
     <ul>
     <li><a href="#">首页</a></li>
     <li class="menudiv"></li>
     <li><a href="#">博客</a></li>
     <li class="menudiv"></li>
     <li><a href="#">设计</a></li>
     <li class="menudiv"></li>
     <li><a href="#">相册</a></li>
     <li class="menudiv"></li>
     <li><a href="#">论坛</a></li>
     <li class="menudiv"></li>
     <li><a href="#">关于</a></li>
     </ul>
     </div>
     <div id="banner">
     </div>
     </div>
     </div>
     </body>
     </html>  

     css.css的代码:

     

    /*基本信息*/
     body {font:12pxtahoma;margin:0px;text-align:center;background:#fff;}
     a:link,a:visited{font-size:12px;text-decoration: none;}
     a:hover{}
      
     /*页面层容器*/
     #container{width:800px;height:600px;margin:10px auto}
      
     /*页面头部*/
     #header {background:url(logo.gif)no-repeat}
     #menu {padding:20px 20px 0 0}
     #menu ul{float:right;list-style:none;margin:0px;}
     #menu ul li {float:left;display:block;line-height:30px;margin:010px}
     #menu ul li a:link,#menu ul lia:visited {font-weight:bold;color:#666}
     #menu ul li a:hover{}
     .menudiv{width:1px;height:28px;background:#999}
     #banner {background:url(banner.jpg)0 30px
    no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid
    #efefef;clear:both}
      
     /*页面主体*/
     #pagebody {width:800px;margin:0auto;height:400px;background:#ccff00}
      
     /*页面底部*/
     #footer {width:800px;margin:0auto;height:50px;background:#00ffff}

    第七节  div+css的border和clear属性

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

     <divstyle="border-bottom:1px dashed #ccc"></div>

     其实利用dashed、solid、dotted...等可以制作出许多效果来,实线、虚线、双线、阴影线等等。

     <divid="banner"></div>

     以上代码便可以实现banner,在css.css中加入以下样式:

     #banner {

     background:url(banner.jpg) 0 30pxno-repeat; /*加入背景图片*/

     width:730px; /*设定层的宽度*/

     margin:auto; /*层居中*/

     height:240px; /*设定高度*/

     border-bottom:5px solid #efefef; /*画一条浅灰色实线*/

     clear:both /*清除浮动*/

     }

     通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。

    再看看clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。

     <divid="pagebody"><!--页面主体-->

     <divid="sidebar"><!--侧边栏-->

     </div>

     <divid="mainbody"><!--主体内容-->

     </div>

     </div>

     以上是页面主体部分,我们在css.css中添加以下样式:

     #pagebody {
     width:730px; /*设定宽度*/
     margin:8px auto; /*居中*/
     }
     #sidebar {
     width:160px; /*设定宽度*/
     text-align:left; /*文字左对齐*/
     float:left; /*浮动居左*/
     clear:left; /*不允许左侧存在浮动*/
     overflow:hidden; /*超出宽度部分隐藏*/
     }
     #mainbody {
     width:570px;
     text-align:left;
     float:right; /*浮动居右*/
     clear:right; /*不允许右侧存在浮动*/
     overflow:hidden
     }

     为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:

     border:1px solid #e00;

     height:200px

    保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。

    css中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。

    第八节  div+css常见错误

    1. 检查html元素是否有拼写错误、是否忘记结束标记

     即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

     2. 检查css是否正确

     检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用cleancss来检查 css的拼写错误。cleancss本是为css减肥的工具,但也能检查出拼写错误。

     3. 确定错误发生的位置

     如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。

     4. 利用border属性确定出错元素的布局特性

     使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。

     5. float元素的父元素不能指定clear属性

     macie下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是macie的著名的bug,倘若不知道就会走弯路。

     6. float元素务必指定width属性

    很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。

     7. float元素不能指定margin和padding等属性

     ie在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为ie指定特别的值。

     8. float元素的宽度之和要小于100%

     如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

     9. 是否重设了默认的样式?

     某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

     10. 是否忘记了写dtd?

     如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行dtd:

     <!doctype html public"-//w3c//dtd html 4.01 transitional//en"

    "http://www.w3.org/tr/html4/loose.dtd">

    展开全文
  • css div定位详解

    千次阅读 2012-01-31 23:08:54
    网上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位、浮动等概念;二是虽然避免了“表格套表格”的缺点,却带来了“divdiv”的缺点,过量使用div...
  • div+css笔记

    千次阅读 2016-08-05 13:55:49
    本文存下来作为备忘。 第一节 了解div+css 一、什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和背景的元素。div的起始标签和结束...
  • DIV+CSS布局大全

    千次阅读 2018-08-11 14:00:27
    Div + CSS 布局大全》 博客园 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine
  • table和div的比较

    千次阅读 2012-03-06 10:06:23
    其实并不是div比table快,只是div有些优点会使它“快”过table。 1、div可以下载一个显示一个,而table要完整下载才能显示。 2、div可以用更少的div来排版。 原因主要在,table标记要解析到对应的才会显示,...
  • DIV的使用

    千次阅读 2011-09-21 11:15:14
    当你把文字,图象,或其他的放在 DIV 中,它可称作为DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 ...
  • 这是一款蓝色vista风格css导航菜单,第一眼看上去很大气的菜单,采用那种比较艳但不刺眼的蓝色作为菜单背景色,另外加入了一些鼠标效果,在鼠标滑上菜单的时候,对应菜单突出显示,背景发生变化,CSS代码还可有再...
  • CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码。 今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析...
  • CSS+DIV 好处

    千次阅读 2007-07-24 13:28:00
    采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,就在今天下午,IT168首页改版就选择了这种做法。其实,早些时候像阿里巴巴、163等大型门户站点就已经完成了重构工作。Robin早在去年就已经有了使用CSS+...
  • Vue 删除列表项的淡出动画

    千次阅读 2019-05-25 14:45:00
    使用vue前端框架尝试做一个购物车页面,勾选进购物车的商品列表可删除,代码如下: **<template>部分** <div class="goods-list-wrap"> <transition-group name="list-complete"> <div class...
  • SPAN 和 DIV 的区别

    千次阅读 2011-08-06 22:56:56
     SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他
  • Python---获取div标签中的文字

    万次阅读 2018-04-12 22:02:25
     问题1:在编程过程中成功获取了目标的名字,但是它存在于div框架中,我们要做的就是将div中的文字与标签分开,在这里我们用的是正则表达式  问题2: 上代码: <span style="color:#000000"># -*- ...
  • html中的div是什么意思

    千次阅读 多人点赞 2015-05-14 17:52:47
    当你把文字,图象,或其他的放在 DIV 中,它可称作为DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 ...
  • li 的点超出div

    千次阅读 2012-09-26 14:49:04
    设置或检索作为对象的列表项标记如何根据文本排列。 假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。 仅作用于具有...
  • Div+CSS 布局大全

    千次阅读 2013-03-29 10:15:56
    Div+CSS 布局大全》               整理者:Jesse Zhao   网站:http://JesseZhao.cnblogs.co m                                           ...
  • 在页面设计时,经常会使用div制作蒙版或模拟弹出窗口,但在IE6下,当div下方有下拉列表框select元素的时候,下拉列表框会划破div显示在div之上,不论z-index设为何值均会出现此问题,可能由于下拉列表控件的弹出式...
  • 在综合实战过程中,每章都会穿插讲解一CSS应用 技术,如文字、图片、背景、表格、表单和 菜单等网页元素的样式设计技法, 《新手学DIV+CSS商业网站布局从入门到精通( 实战案例版)》内容翔实、结构清晰,并注意...
  • javascript添加删除div,对象的方法

    千次阅读 2017-04-22 10:56:53
    //删除一个元素或是div function deldiv(divid){ var div=document.getElementById(divid);...div.parentNode.removeChild(div); } //添加一个div function adddiv(divid){ var div=document.cr
  • DIV+CSS排版实用技巧

    千次阅读 2014-03-10 16:44:57
    相信大家对DIV+CSS布局应该有所了解,那么你对DIV+CSS排版是否熟悉,这里和大家分享一些DIV+CSS排版技巧,主要包括设置背景属性,首行缩进,竖排文字等内容,希望对你的学习有所帮助。   必需知道的DIV+CSS排版...
  • 给每一项点击的地方添加一个点击事件,把当前的列表项作为参数传递过去 在methods里面写点击事件: 首先判断列表项有没有这个字段,没有的话就通过this.$set添加字段,然后进行取反,有这个字段的话直接取反。 ...
  • DIV+CSS技术的研究

    千次阅读 2013-05-29 11:19:47
    第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再...
  • CSS的DIV编写一个页面

    千次阅读 2012-08-27 14:29:01
    这一段时间打算完全用CSS的DIV编写一个页面,做了两天思绪就有点乱了。 有的时候把某一个问题单独抽出来看感觉很简单。而复合起来就难的多,各种各样的问题就来了。 程序中最讨厌的就是找BUG了。思路前后衔接不上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,944
精华内容 27,177
关键字:

div项作为列表