CSS教程-从零开始建立一个有型的作品集网站

19.02.09 / 翻译 / Author: cutecool / Comments: (0) / 被看了 245 次
Tags: , ,

我的废话：翻译了一篇CSS教程，先放在译言上了，译言的编辑器蛮好用的。翻译了差不多一个月吧，伴随着高口的最后冲刺阶段，虽说内容不在高口考核的范围内，但也算锻炼了动手能力（实在是高口指定的范围我不感兴趣不想翻啊…）。看到的人觉得有用就可以了，顺便欢迎指出翻译的不准确的地方，关于 CSS，我是货真价实的刚刚入门者。

原文作者：Collis Ta’eed
原文链接：Build a Sleek Portfolio Site from Scratch

第一步

下面是我们将要动手制作的设计图。如前所述，你可以阅读PSDTUTS上的这篇教程来学习如何做出这样的设计图。在这篇教程里我们只制作首页，不过你可以以此为基础用相同的布局制作内页。

第二步

首先要做的是确定页面结构。随着你对CSS布局的逐步学习，这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。

什么是绝对定位？

一个HTML元素（比如<div>、<p>等等）被放入页面时具有一个天生的位置，这个位置是由之前放入的元素确定的。例 如，你放入一个填充了文字的<p></p>标签，接着放入另一个<p></p>，它会自然出现在第一 个<p>下方。每个元素相对于上一个元素流动。

绝对定位则不同，它给一个对象指定精确的位置使它脱离常规的元素流。如果你像之前一样放入第一个<p></p>，然后绝对 定位第二个<p></p>为 left:500px; top:500px，那它就会无视第一个<p>准确无误地出现在指定的位置。

你可以像这样设置绝对定位：

  1. .className {
  3. position:absolute;
  4. top:0px;
  5. left:0px;
  7. }

绝对定位的缺点

使用绝对定位的主要问题是你的元素们不会真正地相互关联。例如，你在靠近页面顶端的地方放置了一个文本块，然后稍靠下放置另一个，当每一个块的文本都较短时这看上去很好。但如果顶部的块内是一篇长文，它就会越过第二个块，而不是把第二个块推向下方。

所以绝对定位只对那些尺寸固定并且不需要与其他元素互动的元素真正有效。

为什么本例中我们要用绝对定位？

因为绝对定位的好处就在于，它真的、真的非常简单！你告诉浏览器东西往哪儿放它就往哪儿放！更棒的是，当你使用绝对定位时，浏览器兼容性问题会大大减少。毕竟不管你用的是Firefox、Internet Explorer还是Safari，100px总归是100px。

嗯…该开始我们的布局了

我们将要制作网站的方法是：

  • 使用大尺寸的背景图片
  • 绝对定位Logo、菜单和头部面板，让它们精确地出现该出现的地方
  • 将content（内容）放入惯用的<div>标签，但设置很高的padding-top（顶部内边距）好让content向下推到该出现的地方
  • 让footer（页脚）坐镇底部

如果上述说明还不能让你有一个整体的感觉，先别着急，当你看到网站成型的时候就会了解了！

第三步

现在，我们需要两张背景图片。一张大的，存成JPG后大约56kb。这个尺寸在过去稍嫌太大，不过现在这不足为道。

另一张窄条图片，作为主体区域的背景，将不断重复向右，拖动浏览器窗口时它也会随之向外平铺。

（注意：下图中的Logo不应该显示在背景图片里，抱歉这是张不太好的截图）

你可以分别在这里和这里看到我创建的两张图片。

第四步

好了，我们现在开始写HTML。首先我们列出一些基本代码：

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  3. <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
  4. <head>
  5. <title>PSD vs NET</title>
  6. <link rel=“stylesheet” href=“step1_style.css” type=“text/css” media=“screen” />
  7. </head>
  9. <body>
  10. <div id=“outside_container”>
  11. <div id=“container”>
  14. <!– The Main Area –>
  17. </div>
  18. </div>
  19. <div id=“footer”>
  21. <img src=“images/footer_logo.jpg” />
  23. <span id=“footer_text”>
  24. Made for a PSDTUTS and NETTUTS tutorial by Collis!
  25. See the <a href=“http://psdtuts.com”>Photoshop Tutorial</a>,
  26. see the <a href=“http://nettuts.com”>Web Tutorial</a>
  27. </span>
  29. </div>
  30. </body>
  31. </html>

