我现在搞得像个WEB设计师了。布局啊。配色啊。其实弄这个不不能说难，但是要想熟练使用还是需要时间来磨练的。Design的过程也不乏乐趣。对于我这种既熟悉又喜欢和代码打交道的人来说，弄起来还有点“不亦乐乎”。我来给新人说说WEB是怎么用代码弄出来的，怎么样来定位网页元素的位置。这是个入门级的理解，高手忽略。

我们先来了解网页标记

我们在使用一段文字的时候，它还有其它一些属性，浏览器需要根据这些属性确定如何把文字显示出来，比如色彩、大小。根据浏览器和系统的不同，文字有它默认的显示方式。如果你不指定这些属性，文字就按默认的方式显示。我们可以给文字加上浏览器认识的属性，来让文本更有亲和力和表现力。和网页布局定位有关的一组标记是“<div>”和“</div>”。“<div>”表示一个新的块的开始，“</div>”就表示块的结束。每个块都是封闭的，块和块之前不能交叉。
试验一个简单的html：
<html>
<head>
</head>
<body>
<div></div>
</body>
<html>
其中，<html>标签代表文档的开始；<head>标签内是头文件，这里面不是要显示的内容；<body>标签就代表浏览器窗口，这里面就是要显示的内容。把这段文字另存为“test.html”文件，双击就由浏览器打开了。但是我们并没有看到一个“div块”。在div块内部和外部加点文字，比如把body中的内容改为：“test1<div>test2</div>”，发现两个test都显示了。那么，div有什么用？且听下面分解。

给DIV加属性

上面我们建了个DIV块，但是看不见摸不着，只知道它让后面的文字换了个行。我们现在想办法给这个块加上个边框，这样就能看见了。怎么加？我们要描述一下这个区块，先给它取个名字，或者分到某一类。
<html>
<head>
<style>
#a{
width:500px;
height:300px;
border:solid;
}
.b{
top:20px;
width:200px;
height:100px;
}
</style>
</head>
<body>
test<div id="a" class="b">test</div>
</body>
这段代码中div后面跟了个id和一个class。id这个值很严肃，全部html中只能出现一次，不能有两个div的id都等于a。class就是分类了，可以有多个div属于同一个类。<style>标签中指定了id a和分类b的属性。id由”#”打头，分类由”.”打头。“border:solid;”这个值给div块加上了边框。可以看出“ID”是高于“CLASS”的，“ID”可以覆盖掉“CLASS”中指定的属性，只有“ID”中没有指定的属性才用“CLASS”中的。

用DIV布局

和DIV布局有关的属性主要有：position、top、left、right、bottom、margin、float、width。

position 这个属性有四个值，分别如下：

  • static     默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
  • relative     位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。元素原位置仍然空出来，并覆盖元素移动到的位置。
  • absolute     位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。相当于元素独立于文档外，元素不占有位置，覆盖到元素移动到的位置之上。其位置相对于文档移动。
  • fixed     位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。独立于文档外，不占有位置，覆盖到元素移动到的位置之上。其位置相对于浏览器窗口移动。

margin 表示元素边框到其父边框的距离，margin占有位置。设置外边距的最简单的方法就是使用 margin 属性。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为 auto、可以四个边分别定义不同的外边距、还可以为 margin 设置一个百分比数值。可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

float 浮动。让元素漂浮起来，和物体飘浮在水面上很像。有两个值left和right，分别指定向左浮还是向右浮。对于它的父块来说，元素浮动了可能是不占有位置的，所以父框的下边界可能并没有包含住浮动了的元素。但是对于后面的元素来说，可能会视position值而定是否忽略该浮动元素。如果position值为absolute可能会盖住后面的元素。

一个三栏横排的例子：
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
}
#centercontent {
margin-left: 199px;
margin-right:199px;
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
}
左右两个边栏都用了“position: absolute;”，它们在文档中是不占有位置，而是覆盖在其它元素之上。只要将内容居中放置就行了，就算有重叠也不会改变左中右的排列，写文档内容的时候也不需要考虑块的顺序，可以先写主栏内容突出重点。

另外，用左浮右浮、两个左浮、两个右浮都可以实现两栏。三栏当然也可以用浮动的方式实现。使用浮动要注意浮动的顺序和块的宽度。有时我们用一个容器块来承载所有的元素。但是如果使用浮动，容器块不会跟着变高，可以在容器低部加一个足够宽foot块能把容器拉长。

在使用Google Ads的时候，如果想要广告放在文章右上方或者左上方，可以建立这样的块：
<div class="google-ads" style="float:left;margin:4px;"></div>
把广告代码加在这个区块内放在文章首就可以了。这是左浮，要右浮就把left改right就可以了。

Related posts:

  1. 对象存储服务质量
  2. 搜狗云输入法发布
  3. 计算机组成——CPU系统设计
  4. 从这个吻开始……
  5. 通过饭否同步博客副标题