编写侧边栏HTML代码

35 在.separator层下面，是我们的#sidebar，将<h3>作为侧边栏标题。然后给无序列表加入类sidebar-list使样式可以自定义。

代码段13

<!--SEPARATOR ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">
    <h3>lorem ipsum dolor</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
    </ul>
</div>
<!--SIDEBAR ENDS-->

通过CSS样式化侧边栏

36 CSS中加入如下代码

代码段14

#sidebar {
  float: left;
  height: 209px;
  width: 219px;
  background-image: url(images/contentbox.png);
  background-repeat: no-repeat;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}
h3 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}
.sidebar-list li {
  list-style-type: none;
  margin-top: 10px;
  padding-bottom: 10px;
  background-image: url(images/divider.png);
  background-repeat: repeat-x;
  background-position: bottom;
}

代码段14的解释

我们给#sidebar和contentbox.png一样的宽度高度。然后向左浮动，保证内容居左。同样设定background-image为contentbox.png。

通过text-transform将h3文字大小，通过text-align让文字居中。

最后通过list-style-type取值为none去掉.sidebar-list列表项的默认圆点，然后设定background-image为divider.png，水平重复

(repeat-x)。然后给定一些margin和padding值，让他们之间留些空间。

内容区域转换为代码

37 内容区域相对简单，因为只包含了一些段落和标题。在#content层中，加入二级标题(<h2>)，然后通过span.heading-color2给第二部分的文字添加不同

的颜色。填充段落可以用lorem ipsum无意义文本。HTML代码如下。

代码段15

<!--CONTENT STARTS-->
<div id="content">
  <h2>welcome to <span>yourwebsite!</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
</div>
<!--CONTENT ENDS-->

内容区域样式化

38 #content层加入以下代码。

代码段16

#content {
  float: right;
  width: 550px;
  text-align: justify;
}
#content p { margin-bottom: 10px; }

代码段16的解释

为了让#content在右边显示，我们将其向右浮动，然后给定一个固定的宽度。不给定一个固定的高度的原因是我们想通过内部文本来控制高度。然后给<p>加入顶部

和底部margin让它们之间留有空间（因为之前我们已经将它们都归零了，这步是必须的）。

页脚切片

39 就快要结束了，让我们继续！使用矩形选框工具，大小850px × 60px将也叫背景图片选定。

页脚转换成代码

40 页脚很好转换成代码：我们之需要之前创建的#footer。在#footer层中，我们使用<p>加入一些版权文字。代码如下：

代码段17

<!--FOOTER STARTS-->
<div id="footer">
  <p>Copyright &copy; Six Revisions - Design By Richard Carpenter</p>
</div>
<!--FOOTER ENDS-->

将页脚样式化

41 加入如下代码。

代码段18

#footer {
  float: left;
  width: 850px;
  background-image: url(images/footer.png);
  background-repeat: no-repeat;
  height: 60px;
  margin-top: 40px;
  padding-top: 25px;
  text-align: center;
}

代码段18的解释

我们将#footer层的background-image属性设置为footer.png；向左浮动；通过no-repeat保证背景图的不重复。#footer宽度高度大小和footer.png相

等。然后在顶部通过margin给出一定空间。

完成！

我们做完了！谢谢阅读本教程，我很期待大家的评论和问题！如果大家做的不错，最终效果应该像这样：

（点击图片查看在线demo）

下载

本教程的源文件遵照创作共用协议；任何商业和个人使用，请保留文件内的版权信息。

• minimal-modern-portfolio-demo.zip (ZIP, 0.29MB)