通常，我们最好由外向内进行布局。我在这里置入3个主要的<div>，前两个是outside_container / container，另外一个是footer. 这需要一些说明：

  1. 我同时创建outside_container 和 container是为了实现双重背景图像——一张小图平铺，一张大图置顶。在outside_container里我将放入平铺背景，在container 里我将放入大幅的主背景图，而container将出现在outside_container顶部。
  2. footer需要置于两个container之外，是为了让footer在浏览器窗口纵向延伸时不停向下。既然它自己有一个背景，就不能在container之内，若非如此，你可能会在把窗口拉到某个程度时看到container的背景而不是footer的！

你还看到我在footer里加了一些内容——小logo和一段文字。我把这段文字包在一个<span>标签里以便后续操作。 而既然footer里只有一张图片，我们没理由再给<img>标签一个id或class，只要称之为#footer img就可以了。这样可以让我们的HTML更简单一些。

第五步

到目前为止我们的代码所需的CSS：

  1. body {
  2. margin:0px; padding:0px;
  3. background-color:#11090a;
  4. font-family:Arial, Helvetica, sans-serif;
  5. }
  6. #outside_container {
  7. background:url(images/background_slice.jpg) repeat-x #000000;
  8. }
  9. #container {
  10. background:url(images/background_main.jpg) no-repeat;
  11. min-height:800px;
  12. }
  13. #footer {
  14. border-top:1px solid #3f2324;
  15. padding:30px 50px 80px 50px;
  16. }

一条一条来看：

  1. 首先我们重新定义了body标签。我差不多总是会先做这件事。我们除去默认的margin和padding，设置页面背景颜色和字体。注意，这里的背景颜色实际上也是footer的背景颜色。如前所述，这样做是为了让你在纵向拉伸窗口时也能一直看到footer。
  2. 然后，我用那张窄条背景图片填充outside_container标签，图片只沿x轴（即从左向右）重复，没有背景图的地方我们会直接看到黑色 (#000000)。由于我们只横向平铺，页面拉长时我们不会看到向下延续的图片，而是看到黑色的背景。渐变成黑色的平铺图片让这一切表现完美！
  3. 接下来轮到container了。我们将大背景图设为不重复的，它只出现一次。注意，因为这 个<div>标签在前一个的内部，会伸展至将其填满，所以我们没有指定背景颜色。如果指定的话它将覆盖我们的 outside_container，而不是像现在这样，在页面顶部的背景图外围你仍可以看到outside_container的背景。
  4. 我还赋予了container一个最小高度，这样我们可以大致看到有内容的网页会是什么样子。 稍后这个最小高度可以由我们的内容来产生。
  5. footer基本上只有一个单线border加一些padding，没必要再赋予它背景颜色，因为我们已经在<body>里设置过了。记住，padding的定义方法如下padding: top right bottom left（顺时针方向！）

我们现在到这儿了…

看看目前的网站

第六步

接下来我们加上其他一些样式来结束footer的定义：

  1. /*
  2. Footer
  3. */
  4. #footer {
  5. border-top:1px solid #3f2324;
  6. padding:30px 50px 80px 50px;
  7. color:#674f5d;
  8. font-size:9px;
  9. line-height:14px;
  10. }
  11. #footer img {
  12. float:left;
  13. margin-right:10px;
  14. }
  15. #footer span {
  16. display:block;
  17. float:left;
  18. width:250px;
  19. }
  20. #footer a {
  21. color:#9e8292;
  22. text-decoration:none;
  23. }
  24. #footer a:hover { color:#ffffff; }

