关闭

关闭

关闭

封号提示

内容

首页 DIV+CSS布局大全.pdf

DIV+CSS布局大全.pdf

DIV+CSS布局大全.pdf

上传者: 852153492 2011-09-19 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《DIV+CSS布局大全pdf》,可适用于IT/计算机领域,主题内容包含《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmai符等。

《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页《DivCSS布局大全》整理者:JesseZhao网站:http:JesseZhaocnblogscom送给我最爱的女朋友蜜蜜希望她可以永远快乐幸福!!!《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页目录div+css布局入门XHTML下cssdiv布局总结网页设计DIVCSS第天:选择什么样的DOCTYPE第一天什么是DOCTYPE我们选择什么样的DOCTYPE补充网页设计DIVCSS第天:什么是名字空间网页设计DIVCSS第天:定义语言编码网页设计DIVCSS第天:调用样式表外部调用样式表双表法调用样式表网页设计DIVCSS第天:head区的其他设置收藏夹小图标为搜索引擎准备的内容网页设计DIVCSS第天:XHTML代码规范所有的标记都必须要有一个相应的结束标记所有标签的元素和属性的名字都必须使用小写所有的XML标记都必须合理嵌套所有的属性必须用引号""括起来把所有<和特殊符号用编码表示给所有属性赋一个值不要在注释内容中使“”网页设计DIVCSS第天:CSS入门基本语法规范颜色值定义字体《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页群选择器派生选择器id选择器类别选择器定义链接的样式网页设计DIVCSS第天:CSS布局入门定义DIVCSS盒模型辅助图片一律用背景处理网页设计DIVCSS第天:第一个CSS布局实例确定布局定义body样式定义主要的div自适应高度网页设计DIVCSS第天:自适应高度网页设计DIVCSS第天:不用表格的菜单不用表格的菜单(纵向)不用表格的菜单(横向)网页设计DIVCSS第天:校验及常见错误XHTML校验CSS校验CSS的十八般技巧WEB打印实例教程DivCSS布局入门教程《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页div+css布局入门你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习:第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前你应当先考虑内容的语义和结构然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策不知道该转换成对应的什么CSS语句。当你解决了第一种问题知道了如何结构化你的HTML我再给出一个列表详细列出原来的表现属性用什么CSS来代替。结构化HTML我们在刚学习网页制作时总是先考虑怎么设计考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。如果你希望你的HTML页面用CSS布局(是CSSfriendly的)你需要回头重来先不考虑“外观”要先思考你的页面内容的语义和结构。外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来CSSZenGarden是一个典型的例子。CSSZenGarden帮助我们最终认识到CSS的强大力量。HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义显示在任何地方任何网络设备上。开始思考首先要学习什么是"结构"一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块以及每块内容服务的目的然后再根据这些内容目的建立起相应的HTML结构。如果你坐下来仔细分析和规划你的页面结构你可能得到类似这样的几块:标志和站点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明)我们通常采用DIV元素来将这些结构定义出来类似这样:<divid="header"><div><divid="content"><div><divid="globalnav"><div><divid="subnav"><div><divid="search"><div><divid="shop"><div><divid="footer"><div>这不是布局是结构。这是一个对内容块的语义说明。当你理解了你的结构就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块也可以嵌套另一个DIV。内容块可以包含任意的HTML元素标题、段落、图片、表格、列表等等。根据上面讲述的你已经知道如何结构化HTML现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方再指定这个块的颜色、字体、边框、背景以及对齐属性等等。使用选择器是件美妙的事id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则就可以完全不同于#content里的图片规则。《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnava:link或者#subnava:link或者#contenta:link。你也可以定义不同内容块中相同元素的样式不一样。例如通过#contentp和#footerp分别定义#content和#footer中p的样式。从结构上讲你的页面是由图片、链接、列表、段落等组成的这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响它们可以被定义为任何的表现外观。一个仔细结构化的HTML页面非常简单每一个元素都被用于结构目的。当你想缩进一个段落不需要使用blockquote标签只要使用p标签并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签margin是表现属性前者属于HTML后者属于CSS。(这就是结构于表现的相分离)良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如原先的代码<tablewidth=""cellpadding=""border=""align="left">现在可以只在HTML中写<table>所有控制表现的东西都写到CSS中去在结构化的HTML中table就是表格而不是其他什么(比如被用来布局和定位)。亲自实践一下结构化上面说的只是最基本的结构实际应用中你可以根据需要来调整内容块。常常会出现DIV嵌套的情况你会看到"container"层中又有其它层结构类似这样:<divid="navcontainer"><divid="globalnav"><ul>alist<ul><div><divid="subnav"><ul>anotherlist<ul><div><div>嵌套的div元素允许你定义更多的CSS规则来控制表现例如:你可以给#navcontainer一个规则让列表居右再给#globalnav一个规则让列表居左而给#subnav的list另一个完全不同的表现。用CSS替换传统方法下面的列表将帮助你用CSS替换传统方法:HTML属性以及相对应的CSS方法HTML属性CSS方法说明align="left"align="right"float:leftfloat:right使用CSS可以浮动任何元素:图片、段落、div、标题、表格、列表等等当你使用float属性必须给这个浮动元素定义一个宽度。marginwidth=""leftmargin=""marginheight=""topmargin=""margin:使用CSS,margin可以设置在任何元素上,不仅仅是body元素更重要的你可以分别指定元素的top,right,bottom和left的margin值。vlink="#"alink="#"link="#FF"a:link#ffa:visited:#a:hover:#a:active:#f在HTML中链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器页面不同部分的链接样式可以不一样。bgcolor="#FFFFFF"backgroundcolor:#fff在CSS中任何元素都可以定义背景颜色不仅仅局限于body和table元素。bordercolor="#FFFFFF"bordercolor:#fff任何元素都可以设置边框(boeder)你可以分别定义top,right,bottom和leftborder=""《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页cellspacing=""borderwidth:px用CSS你可以定义table的边框为统一样式也可以分别定义top,right,bottomandleft边框的颜色、尺寸和样式。你可以使用table,tdorth这些选择器如果你需要设置无边框效果可以使用CSS定义:bordercollapse:collapse<brclear="left"><brclear="right"><brclear="all">clear:leftclear:rightclear:both许多列或者列布局都使用float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片你可以使用clear属性cellpadding=""vspace=""hspace=""padding:px用CSS任何元素都可以设定padding属性同样padding可以分别设置top,right,bottomandleft。padding是透明的。align="center"textalign:centermarginright:automarginleft:autoTextalign只适用于文本象divp这样的块级怨毒可以通过marginright:auto和marginleft:auto来水平居中一些令人遗憾的技巧和工作环境由于浏览器对CSS支持的不完善我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧盒模型bug的技巧等等。所有这些技巧都在MollyHolzschlag的文章《IntegratedWebDesign:StrategiesforLongTermCSSHackManagement》中有详细说明。另外一个关于CSS技巧的资源站点是BigJohn和HollyBergevin的“PositionisEverything”。XHTML下cssdiv布局总结xml(extensibleMarkupLanguage)的出现结构化文档和数据有了一个通用的、科适应的格式不仅仅应用在web上也可以应用在任何地方。标准称为可能。XHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。在HTML的基础上用XML的规则对其进行扩展得到了XHTML。它实现HTML向XML的过渡。CSS是CascadingStyleSheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构使站点的访问及维护更加容易。)为页面添加正确的DOCTYPEDOCTYPE是documenttype的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。XHTML提供了三种DOCTYPE可选择:()过渡型(Transitional)使用非常普遍。<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLTransitionalEN""http:wwwworgTRxhtmlDTDxhtmltransitionaldtd">()严格型(Strict)<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLStrictEN""http:wwwworgTRxhtmlDTDxhtmlstrictdtd">《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页()框架型(Frameset)<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLFramesetEN""http:wwwworgTRxhtmlDTDxhtmlframesetdtd">)设定一个名字空间(Namespace)直接在DOCTYPE声明后面添加如下代码:<htmlXMLns="http:wwwworgxhtml">一个namespace是收集元素类型和属性名字的一个详细的DTDnamespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。)声明你的编码语言为了被浏览器正确解释和通过标识校验所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:<metahttpequiv="ContentType"content="texthtmlcharset=GB">这里声明的编码语言是简体中文GB你如果需要制作繁体内容可以定义为BIG。)用小写字母书写所有的标签XML对大小写是敏感的所以XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被WC校验认为是无效的。例如下面的代码是不正确的:)为图片添加alt属性为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本这样做对正常用户可有可无但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性代码才会被WC正确性校验通过。注意的是我们要添加有意义的alt属性象下面这样的写法毫无意义:<imgsrc="logogif"alt="logogif">正确的写法:<imgsrc="logogif"alt="互动力工作室标志点击返回首页">)给所有属性值加引号在HTML中你可以不需要给属性值加引号但是在XHTML中它们必须被加引号。还必须用空格分开属性。例:<hrwidth=""size="">这也是不正确的)关闭所有的标签在XHTML中每一个打开的标签都必须关闭。空标签也要关闭在标签尾部使用一个正斜杠""来关闭它们自己。例如:<br>)收藏夹小图标例如:首先制作一个x的icon图标命名为faviconico放在根目录下。然后将下面的代码嵌入head区:<linkrel="icon"href="faviconico"type="imagexicon"><linkrel="shortcuticon"href="faviconico"type="imagexicon">)用CSS定义元素外观用css布局的一个好处是可以批量对页面进行修改它能将文档结构和表现层分离开来减轻工作量和服务器的负荷增加站点的扩展能力和应用。css是不区别空格和大小写的下面是一些基础的归纳()颜色值《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页颜色值可以用RGB值写例如:color:rgb(,,)也可以用十六进制写就象上面例子color:#FF。如果十六进制值是成对重复的可以简写效果一样。例如:#FF可以写成#F。但如果不重复就不可以简写例如#FCAB必须写满六位。()定义字体web标准推荐如下字体定义方法:body{fontfamily:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sansserif}字体按照所列出的顺序选用。如果用户的计算机含有LucidaGrande字体文档将被指定为LucidaGrande。没有的话就被指定为Verdana字体如果也没有Verdana就指定为Lucida字体依此类推LucidaGrande字体适合MacOSXVerdana字体适合所有的Windows系统Lucida适合UNIX用户"宋体"适合中文简体用户如果所列出的字体都不能用则默认的sansserif字体能保证调用()群选择器当几个元素样式属性一样时可以共同调用一个声明元素之间用逗号分隔:p,td,li{fontsize:px}()派生选择器可以使用派生选择器给一个元素里的子元素定义样式例如这样:listrong{fontstyle:italicfontweight:normal}就是给li下面的子元素strong定义一个斜体不加粗的样式。()id选择器用CSS布局主要用层"div"来实现而div的样式通过"id选择器"来定义。例如我们首先定义一个层<divid="menubar"><div>然后在样式表里这样定义:#menubar{MARGIN:pxBACKGROUND:#FEFEFECOLOR:#}其中"menubar"是你自己定义的id名称。注意在前面加"#"号。id选择器也同样支持派生例如:#menubarp{textalign:rightmargintop:px}这个方法主要用来定义层和那些比较复杂有多个派生的元素。()类别选择器在CSS里用一个点开头表示类别选择器定义例如:px{color:#ffontsize:px}在页面中用class="类别名"的方法调用:<spanclass="px">px大小的字体<span>这个方法比较简单灵活可以随时根据页面需要新建和删除。()定义链接的样式CSS中用四个伪类来定义链接的样式分别是:a:link、a:visited、a:hover和a:active例如:a:link{fontweight:boldtextdecoration:nonecolor:#c}a:visited{fontweight:boldtextdecoration:nonecolor:#c}a:hover{fontweight:boldtextdecoration:underlinecolor:#f}a:active{fontweight:boldtextdecoration:nonecolor:#F}以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意必须按以上顺序写否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页()组合使用选择器创造精致的设计效果用漂亮的图案代替普通无序列表前沉闷的黑点。站点http:marinehappycogcom先用css规则告诉类别属性inventory的无序列表。ulinventory{liststyle:discurl(imagescommonlistergig)inside}它的调用标记:<ulclass="inventory"><li><ahref="angelfish">Angelfish<a>(items)<li><li><ahref="angeld">AngelsFrogfish<a>(items)<li><li><ahref="anthias">Angelfish<a>(items)<li><li><ahref="basslets">Angelfish<a>(items)<li><ul>()缩写是按照顺时针的顺序margin:pxpx()行高lineheight:说明行距为正常的)结构化代码div(division)、id、class用它们来书写紧凑的xhtml更明智的使用css()结构化id标签与class的有区别:如果你的属性页面包含了一个div它的id为"content",它就不可能有另外一个div或者其他元素拥有相同的名字。相反class属性可以在意个页面中一次又一次地使用。()id的规则一个id值必须用一个字母或者下划线开头它不能用一个数字进行开头然后跟随字母、数字和下划线。空格和连字符都是不允许的。)制作好的网站可以到wc进行标准校正http:validatorworghttp:jigsawworgcssvalidator网页设计DIVCSS第天:选择什么样的DOCTYPE前言大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作同时把过程中的心得和经验记录下来希望对大家有点帮助。好了让我们开始吧第一天开始制作符合标准的站点第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码可以看到第一行就是:<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLTransitionalEN""http:wwwworgTRxhtmlDTDxhtmltransitionaldtd">打开一些符合标准的站点例如著名web设计软件开发商Macromedia设计大师Zeldman的个人网站会发现同样的代码。而另一些符合标准的站点(例如kknet)的代码则如下:《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLFramesetEN""http:wwwworgTRxhtmlDTDxhtmlframesetdtd">那么这些代码有什么含义?一定要放置吗?什么是DOCTYPE上面这些代码我们称做DOCTYPE声明。DOCTYPE是documenttype(文档类型)的简写用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtmltransitionaldtd)叫文档类型定义里面包含了文档的规则浏览器就根据你定义的DTD来解释你页面的标识并展现出来。要建立符合标准的网页DOCTYPE声明是必不可少的关键组成部分除非你的XHTML确定了一个正确的DOCTYPE否则你的标识和CSS都不会生效。XHTML提供了三种DTD声明可供选择:过渡的(Transitional):要求非常宽松的DTD它允许你继续使用HTML的标识(但是要符合xhtml的写法)。完整代码如下:<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLTransitionalEN""http:wwwworgTRxhtmlDTDxhtmltransitionaldtd">严格的(Strict):要求严格的DTD你不能使用任何表现层的标识和属性例如<br>。完整代码如下:<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLStrictEN""http:wwwworgTRxhtmlDTDxhtmlstrictdtd">框架的(Frameset):专门针对框架页面设计使用的DTD如果你的页面中包含有框架需要采用这种DTD。完整代码如下:<!DOCTYPEhtmlPUBLIC"WCDTDXHTMLFramesetEN""http:wwwworgTRxhtmlDTDxhtmlframesetdtd">我们选择什么样的DOCTYPE理想情况当然是严格的DTD但对于我们大多数刚接触web标准的设计师来说过渡的DTD(XHTMLTransitional)是目前理想选择(包括本站使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性也比较容易通过WC的代码校验。注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的而不是用来实现表现形式我们过渡的目的是最终实现数据和表现相分离。打个比方:人体模特换衣服。模特就好比数据衣服则是表现形式模特和衣服是分离的这样你就可以随意换衣服。而原来HTML中数据和表现是混杂在一起的要一次性换个表现形式非常困难。呵呵有点抽象了这个概念需要我们在应用过程中逐步领会。补充DOCTYPE声明必须放在每一个XHTML文档最顶部在所有代码和标识之上。网页设计DIVCSS第天:什么是名字空间DOCTYPE声明好以后接下来的代码是:<htmlxmlns="http:wwwworgxhtml"lang="gb">通常我们HTML的代码只是<html>这里的"xmlns"是什么呢?这个"xmlns"是XHTMLnamespace的缩写叫做"名字空间"声明。名字空间是什么作用呢?阿捷自己的理解是:《DivCSS布局大全》博客园JesseZhao整理http:jessezhaocnblogscomMSNMail:prolibertinegmailcom第页由于xml允许你自己定义自己的标识你定义的标识和其他人定义的标识有可能相同但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生XML采用名字空间声明允许你通过一个网址指向来识别你的标识。例如:小王和小李都定义了一个<book>标识如果小王的名字空间是"http:wwwxiao

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/10
仅支持在线阅读

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部