来一发怎样利用CSS来举行网页排版

只看该作者 · 发表于 2015-1-15 23:26:52

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
　第1天:选择甚么样的DOCTYPE

　　媒介
　　人人好！这个系列文章是按阿捷本人制造w3cn.org站点的历程编写的。之前阿捷也一向没有制造过一个真正切合web尺度的网站。如今边参考外洋材料边制造，同时把过程当中的心得和履历纪录上去，但愿对人人有点匡助。好了，让我们入手下手吧。
　　第一天
　　入手下手制造切合尺度的站点，第一件事变就是声明切合本人必要的DOCTYPE。
　　检察本站首页原代码，能够看到第一行就是：
　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　翻开一些切合尺度的站点，比方出名web计划软件开辟商Macromedia，计划大家Zeldman的团体网站，会发明一样的代码。而另外一些切合尺度的站点(比方k10k.net)的代码则以下：
　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
　　那末这些代码有甚么寄义？必定要安排吗？
　　甚么是DOCTYPE
　　下面这些代码我们称做DOCTYPE声明。DOCTYPE是documenttype(文档范例)的简写，用来讲明你用的XHTML大概HTML是甚么版本。
　　个中的DTD(比方上例中的xhtml1-transitional.dtd)叫文档范例界说，内里包括了文档的划定规矩，扫瞄器就依据你界说的DTD来注释你页面的标识，并展示出来。
　　要创建切合尺度的网页，DOCTYPE声明是必不成少的关头构成部分；除非你的XHTML断定了一个准确的DOCTYPE，不然你的标识和CSS都不会失效。
　　XHTML1.0供应了三种DTD声明可供选择：
　　过渡的(Transitional):请求十分宽松的DTD，它同意你持续利用HTML4.01的标识(可是要切合xhtml的写法)。完全代码以下：
　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　严厉的(Strict):请求严厉的DTD，你不克不及利用任何体现层的标识和属性，比方<br>。完全代码以下：
　　<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
　　框架的(Frameset):专门针对框架页面计划利用的DTD，假如你的页面中包括有框架，必要接纳这类DTD。完全代码以下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
　　我们选择甚么样的DOCTYPE
　　幻想情形固然是严厉的DTD，但关于我们年夜多半刚打仗web尺度的计划师来讲，过渡的DTD(XHTML1.0Transitional)是今朝幻想选择(包含本站，利用的也是过渡型DTD)。由于这类DTD还同意我们利用体现层的标识、元素和属性，也对照简单经由过程W3C的代码校验。
　　注：下面说的"体现层的标识、属性"是指那些地道用来把持体现的tag，比方用于排版的表格、背景色彩标识等。在XHTML中标识是用来暗示布局的，而不是用来完成体现情势，我们过渡的目标是终极完成数据和体现相分别。
　　打个例如：人体模特易服服。模特就比如数据，衣服则是体现情势，模特和衣服是分别的，如许你就能够随便易服服。而本来HTML4中，数据和体现是混同在一同的，要一次性换个体现情势十分坚苦。呵呵，有点笼统了，这个观点必要我们在使用过程当中慢慢了解。
　　增补
　　DOCTYPE声明必需放在每个XHTML文档最顶部，在一切代码和标识之上。
　　更多细节能够会见W3C的网站
123456789下一页

<p/>　第3天:界说言语编码

　　第三步是界说你的言语编码，相似如许：
　　<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
为了被扫瞄器准确注释和经由过程W3C代码校验，一切的XHTML文档都必需声明它们所利用的编码言语，我们一样平常利用gb2312(简体中文)，制造多国言语页面也有大概用Unicode、ISO-8859-1等，依据你的必要界说。
　　一般如许界说就能够了。可是要增补申明的是，XML文档并非如许界说言语编码的，XML的界说体例以下：
　　<?xmlversion="1.0"encoding="gb2312"?>
　　你在Macromedia.com的首页代码第一行就能够瞥见相似的语句，这也是W3C保举利用的界说办法。那为何我们不间接接纳这类办法呢？缘故原由是一些扫瞄器对尺度的撑持不完美，不克不及准确了解如许的界说办法，好比IE6/windows。以是在今朝过渡计划下，我们仍然保举利用meta体例。固然，你能够两种办法都写。
　　看本站源代码，你会发明言语编码界说的中央还多一句：
　　<metahttp-equiv="Content-Language"content="gb2312"/>
　　这是针对老版本扫瞄器写的，以包管各类扫瞄器都能准确注释页面。
　　注重：在下面声明语句的最初，你看到有一个斜杠"/"，这和我们之前的HTML4.0的代码写法分歧。缘故原由是XHTML语律例则请求一切的标识都必需有入手下手和停止。比方<body>和</body>、<p>和</p>等，关于不成对的标识，请求在标识最初加一个空格，然后跟一个"/"。比方<br>写成<br/>、<img>写成<img/>，加空格的缘故原由是制止代码连在一同扫瞄器不辨认。
上一页123456789下一页

