给大家带来轻松学DIV教程（div＋css结构）
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。你正在进修CSS结构吗？是否是还不克不及完整把握纯CSS结构？一般有两种情形拦阻你的进修：
第一种多是你还没有了解CSS处置页面的道理。在你思索你的页面全体体现效果前，你应该先思索内容的语义和布局，然后再针对语义、布局增加CSS。这篇文章将告知你应当如何把HTML布局化。
另外一种缘故原由是你对那些十分熟习的体现层属性(比方：cellpadding,、hspace、align=left等等)一筹莫展，不晓得该转换成对应的甚么CSS语句。当你办理了第一种成绩，晓得了怎样布局化你的HTML，我再给出一个列表，具体列出本来的体现属性用甚么CSS来取代。
布局化HTML
我们在刚进修网页制造时，老是先思索怎样计划，思索那些图片、字体、色彩、和结构计划。然后我们用Photoshop大概Fireworks画出来、切割成小图。最初再经由过程编纂HTML将一切计划复原体现在页面上。
假如你但愿你的HTML页面用CSS结构(是CSS-friendly的)，你必要转头重来，先不思索“表面”，要先思索你的页面内容的语义和布局。
表面并非最主要的。一个布局优秀的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里的图片划定规矩。
别的一个例子是：你能够经由过程分歧划定规矩来界说分歧内容块里的链接款式。相似如许：#globalnava:link大概#subnava:link大概#contenta:link。你也能够界说分歧内容块中不异元素的款式纷歧样。比方，经由过程#contentp和#footerp分离界说#content和#footer中p的款式。从布局上讲，你的页面是由图片、链接、列表、段落等构成的，这些元素自己其实不会对显现在甚么收集设备中(PDA仍是手机大概收集电视)有影响，它们能够被界说为任何的体现表面。
一个细心布局化的HTML页面十分复杂，每个元素都被用于布局目标。当你想缩进一个段落，不必要利用blockquote标签，只需利用p标签，并对p加一个CSS的margin划定规矩就能够完成缩进目标。p是布局化标签，margin是体现属性，前者属于HTML，后者属于CSS。(这就是布局于体现的相分别.)
优秀布局的HTML页面内几近没有体现属性的标签。代码十分洁净简便。比方，本来的代码<tablewidth=80%cellpadding=3border=2align=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=rightfloat:left;
float:right;利用CSS能够浮动任何元素:图片、段落、div、题目、表格、列表等等
当你利用float属性，必需给这个浮动元素界说一个宽度。
marginwidth=0leftmargin=0marginheight=0topmargin=0margin:0;利用CSS,margin能够设置在任何元素上,不单单是body元素.更主要的，你能够分离指定元素的top,right,bottom和left的margin值。
vlink=#333399alink=#000000link=#3333FFa:link#3ff;
a:visited:#339;
a:hover:#999;
a:active:#00f;
在HTML中，链接的色彩作为body的一个属性值界说。全部页面的链拂尘格都一样。利用CSS的选择器，页面分歧部分的链接款式能够纷歧样。
bgcolor=#FFFFFFbackground-color:#fff;在CSS中，任何元素都能够界说背景色彩，不单单范围于body和table元素。
bordercolor=#FFFFFFborder-color:#fff;任何元素都能够设置边框(boeder)，你能够分离界说top,right,bottom和left
border=3
cellspacing=3border-width:3px;用CSS，你能够界说table的边框为一致款式，也能够分离界说top,right,bottomandleft边框的色彩、尺寸和款式。
你可使用table,tdorth这些选择器.
假如你必要设置无边框效果，可使用CSS界说：border-collapse:collapse;
<brclear=left>
<brclear=right>
<brclear=all>
clear:left;
clear:right;
clear:both;
很多2列大概3列结构都利用float属性来定位。假如你在浮动层中界说了背景色彩大概背景图片，你可使用clear属性.
cellpadding=3
vspace=3
hspace=3padding:3px;用CSS，任何元素都能够设定padding属性，一样，padding能够分离设置top,right,bottomandleft。padding是通明的。
align=centertext-align:center;
margin-right:auto;margin-left:auto;
Text-align只合用于文本.
象div，p如许的块级怨毒能够经由过程margin-right:auto;和margin-left:auto;来程度居中
一些使人遗憾的技能和事情情况
因为扫瞄器对CSS撑持的不完美，我们偶然候不能不接纳一些技能(hacks)或创建一种情况(Workarounds)来让CSS完成传统办法一样的效果。比方块级元素偶然侯必要利用程度居中的技能，盒模子bug的技能等等。一切这些技能都在MollyHolzschlag的文章《IntegratedWebDesign:StrategiesforLong-TermCSSHackManagement》中有具体申明。
别的一个关于CSS技能的资本站点是BigJohn和HollyBergevin的“PositionisEverything”。
了解浮动举动
EricMeyer的《ContainingFloats》将匡助你把握怎样利用float属性结构。float元素偶然候必要扫除(clear)，浏览《HowToClearFloatsWithoutStructuralMarkup》将十分有匡助。
更多匡助
已有的《CSSDiscussion》列表是很好的资本，它搜集了一个WiKiA会商组的信息，个中包含CSS结构总结(css-discuss.incutio.com/?page=CssLayouts)，CSS技能总结(css-discuss.incutio.com/?page=CssHack)和更多
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 可以使用 CSS 检查工具进行设计。
页:
[1]