02-西电审核--商标

商标部分由左右两部分组成，并且这两部分紧贴居中的.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;
}