混合并匹配前景背景图片：

<div id="header">
 <h1><img src=""/></h1>
 <h2><img src=""/></h2>
</div>

css:

#header{
  background:#033 url() repeat-x bottom;
  color:#fff;
  height:55px;
  position:relative;
  }
 
#header h1,header h2{
  margin:0px;
  padding:0px;
  position:absolute;
  }
 
#header h1{
  top:5px;
  height:50px;
  left:8px;
  background: url() no-repeat bottom;
  }
 
#header h2{
  top:20px;
  left:193px;
  }

图例因为没有相关的图片，暂不上传；

网站搜索:可以用绝对定位或者浮动

 <div id="headerlinks">
   <a href="#">contact us</a>
   <a href="#">site map</a>
   <a href="#">finder</a>
 </div>

css:

#headerlinks{
  float:right;
  font-size:12px;
  background-color:#996666;
  padding:6px 6px 8px 10px;
  width:160px;
  height:20px;
  }

效果图：

搜索框：

 <div id="headersearch">
   <form>
     <input type="text" name="txtsearch" id="txtsearch" />
     <input type="image" src="file:///F|/button/search.gif" alt="search" />
   </form>
 </div>
css:
#headersearch{
  position:absolute;
  top:34px;
  right:3px;
  }
 
#headersearch form{
  margin:0px;
  padding:0px;
  }
 
#headersearch form input{
  margin:0px;
  padding:0px;
  vertical-align:middle;
   }
  
#txtsearch{
  height:17px;
  width:115px;
  border:1px solid black;
  }

图例：

导航：

 <div id="tablinks">
   <div><a href="#">home</a></div>
   <div><a href="#">flights</a></div>
   <div><a href="#">travel</a></div>
   <div><a href="#">hotel</a></div>
   <div><a href="#">late_details</a></div>
 </div>

#tablinks div{
  float:left;
  border-right:1px solid #000;
    }
 
#tablinks a{
  display:block;
  padding:5px 10px;
  color:#fff;
  text-decoration:none;
  background-color:#9999FF;
} 
图例：

当前位置：采用ul嵌套

 <div id="breadcrumb">
  you are here:
   <ul>
    <li><a href="#">travel</a>
     <ul>
      <li><a href="#">destination</a>
        <ul>
         <li><a href="#">Europe</a></li>
        </ul>
      </li>
     </ul>
    </li>
   </ul>
 </div>

图例：