<p/>　第4天:挪用款式表

　　用web尺度计划网站，过渡的办法次要是接纳XHTML+CSS，css款式表是必不成少的。这就请求一切网页计划师必需纯熟把握CSS，假如你之前不经常使用，那末如今就入手下手进修吧。要制造切合web尺度的网站，不懂CSS是计划不出大度的页面的。
　　现实上，一切体现的中央都必要用CSS来完成。我们之前都习气用table来定位和结构，如今要改用DIV来定位和结构。这是头脑体例的变更，一入手下手有些不习气。呵呵，任何厘革城市有阻力的，为了享用尺度带来的"好处"，保持一些老的传统做法是值得的。
　　内部挪用款式表
　　在之前，我们一般接纳2种办法利用款式表：
　　页面内嵌法：就是将款式表间接写在页面代码的head区。相似如许：<styletype="text/css"></style>
　　内部挪用法：将款式表写在一个自力的.css文件中，然后在页面head区用相似以下代码挪用。<linkrel="stylesheet"rev="stylesheet"href="css/style.css"type="text/css"media="all"/>
　　在切合web尺度的计划中，我们利用内部挪用法，优点不问可知，你能够不修正页面只修正.css文件而改动页面的款式。假如一切页面都挪用统一个款式表文件，那末改一个款式表文件，能够改动一切文件的款式。
　　双表法挪用款式表
　　检察某些切合尺度站点的原代码，你大概看到，在挪用款式表的中央有以下2句：
<p/>　　为何要写两次呢？
　　实践上一样平常情形下用外联法挪用(就是第一句)就充足了。我这里利用双表挪用只是一种示例。个中的"@import"命令用于输出款式表。而"@import"命令在netscape4.0版本扫瞄器是有效的。也就是说，当你但愿某些效果在netscape4.0扫瞄器中埋没，在4.0以上或别的扫瞄器中又显现的时分，你能够接纳"@import"命令办法挪用款式表。
　　上一页123456789下一页

<p/>　第5天:head区的其他设置

　　这些技能次要讲meta标签设置的，实在与切合web尺度干系不年夜，只需注重在最初加"/"封闭标签就能够，可是既然是进门教程，就写得具体一点吧。
　　保藏夹小图标
　　假如你将本站到场保藏夹，能够看到在保藏夹网址之前的IE图标酿成了本站出格的图标。要完成如许效果很复杂，起首制造一个16x16的icon图标，定名为favicon.ico，放在根目次下。然后将上面的代码嵌进head区：
<p/>　　<strong>为

1234下一页

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

只看该作者 · 发表于 2015-1-16 00:41:16

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。
搜刮引擎筹办的内容</strong></p>　　代码以下，交换成你本人站点的内容就能够：
　　同意搜刮呆板人搜刮站内一切链接。假如你想某些页面不被搜刮，保举接纳robots.txt办法<metacontent="all"name="robots"/>
　　设置站点作者信息
　　<metaname="author"content="ajie@netease.com,阿捷"/>
　　设置站点版权信息
　　<metaname="Copyright"content="www.w3cn.org,自在版权,恣意转载"/>
　　站点的扼要先容(保举)
　　<metaname="description"content="新网页计划师。web尺度的教程站点，推进web尺度在中国的使用"/>
　　站点的关头词(保举)
　　<metacontent="designing,with,web,standards,xhtml,css,graphic,design,layout,usability,ccessibility,w3c,w3,w3cn,ajie"name="keywords"/>
　　先先容这么多。增补申明，后面花了5节都是讲head区的代码，实践页面内容还一字未提，呵呵，不要急，实在head区长短常主要的，看一个页面的head的代码就能够晓得计划师是不是够专业。
上一页123456789下一页

<p/>　第6天:XHTML代码标准

