将背景转成代码

11 现在我们已经将背景图片从Photoshop中切片出来，我们可以开始写代码了。打开CSS文件（styles.css），然后写入以下代码：

代码段3

* {
  margin: 0px;
  padding: 0px;
  border: none;
}
body {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
  background-color: #001b32;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #c8c8c8;
}
#container {
  margin: auto;
  width: 850px;
}

代码段3的解释

让我们来仔细的分析一下样式代码。

首先我们将所有元素的margin，padding，border的值归零以避免跨浏览器的兼容性。我们这个用到的是*选择器。

接下来，我们样式化 body 元素；我们将 background.png 设置为背景，通过 repeat-x 使它水平重复。同样把背景色设置为深蓝（#001b32）。

最后，我们把#container的margin设置为 auto 让布局居中，并且设置宽度为850px。

Logo和站点名的切片

12 现在我们接着制作模板的logo和站点标题。使用矩形选框工具（M），选定站点的标题和标示文本（以下图为参考）。

13 就像处理 background.png 一样，复制这个区域到新文档，然后保存为title.png放在images目录。

和站点名转换成代码

14 我们转到HTML文档中，在#top这个div里面我们创建一个新div，ID为title。

15 在#title div里面，加入<h1>元素来放置我们的站点名；同样需要创建一个超链接（<a>）链接到站点主页。对于这个模板，我们仅把href属性的值设为#，如果需要在实际中使用这

个模板，你可以用反斜杠（/）来代替#。

HTML代码如下：

代码段4

<!--HEADER/NAVIGATION STARTS-->
<div id="top">
  <!--WEBSITE TITLE STARTS-->
  <div id="title">
    <h1><a href="#" title="Your Website Name">Your Website Name</a></h1>
  </div>
  <!--WEBSITE TITLE ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->

16 现在我们转向样式表。样式化#top区域元素。代码如下。

代码段5

#top {
  float: left;
  width: 850px;
  height: 119px;
}
#title {
  float: left;
  width: 278px;
  height: 74px;
  padding-top: 45px;
}
#title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

代码段5的解释

让我们来仔细分析一下上面的代码。

首先我们需要将#top浮动到左边，然后给定一个固定的宽度和高度。

宽度应该和#container等宽，850px，高度应该和浅灰色区域等高，119px。

接下来，我们使用一种CSS背景图片替换的技术使用text-indent方法。我们将#title h1

里面的文字向左缩进-9999px，将文字推出了浏览器的可视区域。这个技术对于屏幕阅读器的可访问性和搜索引擎优化都有好处。

导航转换成代码

17 在#top里面，#title下面我们创建一个ID为navigation的div。在#navigation里面增加一个无序列表，class值设为nav-links。以下

是#navigation的代码段。

代码段6

  <!--NAVIGATION STARTS-->
  <div id="navigation">
    <ul>
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="about">about</a></li>
      <li><a href="#" title="portfolio">portfolio</a></li>
      <li><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
  <!--NAVIGATION ENDS-->

代码段6的解释

给无序列表设定一个nav-links的类主要目录是为了在链接CSS的时候不会影响到页面上的其他无序列表。需要注意的是，最后一个列表项加入borderx2的类，意为“边框乘2”

；因为导航中的列表项都有一个分割线，我们需要给最后一样的左右都加上一个1px的边框（也就是边框乘2）。