如上，我在#footer样式里加了点东西并创建了几个新的样式。还是一条一条来看：

  1. 首先，位于/*和*/之间的这些玩意儿是CSS注释。添加注释有利于划分CSS文件使其便于理解。实际上我发现如果不加注意，大型项目中的CSS文件相当可能变得失去控制。尽早形成好习惯吧：正确命名你的选择器，添加注释，聚合相似的样式，为大型项目拆分出多个CSS文件等等。
  2. 在#footer中，我在之前的定义上添加了font color（字体颜色）、font size（字体尺寸）和line-height（行间距）。line-height是非常有用的文本属性，它可以帮你间隔文本。没有定义好行间距的文本看 上去挤成一团难以阅读。但过大的行间距也会让文本隔得太开，看上去怪怪的。你可能要多试试看不同的字体和尺寸适合多大的行距。本例中14px似乎刚刚好。
  3. 接下来我把#footer img和#footer span都设为float:left，从而使两个标签紧挨着排成两列。我将在下文中深入探讨浮动和列的问题。
  4. 最后，我们告诉浏览器怎么处理出现在footer里的<a>标签（即链接）：没有下划线，在鼠标悬停时要变色。

加上这些后我们到了这里：

看看目前的网站

第七步

解决了footer部分，现在我们来给主container区域加入更多内容。首先我们需要两张来自PSD图档的新图片。

注意，我使用了图片来表现文本块。一般说来，直接用文字是最好的，这样能让网页更容易被搜索到同时也被实践证明是比较好的做法。但如果要用文字实现图中的效果我们必须使用一些难得多的Flash和SIRr技术。既然本文是篇简明易懂的教程，我还是宁愿用一副大图片。:-）

下面是一小段HTML代码，只有container部分的：

  1. <div id=“outside_container”>
  2. <div id=“container”>
  4. <a href=“#”><img src=“images/logo.jpg” id=“logo” /></a>
  6. <ul id=“menu”>
  7. <li><a href=“#”>Retouching</a></li>
  8. <li><a href=“#”>Digital Effects</a></li>
  9. <li><a href=“#”>Web Work</a></li>
  10. </ul>
  12. <ul id=“right_menu”>
  13. <li><a href=“#”>About</a></li>
  14. <li><a href=“#”>Contact</a></li>
  15. </ul>
  17. <img src=“images/panel_home.jpg” id=“panel” />
  19. <div id=“content”>
  21. <!– THE CONTENT GOES IN HERE –>
  23. </div>
  25. </div>
  26. </div>

在container区域我们加了五项内容：

  1. 我们的logo： 加了链接，点击可到达首页，id=“logo”
  2. 主菜单: 很简单的一个无序列表，id=”menu”
  3. 右侧菜单: 除了id=”right_menu”外，和前一个菜单没两样
  4. 大文本图片：这是我们主要的头部文本，存成了图片, id=”panel”
  5. Content（内容） Div：我们待会儿要把页面的所有内容放在这里。但现在我只写了一句HTML注释，先让它留空。

在我们开始设计样式前，现在的页面值得一看，所有的内容像这样堆在一起：

你也看见了，我们得来个乾坤大挪移好让一切归位。你还应该想起来，我们要用绝对定位来简单快捷地完成这个任务。

第八步

以下是让元素们各就各位要增加的CSS：

  1. #container {
  2. background:url(images/background_main.jpg) no-repeat;
  3. min-height:800px;
  4. width:1000px;
  5. position:relative;
  6. }
  9. /*
  10. Logo / Menu / Panel Positioning
  11. */
  13. #logo { position:absolute; top:58px; left:51px; }
  15. #panel { position:absolute; top:165px; left:51px; }
  17. ul#menu {
  18. margin:0px; padding:0px;
  19. position:absolute; top:145px; left:75px;
  20. }
  21. ul#right_menu {
  22. margin:0px; padding:0px;
  23. position:absolute; top:145px; right:75px;
  24. }