　　在入手下手正式内容制造之前，我们必需先懂得一下web尺度有关代码的标准。懂得这些标准能够匡助你少走弯路,尽快经由过程代码校验。
　　1.一切的标志都必需要有一个响应的停止标志
　　之前在HTML中，你能够翻开很多标签，比方<p>和<li>而纷歧定写对应的</p>和</li>来封闭它们。但在XHTML中这是分歧法的。XHTML请求有松散的布局，一切标签必需封闭。假如是独自不成对的标签，在标签最初加一个"/"来封闭它。比方:
　　<br/><imgheight="80"alt="网页计划师"src="../images/logo_w3cn_200x80.gif"width="200"/>
　　2.一切标签的元素和属性的名字都必需利用小写
　　与HTML纷歧样，XHTML对巨细写是敏感的，<title>和<TITLE>是分歧的标签。XHTML请求一切的标签和属性的名字都必需利用小写。比方：<BODY>必需写成<body>。巨细写同化也是不被承认的，一般dreamweaver主动天生的属性名字"onMouseOver"也必需修正成"onmou搜索引擎优化ver"。
　　3.一切的XML标志都必需公道嵌套
　　一样由于XHTML请求有松散的布局，因而一切的嵌套都必需按按次，之前我们如许写的代码：
　　<p><b></p>/b>必需修正为：<p><b></b>/p>
　　就是说，一层一层的嵌套必需是严厉对称。
　　4.一切的属性必需用引号""括起来
　　在HTML中，你能够不必要给属性值加引号，可是在XHTML中，它们必需被加引号。比方:
　　<height=80>必需修正为：<height="80">
　　特别情形，你必要在属性值里利用双引号，你能够用"，单引号可使用，比方：<alt="sayhello">
　　5.把一切<和&特别标记用编码暗示
　　任何小于号（<），不是标签的一部分，都必需被编码为<
　　任何年夜于号（>），不是标签的一部分，都必需被编码为>
　　任何与号（&），不是实体的一部分的，都必需被编码为&
　　注：以上字符之间无空格。
　　6.给一切属性赋一个值
　　XHTML划定一切属性都必需有一个值，没有值的就反复自己。比方：
　　<tdnowrap><inputtype="checkbox"name="shirt"value="medium"checked>必需修正为：<tdnowrap="nowrap"><inputtype="checkbox"name="shirt"value="medium"checked="checked">
　　7.不要在正文内容中使“--”
　　“--”只能产生在XHTML正文的开首和停止，也就是说，在内容中它们不再无效。比方上面的代码是有效的:
　　
　　用等号大概空格交换外部的虚线。
　　
　　以上这些标准有的看上往对照奇异，但这统统都是为了使我们的代码有一个一致、独一的尺度，便于今后的数据再使用。
　　
上一页123456789下一页

<p/>　第7天:CSS进门

　　在懂得XHTML代码标准后，我们就要举行CSS结构。起首先先容一些CSS的进门常识。假如你已很熟习了，能够跳过这一节，间接进进下一节。
　　CSS是CascadingStyleSheets(层叠款式表)的缩写。是一种对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:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;}
　　字体依照所列出的按次选用。假如用户的盘算机含有LucidaGrande字体，文档将被指定为LucidaGrande。没有的话，就被指定为Verdana字体，假如也没有Verdana，就指定为Lucida字体，依此类推，；
　　LucidaGrande字体合适MacOSX；
　　Verdana字体合适一切的Windows体系；
　　Lucida合适UNIX用户
　　"宋体"合适中文简体用户;
　　假如所列出的字体都不克不及用，则默许的sans-serif字体能包管挪用;
　　4.群选择器
　　当几个元素款式属性一样时，能够配合挪用一个声明，元素之间用逗号分开，：p,td,li{font-size:12px;}
　　5.派生选择器
　　可使用派生选择器给一个元素里的子元素界说款式，比方如许：
　　listrong{font-style:italic;font-weight:normal；}
　　就是给li上面的子元素strong界说一个斜体不加粗的款式。
　　6.id选择器
　　用CSS结构次要用层"div"来完成，而div的款式经由过程"id选择器"来界说。比方我们起首界说一个层
　　<divid="menubar"></div>
　　然后在款式内外如许界说：
　　#menubar{MARGIN:0px;BACKGROUND:#FEFEFE;COLOR:#666;}
　　个中"menubar"是你本人界说的id称号。注重在后面加"#"号。
　　id选择器也一样撑持派生，比方：
　　#menubarp{text-align:right;margin-top:10px;}
　　这个办法次要

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

