商標(biāo)部分由左右兩部分組成，并且這兩部分緊貼居中的.container的邊緣，所以非常適合使用浮動(dòng)。

<div class="branding">
  <div class="container clearfix">
    <div class="fl"></div>
    <div class="fr"></div>
  </div>
</div>

注意：使用浮動(dòng)，必須清除浮動(dòng)。

左部分

左部分由三部分組成：

• logo：一般logo是超鏈接圖片。
• 分割符：一般使用邊框線(xiàn)制作。
• 主頁(yè)標(biāo)題：頁(yè)面大標(biāo)題，通常使用h1。

HTML

<a href="#">
  < image src="img/logo.png" />
</a>
<span class="spacer"></span>
<h1 class="brand-title">本科教學(xué)審核評(píng)估網(wǎng)</h1>

CSS

.branding .fl {
    margin-top:12px;
    margin-bottom:12px;
}
.branding #logo{
    vertical-align: middle;
}
.branding .spacer {
    display:inline-block;
    height:66px;
    border-right:1px solid #000;
    margin-left:10px;
    margin-right:15px;
    vertical-align: middle;
}
.branding .brand-title {
    display:inline-block;
    font-size:36px;
    font-family:黑體;
    vertical-align: middle;
    margin-top: 10px;
}

右部分

左部分也由三部分組成：

• 超鏈接
• 搜索框：就是文本輸入框。
• 搜索圖標(biāo)：一般是定位在搜索框上的。

HTML

<div  class="goto-home text-right">
  <a href="#">學(xué)校主頁(yè)</a>
<div>
<div class="search-area">
  <input id="search-input" type="text" placeholder="輸入關(guān)鍵字搜索"/>
  <i class="icon-search"></i>
</div>

CSS

.branding .goto-home {
  margin-top:14px;
}

.branding .goto-home a{
  color:#5c5c5c;
  font-size:14px;
}
.branding .goto-home a:hover{
   text-decoration: underline;
}
.branding .search-area{
   position:relative;
   margin-top:26px;
}
.branding .search-area #search-input {
  width:220px;
  height:14px;
  padding:12px 40px 12px 20px;
  border:1px solid #e5e5e5;
}
.branding .search-area .icon-search {
   display:inline-block;
   width:26px;
   height:26px;
   background-image:url("img/icon-search.png");
   position:absolute;
   top:7px;
   right:10px;
}