头部结构
1、logo区设置宽高后（高度值与父元素相同即可），由背景图片引入，left center。
2、user区包含searchbox和nav，为user设置一个需要的高度、宽度，float：right,设置margin-top来实现居中。子元素float：left；margin-right控制间距。
2.1searchbox包含input和button，通常为做成外观一体，为searchbox设置border。
input{border：0；background：0；outline：0；}一般会为其设置text-indent:2px;
button{border：0；}
2.2usernav部分，选项间有“|”的情况 <li><a href="#">xx</a>|</li>,为<a>设置左右padding即可实现效果。
3、headtitle区，结构是包裹<div>下的<a>排列，<a>xxx</a>。
基础样式：为xx居中分开，为div设置line-height，<a>设置左右padding，margin-right值即可。
实现效果样式：鼠标划过xx时出现border-bottom有渐变样式。
伪类与伪元素知识前提：https://segmentfault.com/a/1190000000484493
::after在被选元素的内容后面插入内容，并用content属性来指定插入内容。
1 a{
2 padding:0 25px;margin-right:30px;
3 position:relative;display:inline-block;
4 }
5 a::after{
6 width:100%;height:2px;background:#1e96d5;
7 opacity:0;content:".";
8 position:absolute;top:100%;left:0;
9 transform:sacle(0.85);
10 transition:height 0.5s,opacity 0.5s,transform 0.5s;
11 }
12 /*-moz-//-webkit-//transform/transition*/
13 a:hover::after{height:3px;opacity:1;transform:scale(1);
注意点：
<a>设置display:inline-block后<a>的高度将变成父元素的line-height值。
<a>需要设置相对定位，以方便a::after绝对定位(子元素绝对定位不能撑开父元素，用a::after插入的内容绝对定位后不占a的高度)。
a::after插入内容放在<a>中，width：100%，表示继承了a的宽度。绝对定位top值为100%表示在a的bottom。content:"."；作用是撑开对象。
opacity:0;表示完全透明（以隐藏），1表示完全不透明。
transform对元素进行旋转，缩放，移动，倾斜。
属性值scale（x）通过设置轴的值来定义缩放旋转,更多属性值见http://www.w3school.com.cn/cssref/pr_transform.asp
transition用于表现简单的动画效果。
以上代码仅能实现hover时的效果。不能实现点击效果固定。可设置一个class为current，jq实现click事件removeClass与addClass。
a.current(表示class为current的a标签)::after{height:3px;opacity:1;transform:scale(1}即可。