只看该作者 · 发表于 2015-1-16 00:43:46

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
用来界说层和那些对照庞大，有多个派生的元素。</p>　　7.种别选择器
　　在CSS里用一个点开首暗示种别选择器界说，比方：
　　.14px{color:#f60;font-size:14px;}
　　在页面中，用class="种别名"的办法挪用：
　　<spanclass="14px">14px巨细的字体</span>
　　这个办法对照复杂天真，能够随时依据页面必要新建和删除。
　　8.界说链接的款式
　　CSS顶用四个伪类来界说链接的款式，分离是：a:link、a:visited、a:hover和a:active，比方：
<p/>　　以上语句分离界说了"链接、已会见过的链接、鼠标停在上方时、点下鼠标时"的款式。注重，必需按以上按次写，不然显现大概和你料想的纷歧样。记着它们的按次是“LVHA”。
　　呵呵，看了这么多，有摇头晕吧，实践上CSS的语律例范另有良多，这里列的只是一些经常使用的，究竟我们是循规蹈矩，不成能一口吃成瘦子:)
上一页123456789下一页

<p/>　第8天:CSS结构进门　

　　CSS结构与传统表格(table)结构最年夜的区分在于：本来的定位都是接纳表格，经由过程表格的间距大概用无色通明的GIF图片来把持文结构版块的间距；而如今则接纳层(div)来定位，经由过程层的margin,padding,border等属性来把持版块的间距。
　　1.界说DIV
　　剖析一个典范的界说div例子：
　　#sample{MARGIN:10px10px10px10px;
PADDING:20px10px10px20px;
BORDER-TOP:#CCC2pxsolid;
BORDER-RIGHT:#CCC2pxsolid;
BORDER-BOTTOM:#CCC2pxsolid;
BORDER-LEFT:#CCC2pxsolid;
BACKGROUND:url(images/bg_poem.jpg)#FEFEFEno-repeatrightbottom;
COLOR:#666;
TEXT-ALIGN:center;
LINE-HEIGHT:150%;WIDTH:60%;}
　　申明以下：
　　层的称号为sample，在页面顶用<divid="sample">就能够挪用这个款式。
　　MARGIN是指层的边框之外留的空缺，用于页边距大概与别的层打造一个间距。"10px10px10px10px"分离代表"上右下左"(顺时针偏向)四个边距，假如都一样，能够缩写成"MARGIN:10px;"。假如边距为零，要写成"MARGIN:0px;"。注重：当值是零时，除RGB色彩值0%必需跟百分号，其他情形前面能够不跟单元"px"。MARGIN是通明元素，不克不及界说色彩。
　　PADDING是指层的边框到层的内容之间的空缺。和margin一样，分离指定上右下右边框到内容的间隔。假如都一样，能够缩写成"PADDING:0px"。独自指定右边能够写成"PADDING-LEFT:0px;"。PADDING是通明元素，不克不及界说色彩。
　　BORDER是指层的边框，"BORDER-RIGHT:#CCC2pxsolid;"是界说层的右侧框色彩为"#CCC"，宽度为"2px"，款式为"solid"直线。假如要虚线款式能够用"dotted"。
　　BACKGROUND是界说层的背景。分2级界说，先界说图片背景，接纳"url(../images/bg_logo.gif)"来指定背景图片路径；其次界说背景致"#FEFEFE"。"no-repeat"指背景图片不必要反复，假如必要横向反复用"repeat-x",纵向反复用"repeat-y",反复展满全部背景用"repeat"。前面的"rightbottom;"是指背景图片从右下角入手下手。假如没有背景图片能够只界说背景致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)中，计划师能够经由过程创立界说来把持这个盒的属性，这些对像包含段落、列表、题目、图片和层<div>。盒模子次要界说四个地区：内容(content)、边框距(padding)、界限(border)和边距(margin)。下面我们讲的sample层就是一个典范的盒。关于初学者，常常会弄不分明margin，background-color，background-image，padding，content，border之间的条理、干系和互相影响。这里供应一张盒模子的3D表示图，但愿便于你的了解和影象。
　　

登录/注册后可看大图

　　3.帮助图片一概用背景处置
　　用XHTML+CSS结构，有一个手艺一入手下手让你不习气，应当说是一种头脑体例与传统表格结构纷歧样，那就是：一切帮助图片都用背景来完成。相似如许：
　　BACKGROUND:url(images/bg_poem.jpg)#FEFEFEno-repeatrightbottom;
　　只管能够用<img>间接插在内容中，但这是不保举的。这里的"帮助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于润色、距离、提示的图片。比方：相册中的图片、图片旧事中的图片，下面的3d盒模子图片都属于内容的一部分，它们能够用<img>元素间接插在页面里，而别的的相似logo，题目图片，列表前缀图片都必需接纳背景体例大概其他CSS体例显现。
　　如许做的缘故原由有2点：
　　