我们再一次…一条一条看：

  1. 首先，你看到一段熟悉的代码——container，这次多了两行：width:1000px和position:relative。把position（位置）设为relative（相对的）很重要，这样内部元素的绝对定位就是相对于container标签的。这也意味着我可以在已知container宽为1000px的条件下来定位盒子里的元素，例如right_menu（右侧菜单）。
  2. 接着，我用一句注释来给这个新CSS分段。
  3. 给logo和panel绝对定位。我怎么知道定位属性值该多大呢？很简单，拿出原始PSD图来量一下就行！你看，属性定义一简单，绝对定位也就很容易。
  4. 然后给两个菜单绝对定位。这里我加了margin:0px; padding:0px;来清除无序菜单默认的margin和padding。
  5. 接下来请注意，我指定right_menu的绝对定位为right:75px，让它出现在距容器右边界75px的位置。通常浏览器窗口被用作参照物，但前面我已将container设为position:relative，这就让75px从<div id=”container”></div>的右边界开始算起了。你这时可能会想：这有啥用？我用left属性定位不就行了？当然，你可以这么做，但如果你要给右侧菜单增加选项，你就得一遍又一遍地重新定位好让它距离右边界75px。而用上right，选项就会自动左移。试试看吧！

看看咱们干到哪儿了：

第九步

上图中，logo和头部元素看上去摆在了正确的位置，但菜单还有点儿怪怪的。设计样式前我们先说一下logo和大文本图片的事。你可能在想，既然它俩都是图片为什么不放在背景图片里就好了？

这是因为我们需要给logo加上链接，点击可返回首页（让网站更好用）。而大文本图片可能要随页面而变，把它做成单独的图片我们就可以让大量HTML页面使用同一个CSS样式表，只要换上文字不同的图片就可以了。

现在咱们来设计那两个菜单，让页面真正开始成型。要用到的CSS如下：

  1. ul#menu {
  2. margin:0px; padding:0px;
  3. position:absolute; top:138px; left:75px;
  4. }
  5. ul#right_menu {
  6. margin:0px; padding:0px;
  7. position:absolute; top:138px; rightright:110px;
  8. }
  9. ul#menu li, ul#right_menu li {
  10. margin:0px; padding:0px;
  11. list-style:none;
  12. margin-right:10px;
  13. font-size:9px;
  14. text-transform:uppercase;
  15. display:inline;
  16. }
  17. ul#menu li a, ul#right_menu li a {
  18. text-decoration:none;
  19. color:#bd92b2;
  20. }
  21. ul#menu li a:hover, ul#right_menu li a:hover {
  22. text-decoration:none;
  23. color:#ffffff;
  24. }

头两条代码和之前一样（除了稍微调整了定位让它们仍然正确显示）。注意，因为两个菜单的位置不一样，这两条定义是分开的，但菜单选项的样式是相同的，所以我们把后面两条定义并成了一条。把两个属性一起定义的格式是：

.myClass, .myClass2 { … }

这和下面的定义是完全不同的：

.myClass .myClass2 { … }

因为第二个定义声明的对象是位于class=”myClass”的标签内的所有class=”myClass2″的元素

回到我们的样式表，看一遍重要的几点：

  1. 和前面一样，我们把<ul>元素设为0 margin和0 padding，并绝对定位。
  2. 然后我们为<ul>内部所有的<li>元素做出声明，让它们没有列表样式（即没有圆点），9px大小，统统大写，最重要的，让它们display:inline（译者注：行内显示）。行内显示意味着它们排成一行，而不是一个接在另一个下面。
  3. 接下来的定义声明了<li>内部的<a>链接们应该是某个颜色的并且没有下划线。这里的<li>包括<ul id=”menu”> 和<ul id=”right_menu”>内的所有<li>。

加上这些定义，我们的页面现在看上去相当不错啦！

看看目前的网站

第十步

