商標(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是超鏈接圖片感帅。
- 分割符：一般使用邊框線制作斗锭。
- 主頁(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;
}
