默识| 博客模板布局的基本知识
来源：百度文库 编辑：神马文学网 时间：2024/10/02 20:29:39
博客模板布局的基本知识
收藏此页到365KeyPublished on 08/27,2006
本来很好的心情让一个劣质的 D-Link 路由器搞坏了，今天下午刚到实验室就听说路由器因为断电烧掉了，于是大家就花了一下午时间配置服务器，试图通过交换机直接上网。到后来才明白交换机其也是很复杂的，并不仅仅是一个"大号的"集线器，要利用昂贵的专业设备才能控制，最终只好作罢。
回归正题吧，上一篇文章 介绍了 HTML 网页语言的基本知识，它们看起来很简单，几乎无法想象可以用它们构造多姿多彩的博客模板。不错，HTML 标签只是给网页上的每部分内容做了语义上的描述--这是一个标题，那是一个段落，图片，音频等等--并没有提供多少布局和修饰的信息，所以我们还需要更多的知识才能开始修改博客模板的布局。
在解说无聊的网页语法之前，还是先来看一个实例性的网页，说不定您自己就可以发现其中的规律。
这是一个简单的博客模板页面
查看实际显示效果
点击查看实际效果，您将看到一个简单的两栏式模板，最上方还有一个 Banner。什么是 Banner？把这东西当作您博客的招牌就好啦，就像街头店面为了吸引注意而挂的大牌子一样。 在这段网页代码中出现了一些新玩意，一个是
收藏此页到365KeyPublished on 08/27,2006
本来很好的心情让一个劣质的 D-Link 路由器搞坏了，今天下午刚到实验室就听说路由器因为断电烧掉了，于是大家就花了一下午时间配置服务器，试图通过交换机直接上网。到后来才明白交换机其也是很复杂的，并不仅仅是一个"大号的"集线器，要利用昂贵的专业设备才能控制，最终只好作罢。
回归正题吧，上一篇文章 介绍了 HTML 网页语言的基本知识，它们看起来很简单，几乎无法想象可以用它们构造多姿多彩的博客模板。不错，HTML 标签只是给网页上的每部分内容做了语义上的描述--这是一个标题，那是一个段落，图片，音频等等--并没有提供多少布局和修饰的信息，所以我们还需要更多的知识才能开始修改博客模板的布局。
在解说无聊的网页语法之前，还是先来看一个实例性的网页，说不定您自己就可以发现其中的规律。
博客文章标题
文章小标题
今天终于开始写博客了，好高兴啊！！我的大作即将诞生，敬请关注~。
有一句话说得好：失败只有一种，那就是半途而废--
后面还没有想好，还是下次再写吧！感谢凤凰卫视，感谢 CCTV，感谢盖茨大叔的晕倒死操作系统。
我的好友列表
- 傻大木
- 乔布什
- 芙蓉姐夫
查看实际显示效果
点击查看实际效果，您将看到一个简单的两栏式模板，最上方还有一个 Banner。什么是 Banner？把这东西当作您博客的招牌就好啦，就像街头店面为了吸引注意而挂的大牌子一样。 在这段网页代码中出现了一些新玩意，一个是
标签，另外就是 id="xxx" 和 s="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 样式表，没有英文缩写说明，知道也不告诉您，因为我最恨英文缩写！
延伸阅读：CSS2 中文手册 by 苏沈小雨，CSS2 中文手册电子版，同步预览 CSS 样式表显示效果的小工具
您也许会奇怪，浏览器怎么知道该怎么摆放这些 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 样式表，没有英文缩写说明，知道也不告诉您，因为我最恨英文缩写！
延伸阅读：CSS2 中文手册 by 苏沈小雨，CSS2 中文手册电子版，同步预览 CSS 样式表显示效果的小工具