现在该增加内容了！我们先写些伪文本来形成列。下面是HTML：

  1. <div id=“outside_container”>
  2. <div id=“container”>
  4. <a href=“#”><img src=“images/logo.jpg” id=“logo” /></a>
  6. <ul id=“menu”>
  7. <li><a href=“#”>Retouching</a></li>
  8. <li><a href=“#”>Digital Effects</a></li>
  9. <li><a href=“#”>Web Work</a></li>
  10. </ul>
  12. <ul id=“right_menu”>
  13. <li><a href=“#”>About</a></li>
  14. <li><a href=“#”>Contact</a></li>
  15. </ul>
  17. <img src=“images/panel_home.jpg” id=“panel” />
  19. <div id=“content”>
  21. <div class=“column1″>
  23. <h2>a sleek design</h2>
  25. <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  26. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  27. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  28. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  30. </div>
  31. <div class=“column2″>
  33. <h2>tutorials</h2>
  35. <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  36. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  37. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  38. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  41. </div>
  42. <div class=“column3″>
  44. <h2>recent work</h2>
  46. <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  47. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  48. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  49. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  52. </div>
  55. </div>
  57. </div>
  58. </div>

在这段代码中，你可以看到我在内容区域加了3个新的<div>，每一个<div>包含一个<h2>标题元素和 一些文本。他们的class名称是column1、column2、column3（列1、列2、列3）。加上文本是为了展示怎样形成列。

为了让他们看上去像列的样子我们先来添加一段CSS：

  1. /*
  2. Content
  3. */
  5. #content {
  6. padding-top:435px;
  7. padding-left:85px;
  8. width:815px;
  9. color:#674f5d;
  10. font-size:13px;
  11. line-height:20px;
  12. }
  13. .column1 { float:left; width:230px; margin-right:30px; }
  14. .column2 { float:left; width:230px; margin-right:30px; }
  15. .column3 { float:left; width:270px; }

我用一句注释为新的CSS段落起头，然后为#content设置样式。注意padding-top值….435px!设这么大是为了给之前绝对定位的元素空出地方。与绝对定位的元素不同，content是从属于页面正常流的。

这是因为你还要在content中加入更多内容，把footer推到下面去。绝对定位会让它覆盖在footer上方。

然后我给三个column分别设置宽度并加上float:left，这可以让它们漂向页面左边，与其他向左浮动的元素对齐。为了不让他们紧挨在一起，我给前两个column赋予了右外边距。

浮动一个元素会让它漂到左侧或右侧，并使其它元素环绕在其四周。加入另一个浮动元素，二者会并排成列。基本上你看到的列布局都运用了float（浮动）。

不幸的是，浮动元素会出现一个怪问题——它们跟自己的容器不对付，并且会漂到下一个元素上方而不是把它往下推。解决这个问题的方法就是给浮动元素后面的某个元素加上属性clear:both。

Clear（清理）属性可以阻止元素环绕浮动的<div>，这有点儿不好解释，我们直接看看清理和不清理分别会出现什么状况吧。

不清理
布局看上去会像这样：

几个列漂在footer上方，footer环绕着列。这可不对！

清理
方法相当简单，我们只需要在三个列后面加上一个<div>，如下：

  1. <div id=“content”>
  3. <div class=“column1″>
  5. <h2>a sleek design</h2>
  7. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  8. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  9. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  10. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  12. </div>
  13. <div class=“column2″>
  15. <h2>tutorials</h2>
  17. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  18. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  19. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  20. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  23. </div>
  24. <div class=“column3″>
  26. <h2>recent work</h2>
  28. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  29. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  30. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  31. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  34. </div>
  36. <div style=“clear:both”></div>
  38. </div>

看到底部的<div style=”clear:both”></div>了吗？只用一个声明清理那三个列的空<div>，就解决了我们的问题：

点此查看网站

关于浮动和清理最后罗嗦几句

你可能在想为什么我不把”clear:both”放在<div id=”footer”>的定义中。而我要说的是，因为我们使用的背景，这样做是不会奏效的…有图有真相：

显然存在不需要插入无用的<div>标签的方法，你可以通过延伸阅读QuirksMode来了解。从个人角度来说，我一直使用这个方法，而它也一贯表现良好，所以我还是会继续用下去的。

第十一步

