前端-从最简单的两栏布局开始

相信很多人接触前端做的第一个可以称为工程的东西就是叫做我的博客的一个博客页面的东西。毕竟博客页面对于一个新手来说是最适合练习布局的一个工程了。

同样，我的前端出发点也是一个博客页面，不过年代久远做得太丑就不好意思拿出来献丑。当时并没有布局的概念，觉得什么需要就往网页上写，结果布局乱七八糟实在不忍直视。今天要说的是两栏布局。从两栏布局里我们能够学到基本的DIV+CSS布局方法，纵向的DIV如何变为横向排布，这其中包括了float的一些用法；以及前端开发中对于布局的一些基本注意事项。

这个两栏布局包括了顶部一个header和下面两栏中左侧side-bar和右侧的text-area（这两个区域是可以自己互换的。）

如果对于基本的HTML标签不太了解的话这篇文章可能有点难度，但是既然是最简单的两栏布局，我也尽量讲的明白点。不过如果对于CSS不了解的话这篇教程就难度高了，建议先去W3CSchool学习一下CSS。
本次教程的DEMO地址在这里：http://molunerfinn.com/display/MYBLOG/index-demo.html

最基本的HTML一个结构是如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

我们把要写的布局放在body里面。首先注意的一点就是一个比较好的习惯是把要写的全部东西包在一个DIV里面。因为这样做的话我们能对这个全局的DIV做控制，控制其大小，长宽而不受浏览器、屏幕宽度的影响——让里面的元素根据这个DIV来进行排布。类似的思想也出现在bootstrap里container的用法，有兴趣的朋友可以自己去看看。

于是我们就开始写代码了。首先给全局的div设定一个类名，我们叫做”all”，即<div class="all"></div>方便后续用CSS来调整它的样式。然后接下去的三个DIV就分别是<div class="header"></div>(顶部)，<div class="left"></div>(左侧栏)，<div class="right"></div>(右侧栏)。class的命名并没有什么特殊意义，在没有引用框架的时候，class的命名最好能做到至少自己能看得懂。不过class是有自己的命名规则的，并不是驼峰命名。class命名里首位必须是字母，然后单词和单词之间不用下划线分隔，而是用破折号分隔。例如right-title。命名能够缩写但是还是要遵循能够看懂的原则。

就像这样：

    <div class="all">
        <div class="header">

# Welcome to My Blog

        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

上面说的三个DIV也体现了那个“要写的全部东西包在一个DIV里面”的思想。这三个DIV是我们布局的最初容器。其实给这三个DIV定义一下长宽，然后再进行float处理就能做到布局了。新入门前端的同学总会觉得奇怪，我们在HTML里DIV始终是从上而下写的，而浏览器怎么会识别出这个DIV在左，那个在右剩下的在上在下的都有。其实这些靠的都是CSS样式来决定的。之所以给每个DIV定义类名（其实如果是独立的容器定义ID名也是可以的）一是方便查看，二是方便进行样式调整。

对于DEMO来说我把每个DIV都加上了黑色边界，这样做的话容易看出布局效果。（平常写前端的时候我也是这样做的，到最后按照需求再把边界去掉或者是怎么样。）那怎么做到这三个布局呢？其实很简单。首先给全局的all这个DIV定义一个固定长宽，我们定义长是1200px，高度是650px。然后将header里写上文字，用文字撑开header这个DIV。即header这个DIV的高度是文字撑开的。至于为什么文字和DIV之间有上下边距，是因为HTML里对于h1标签有自己默认的属性，默认的属性里就有上下的margin值。h1标签能够占满整行直到接触父容器。这正是我们想要的效果。

而下面的两个DIV，首先先给左侧DIV定义了450px的宽度和500px的高度，给右侧定义了500px的高度和600px的宽度。如果就只这样定义的话他们并不会左右排布，DIV默认上下排布。这个时候就要用到CSS里float（浮动）这个属性了。分别给left和right这两个DIV设置左浮动和右浮动。浮动的效果就是让这个容器从原有的层级中浮起，如果左浮动就向左贴向父容器的边界，如果右浮动就向右贴向父容器的右边界。通过这两个浮动我们就能够做到让left和right这两个DIV分别排布在左右两侧。不知道你是否注意到了left和right两个容器相对于父容器all来说还是有边距的，这不是和我刚才说的贴向边界有冲突了么？其实是我们给left和right两个容器设定了margin值，让他们离父容器的边界有段距离。这样不仅美观还更容易看出布局效果。

而我们整个布局的宽和高都是限死的，这虽然有点不灵活，但是我比较推荐将宽度限死，一般在1200px左右的宽度是比较符合日常浏览的。然后高度可以设定一个最小高度min-height，视情况而定，然后一旦内容超出了这个最小高度，DIV的高度便会自适应你超出的内容。因为网页都是从上而下浏览的，所以高度可以不限，但是浏览器和屏幕大小不同的话定义宽度是个很头疼的事情。初学的话就按我推荐的去写吧。等深入了以后其实就能写出自适应宽度的DIV了。

两栏布局其实到这里就写完了，而两栏布局里剩下的东西其实并不在本教程里，本教程主要就是说明一下两栏布局的实现。而剩下填充在DIV里的东西可以通过查看我的网页源代码去研究。

值得注意的是，本次教程DEMO的CSS并不是直接写在HTML里面，而是外部调用。HTML和CSS分开写的好处就是便于维护，HTML就写HTML该写的东西，CSS就写CSS该写的东西。而这些代码全部都是公开的，你查看网页源代码的时候便能获得它们。

方便起见我把地址放在这里，有兴趣的小伙伴可以自行复制。
HTML：http://molunerfinn.com/display/MYBLOG/index-demo.html
CSS：http://molunerfinn.com/display/MYBLOG/style-2.css

然后这个页面有些丑，我们通过加入一些CSS样式可以将它变得更好看，下一篇教程将会带大家写一个相对好看点的博客页面。

放上写好的DEMO地址：
http://molunerfinn.com/display/MYBLOG/index.html