你在学习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禅宗花园帮助我们最终认识到CSS的力量。
HTML不仅仅是在电脑屏幕上阅读。photoshop精心设计的图片可能无法在PDA、手机和屏幕阅读器上显示。但是一个结构良好的HTML页面可以通过CSS的不同定义在任何地方、任何网络设备上显示。
开始思考
首先要学会什么是“结构”，有些作家也称之为“语义”。这个术语的意思是你需要分析你的内容块和每个内容服务的目的，然后根据这些内容目的建立相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能会得到这样的几个片段:
徽标和网站名称
主页内容
网站导航(主菜单)
子菜单
搜索框
功能区(如购物车、收银台)
页脚(版权和相关法律声明)
我们通常使用DIV元素来定义这些结构，就像这样:
< div id="header">
< div id="content">
< div id="globalnav">
< div id="subnav">
< div id="search">
< div id="shop">
< div id="footer">
这不是布局，而是结构。这是内容块的语义描述。当您理解了您的结构后，您可以将相应的ID添加到DIV中。一个DIV容器可以包含任何内容块，并且可以嵌套另一个DIV。内容块可以包含任何HTML元素——标题、段落、图片、表格、列表等。
根据上面的内容，你已经知道了如何构造HTML，现在你可以定义布局和样式了。每个内容块可以放在页面上的任何位置，然后指定块的颜色、字体、边框、背景和对齐属性。
使用选择器是一件美妙的事情。
id的名称是控制某个内容块的手段。通过在这个内容块上放置一个DIV并添加一个惟一的id，您可以使用CSS选择器精确地定义每个页面元素的外观，包括标题、列表、图片、链接或段落。比如你为#header写一个CSS规则，它可以和#content中的图片规则完全不同。
再比如，你可以通过不同的规则在不同的内容块中定义链接样式。大概是这样的:#globalnav a:link或者#subnav a:link或者#content a:link。您还可以定义不同内容块中相同元素的样式是不同的。比如#content和#footer中p的样式分别由#content p和#footer p定义。从结构上讲，你的页面是由图片、链接、列表、段落等组成的。这些元素本身对显示什么网络设备(PDA或手机或网络电视)没有影响，可以定义为任何外观。
一个精心构建的HTML页面非常简单，每个元素都用于结构化目的。当你想缩进一个段落的时候，不需要使用blockquote标签，只需要使用P标签，给P添加一个CSS边距规则，就可以达到缩进的目的。p是结构化标签，margin是表示属性。前者属于HTML，后者属于CSS。这就是结构和性能的相分离。
在结构良好的HTML页面中，表达属性的标签很少。代码非常简洁明了。例如，原来的代码< table width = " 80% " cell padding = " 3 " border = " 2 " align = " left " >现在只能用HTML编写，控制表示的一切都用CSS编写。在结构化HTML中，table是一个表格，而不是其他任何东西(比如用于布局和定位)。
练习构建自己。
以上只是最基本的结构。在实际应用中，可以根据需要调整内容块。DIV嵌套经常发生，你会看到“容器”层还有其他层，结构类似于这样:
< div id="navcontainer " >
< div id="globalnav " >
< ul >一个列表
< div id="subnav " >
< ul >另一个列表
嵌套的div元素允许您定义更多的CSS规则来控制显示。比如你可以给#navcontainer一个规则让列表靠右，给#globalnav一个规则让列表靠左，给#subnav一个完全不同的呈现。
用CSS取代传统方法
以下列表将帮助您用CSS替换传统方法:
HTML属性和相应的CSS方法
HTML属性
CSS方法描述
align="left "
align = " right " float:left；
浮动:对；你可以使用CSS来浮动任何元素:图片、段落、div、标题、表格、列表等等。
当使用float属性时，必须为这个浮动元素定义一个宽度。
margin width = " 0 " left margin = " 0 " margin height = " 0 " top margin = " 0 " margin:0；使用CSS，可以在任何元素上设置边距，而不仅仅是body元素。更重要的是，您可以分别指定元素的上、右、下和左的边距值。
vlink = " # 333399 " alink = " # 000000 " link = " # 3333 ff " a:link # 3ff；
答:访问过:# 339；
答:悬停:# 999；
答:主动:# 00f
在HTML中，链接的颜色被定义为主体的属性值。整个页面的链接风格都是一样的。使用CSS的选择器，页面不同部分的链接样式可以不同。
bgcolor="#FFFFFF "背景色:# fff在CSS中，任何元素都可以定义背景色，不仅仅是body和table元素。
border color = " # FFFFFF " border-color:# fff；任何元素都可以用boeder设置，你可以分别定义上、右、下、左。
border = " 3 " cellspacing = " 3 " border-width:3px；使用CSS可以将表格的边框定义为统一的样式，还可以分别定义上、右、下、左边框的颜色、大小和样式。
您可以使用表、td或th选择器。
如果需要设置无边框效果，可以使用CSS定义:border-collapse:collapse；
< br clear="left " >
< br clear="right " >
< br clear="all " >
清除:左侧；
明确:对；
明确:两者都有；
许多2列或3列布局使用float属性来定位它们。如果在浮动图层中定义背景色或背景图片，可以使用clear属性。
cellpadding="3 "
vspace="3 "
hspace="3 "填充:3px使用CSS，任何元素都可以设置填充属性。同样，padding可以分别设置top、right、bottom和left。填充是透明的。
align = " center " text-align:center；
右边距:自动；左边距:自动；
文本对齐仅适用于文本。
像div和p这样的块级别可以用margin-right: auto来定义；左边距:auto来到水平中心
一些令人遗憾的技能和工作环境
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些黑客手段或者搭建一个环境，让CSS达到和传统方法一样的效果。比如块级元素有时候需要用到水平居中技巧，盒子模型bug技巧等等。所有这些技巧都在Molly Holzschlag的文章《综合网页设计:长期CSS黑客管理策略》中有详细的解释。
另一个关于CSS技能的资源网站是Big John和Holly Bergevin的“位置决定一切”。
理解浮动行为
Eric Meyer的《包含浮动》将帮助你掌握如何使用浮动属性布局。浮动元素有时需要清除，阅读如何在没有结构标记的情况下清除浮动将非常有帮助。
更多帮助
现有的CSS讨论列表是一个很好的资源，它收集了一个WiKiA讨论组的信息，包括CSS布局摘要(CSS-discuss.incutio.com/？Page=CssLayouts)、CSS技能总结(css-discuss.incutio.com/？Page=CssHack)等等。
本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。
