默识| 博客模板布局的基本知识

抽屉 2007-05-26

展开全文

博客模板布局的基本知识

Published on 08/27,2006

　　本来很好的心情让一个劣质的 D-Link 路由器搞坏了，今天下午刚到实验室就听说路由器因为断电烧掉了，于是大家就花了一下午时间配置服务器，试图通过交换机直接上网。到后来才明白交换机其也是很复杂的，并不仅仅是一个"大号的"集线器，要利用昂贵的专业设备才能控制，最终只好作罢。

　　回归正题吧，上一篇文章介绍了 HTML 网页语言的基本知识，它们看起来很简单，几乎无法想象可以用它们构造多姿多彩的博客模板。不错，HTML 标签只是给网页上的每部分内容做了语义上的描述--这是一个标题，那是一个段落，图片，音频等等--并没有提供多少布局和修饰的信息，所以我们还需要更多的知识才能开始修改博客模板的布局。

　　在解说无聊的网页语法之前，还是先来看一个实例性的网页，说不定您自己就可以发现其中的规律。

<html> <head> <title>这是一个简单的博客模板页面</title> </head> <body> <div id="banner" style="width:600px;height:200px;background-color:red;"> <h1>大家好，我也开始写博客啦</h1> </div> <div id="left" style="width:400px;background-color:green;float:left"> <h2>博客文章标题</h2> <h3>文章小标题</h3> <p>　　今天终于开始写博客了，好高兴啊！！我的大作即将诞生，敬请关注~。</p> <blockquote>有一句话说得好：失败只有一种，那就是半途而废--</blockquote> <p>　　后面还没有想好，还是下次再写吧！感谢凤凰卫视，感谢 CCTV，感谢盖茨大叔的晕倒死操作系统。</p> </div> <div id="right" style="width:200px;background-color:blue;float:left"> <h3>我的好友列表</h3> <ul> <li>傻大木</li> <li>乔布什</li> <li>芙蓉姐夫</li> </ul> </div> </body> </html>
查看实际显示效果

　　点击查看实际效果，您将看到一个简单的两栏式模板，最上方还有一个 Banner。什么是 Banner？把这东西当作您博客的招牌就好啦，就像街头店面为了吸引注意而挂的大牌子一样。在这段网页代码中出现了一些新玩意，一个是 <div> 标签，另外就是 id="xxx" 和 style="xxx"。毫无疑问，是这些代码为网页添加了布局功能，可以把 div 理解为一张可以伸缩的长方形"纸板"，您可以控制它的大小和颜色等属性以满足需要，另外还可以创建多个 div 以便实现 Banner 和文字分栏等布局。

　　您也许会奇怪，浏览器怎么知道该怎么摆放这些 div 呢？这确实很令人迷惑，您分析了 style 这部分内容，发现它可以控制 div 的尺寸和颜色，但是并没有指定 div 的摆放位置。另外 float:left 这段代码也令人琢磨不透，难道这里面有什么玄机？不错，正是因为有了 float:left 这段代码，Banner 下面的两个 div 才能一左一右地排列整齐，因为 float 的意思是 div 自身向左漂移，并允许它后面的 div 漂移到其右侧，而不是被它挡在脚底下。事实上，网页上的元素默认都是从上排到下的，没有前方 div 的允许，后方的 div 是无法跟前面的 div 站一排的，这也是 Banner 能够高高在上不被后来者"抢占地盘"的原因。

　　那么 id="xxx" 又是做什么用的，是不是仅仅为了给 div 取个名字呢？我认为您真是非常聪明，就是这个理由。有了名字我们才好控制它啊，才好告诉浏览器我们需要修改哪个 div 的属性啊。此外，您在查看网页源代码的时候也许还看见过 class="xxx" 的代码，这里 class 表示的是一类元素，与 id 不同的是，网页上可以有多个 div 元素都用同样的 class="red-paper" 命名，这样就可以一次控制多个 div。反过来说，id 是不允许重复的，一个网页里不能有两个 div 都叫做 id="number-one"。

　　细心的读者还会有疑问，style 看起来很有趣哦，但是它好像有一种特殊的语法规则，不知道除了 width, height, background-color, float 之外还有什么可以用的修饰词呢？我在这里非常兴奋地告诉您，这个 style 将是制作博客模板过程中最有趣的地方了，很多修饰的需求都可以通过简单的 style 代码搞定。如果非要问这个东西叫什么的话，我会告诉您它叫做 CSS 样式表，没有英文缩写说明，知道也不告诉您，因为我最恨英文缩写！