就快完成了！主要布局已经井井有条，我们只要再加点内容并给它样式就可以了。以下是这部分的HTML：

  1. <div id=“content”>
  3. <div class=“column1″>
  5. <h2>a sleek design</h2>
  7. <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
  8. <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
  10. </div>
  11. <div class=“column2″>
  13. <h2>tutorials</h2>
  15. <p>Psdtuts and nettuts provide tutorials on the following topics (sorta):</p>
  17. <img src=“images/adobe.jpg” />
  19. </div>
  20. <div class=“column3″>
  22. <h2>recent work</h2>
  24. <ul class=“work”>
  25. <li>
  26. <a href=“”>
  27. <img src=“images/work_1.jpg” />
  28. <h4>Working Within Limitations to Achieve Great Designs</h4>
  29. Sean Hodge
  30. </a>
  31. </li>
  32. <li>
  33. <a href=“”>
  34. <img src=“images/work_2.jpg” />
  35. <h4>Create a Slick Tabbed Content Area using jQuery</h4>
  36. Collis Ta’eed
  37. </a>
  38. </li>
  39. <li>
  40. <a href=“”>
  41. <img src=“images/work_3.jpg” />
  42. <h4>Creating a PayPal Payment Form</h4>
  43. Collis Ta’eed
  44. </a>
  45. </li>
  46. </ul>
  48. </div>
  50. <div style=“clear:both”></div>
  52. </div>

和之前的结构基本一样，除了第三列里我创建的一个包含最近作品的<ul>元素。注意在这个<ul>元素里我用链接标签<a>把图片、标题和文本包在一起，形成一个块链接。这意味着鼠标移到图片上时，相关联的文字也会改变颜色。

接下来是内容部分的CSS：

view plaincopy to clipboardprint?
  1. #content h2 {
  2. font-family:Georgia, “Times New Roman”, Times, serif;
  3. color:#dbaa70;
  4. margin:0px 0px 20px 0px;
  5. font-weight:normal;
  6. }
  8. ul.work {
  9. margin:0px; padding:0px;
  10. }
  11. ul.work li {
  12. list-style:none;
  13. margin:0px; padding:0px;
  14. clear:both;
  15. }
  16. ul.work li a {
  17. color:#e0b882;
  18. display:block;
  19. padding:5px 10px 5px 10px;
  20. text-decoration:none;
  21. font-size:10px;
  22. }
  23. ul.work li a img {
  24. float:left;
  25. margin-right:20px;
  26. margin-bottom:20px;
  27. }
  28. ul.work li a h4 {
  29. color:#674f5d;
  30. margin:0px;
  31. font-weight:normal;
  32. font-size:13px;
  33. }
  34. ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }

我们依次来看这些类定义：

  1. 首先我们重新定义了<div id=”content”>中<h2>的外观。我们可以重定义所有的<h2>，但你无法预料哪儿还会再冒出个< h2>来，所以适度详细的定义是较好的做法。这里我按照自己的需求改变了它的颜色、字体、字体粗细和外边距。
  2. 接着定义<ul class=”work”>，这一条<ul>定义只消除了内、外边距。
  3. 接下来给<li>去掉列表样式（即没有圆点）。定义中还声明了clear:both，在上一步中你曾见过这个用来清理浮动元素的属性。往下看一点儿你会发现后面的img是浮动的，所以我们要清理每个新的列表元素<li>，不让它环绕前一个<li>.
  4. 然后是<a>的部分，我们声明标签<a>应该显示成块状，也就是说让链接包裹图片和文字变成一整块，再加入内边距填充块并给文字制定样式。
  5. 再来是<a>内部的<img>，让它浮动到左侧，并具有外边距。
  6. 最后我们定义<h4>里的文字的颜色。

就这些！我们做完啦！

完工！

至此，网站的首页已经完成了。你可以下载一份网站文档压缩包来全面回顾一下，它包含了这篇教程里每一步的HTML文档。当然，你可以先看一下最终的页面：

点此查看最终页面

Internet Explorer

你永远都需要跨浏览器测试，诶…我刚从Windows换到美妙的新Mac，还没来得及装并行Windows系统，所以我没法做这个测试！我通过BrowserShots.org做了个快速检测，IE6/7基本上都能正常显示，不过那三个列把footer多推下去了一些。这很容易修正，不过下个星期我才会装Windows，这之前IE用户们只能自力更生了:-)

一旦我解决了系统的问题我会立刻更新，不过我可不想拖到那时才发布！