登录/注册后可看大图

将体现与布局完全相分别(参考浏览另外一篇文章：《了解体现与布局相分别》)，用CSS把持一切的表面体现，便于改版。
　　

登录/注册后可看大图

使页面更具有易用性，更有亲和力。比方：瞽者利用屏幕浏览机，用背景手艺完成的图片就不会被朗诵出来。
　　
上一页123456789下一页

<p/>　第9天:第一个CSS结构实例

　　接上去入手下手要真正计划结构了。和传统的办法一样，你起首要在脑海里有大抵的表面构思，然后用photoshop把它画出来。你大概看到有关web尺度的站点多数很朴实，由于web尺度更存眷布局和内容，实践上它与网页的美妙没有基本抵触，你想怎样计划就怎样计划，用传统表格办法完成的结构，用DIV也能够完成。手艺有一个成熟的历程，把DIV当作和TABLE一样的工具，怎样使用就看你的设想力了。
　　注：在实践使用过程当中，DIV在有些中央切实其实不如表格便利，好比背景致的界说。但任何事变都有得有掉，弃取在于你的代价判别。好，不罗嗦了，我们入手下手：
　1.断定结构

　　w3cn的最后计划草图以下：
　　

登录/注册后可看大图

　　用表格的计划办法的话，一样平常都是上中下三行结构

登录/注册后可看大图

。用DIV的话，我思索利用三列来结构,成为如许

登录/注册后可看大图

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。

只看该作者 · 发表于 2015-1-16 00:44:02

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。
。</p>　2.界说body款式

　　先界说全部页面的body的款式,代码以下：
　　body{MARGIN:0px;
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:LucidaGrande,LucidaSansUnicode,宋体,新宋体,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中以下界说:　

　　注重：界说中列和右列div我都接纳了POSITION:absolute;，然后分离界说了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个结构的关头，我接纳了层的相对定位。界说两头列间隔页面右边框200px，间隔顶部0px；界说右列间隔页面右边框500px，间隔顶部0px；。
　　这时候候全部页面的代码是：

　　这时候候页面的效果仅仅能够看到三个并列的灰色矩形，和一个背景图。可是我但愿高度是满屏的，怎样办呢？
　4.100%自顺应高度?

　　为了坚持三列有一样的高度，我实验在#left、#middle和#right中设置"height:100%;"，但发明完整没有料想的自顺应高度效果。经由一番实验后，我只好给每一个div一个相对高度:"height:1000px;"，而且跟着内容的增添，必要不休修改这个值。岂非没有举措自顺应高度了吗？跟着阿捷本人进修的深切，发明一个变通的办理举措，实践上基本不必要设置100%，我们已被table头脑监禁太深了，这个举措鄙人一节的进修中具体先容。
　　上一页123456789下一页

　第10天:自顺应高度

　　假如我们想在3列结构的最初加一行页脚，放版权之类的信息。就碰到必需对齐3列底部的成绩。在table结构中，我们用年夜表格嵌套小表格的办法，能够很便利对齐三列；而用div结构，三列自力分离，内容上下分歧，就很难对齐。实在我们完整能够嵌套div，把三列放进一个DIV中，就做到了底部对齐。这里是完成例子(红色背景框摹拟一个页面)：
　　这个例子的页面次要代码以下：
　　<divid="header"></div>
<divid="mainbox">
<divid="menu"></div>
<divid="sidebar"></div>
<divid="content"></div>
</div>
<divid="footer"></div>
　　详细款式表都写在响应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增添，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就主动下移。如许就完成了高度的自顺应。
　　别的值得注重的是：#menu和#content都是浮动在页面左面"FLOAT:right;",#sidebar是浮动在#menu层的左面"FLOAT:left;"，这是浮动法定位，还能够接纳相对定位来完成如许的效果。
　　这个办法存在另外一个成绩，就是侧列#sidebar的背景没法百分之百。一样平常的办理举措就是用body的背景致来添补满。(不克不及利用#mainbox的背景致，由于在Mozilla等扫瞄器中#mainbox的背景致生效。)
　　好了，次要的框架已搭建终了,剩下的事情只是往内里添砖加瓦。假如你但愿实验其他结构，保举看看以下文章:
上一页123456789

上一页1234

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。

只看该作者 · 发表于 2015-1-18 07:31:00

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-1-26 23:38:32

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-2-5 04:37:50

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-11 05:32:15

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-1 22:59:20

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-11 01:42:26

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-3-17 19:08:32

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-24 21:57:56

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来一发怎样利用CSS来举行网页排版

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子