手把手教你做主题 WordPress皮肤教程(二)（6）

以下为引用的内容：

===================
<div id="header">
  <div id="headerimg">
   <a href="#"><img alt="Generation X" border="0" src=http://www.chinaz.com/Webbiz/Exp/"images/pngs/logo-480x135.png" /></a>

  </div>
  <div id="top_nav">
   <ul>
    <li><a href="#"><img alt="Home" border="0" src=http://www.chinaz.com/Webbiz/Exp/"images/pngs/home.png" /></a></li>
    <li><a href="#"><img alt="About" border="0" src=http://www.chinaz.com/Webbiz/Exp/"images/pngs/about.png" /></a></li>

   </ul>
  </div>
 </div>

.
.
.

 <div class="bottom_sidebar">   <a href="#"><img alt="0" border="0" src=http://www.chinaz.com/Webbiz/Exp/"images/pngs/rss.png" /></a> </div>

.
.
.

<div class="bottom">   <img alt="" border="0" src=http://www.chinaz.com/Webbiz/Exp/"images/pngs/footer-115x51.png" /></div>
==============================
为每个图像添加应有的CSS属性

==================================
#headerimg
{
  height: 185px;
  margin: 0px;
  padding: 55px 0px 0px 45px;
  text-align: left;
 }

#top_nav
{
  height: 45px;
  padding-left: 105px;
  text-align: left;
}

#top_nav li a:hover
{
   background: url('./images/pngs/hover.png') no-repeat bottom center;
}

.bottom_sidebar
{
  background: url('./images/pngs/bottom-325x90.png') no-repeat bottom center;
  float: right;
  padding: 0px 0px 0px 15px;
  height: 90px;
  text-align: left;
  width: 310px;
 }

.post .postmetadata{ background: url('./images/pngs/bg-45x58.png') no-repeat top left; float: right; height: 34px; padding: 12px 10px; width: 25px;}

 #footer .column1
 {
 float: left;
 font: normal 10px Arial;
 padding: 0px 0px 0px 80px;
 width: 300px;
 }

 .column1 .bottom
 {
  padding: 50px 0px 0px 40px;
 }

===============================

在浏览器中的效果：