商标部分由左右两部分组成，并且这两部分紧贴居中的.container的边缘，所以非常适合使用浮动。
<div class="branding">
<div class="container clearfix">
<div class="fl"></div>
<div class="fr"></div>
</div>
</div>
注意：使用浮动，必须清除浮动。
左部分
左部分由三部分组成：
- logo：一般logo是超链接图片。
- 分割符：一般使用边框线制作。
- 主页标题：页面大标题，通常使用
h1。
HTML
<a href="#">
< image src="img/logo.png" />
</a>
<span class="spacer"></span>
<h1 class="brand-title">本科教学审核评估网</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;
}
右部分
左部分也由三部分组成：
- 超链接
- 搜索框：就是文本输入框。
- 搜索图标：一般是定位在搜索框上的。
HTML
<div class="goto-home text-right">
<a href="#">学校主页</a>
<div>
<div class="search-area">
<input id="search-input" type="text" placeholder="输入关键字搜索"/>
<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;
}
