页面布局效果（一）

效果图：

图1



效果描述：居中显示内容

图2



效果描述：鼠标移动到菜单上，菜单字体颜色变为蓝色，底边蓝色线与头部底边线对齐。

图3



效果描述：鼠标移动到管理控制台上，背景颜色变为线性渐变蓝色。文字的左边有一个icon图标，采用图标字体技术实现。

DOM结构：

<header>
<div class="common-row">
<a class="logo-link" href="#"><img class="logo" src="img/logo_white.2x_24d7ed13.png"></a>
<nav>
<ul class="header-list">
<li class="list-nav"><a href="#">产品</a></li>
<li class="list-nav"><a href="#">解决方案</a></li>
<li class="list-nav"><a href="#">云市场</a></li>
<li class="list-nav"><a href="#">合作与生态</a></li>
<li class="list-nav"><a href="#">帮助与支持</a></li>
</ul>
<ul class="login">
<li class="list-nav"><a href="#">登录</a></li>
<li class="list-nav"><a href="#">注册</a></li>
<li class="list-nav"><a href="#">备案</a></li>
<li class="list-nav"><a href="#">论坛</a></li>
<li class="list-nav console"><a href="#"><i class="icon-cog icon-console"></i>管理控制台</a></li>
</ul>
</nav>
</div>
</header>

CSS结构：

/**
* 公共样式
*/
a {
text-decoration: none;
outline: none;
color: #fff;
border: 0;
}

ul, li{
margin: 0;
padding: 0;
list-style: none;
}

img {
border: 0;
-ms-interpolation-mode: bicubic;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {
display: block;
padding: 0;
margin: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%;
vertical-align: baseline;
}

.common-row{
width: 1180px;
margin: 0 auto;
}

/**
*
* 布局样式
*/
body{
background-color: #000;
}

header{
height: 60px;
width: 100%;
min-width: 1280px;
position: absolute;
box-shadow: none;
color: #fff;
background: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: PingFangSc-light,Arial,"Microsoft YaHei UI","Microsoft Yahei","Lantinghei SC",
"Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif;
}

header .logo-link{
display: block;
}

header .logo{
float: left;
margin-top: 16px;
width: 87px;
height: 30px;
}

header nav{
height: 100%;
padding-left: 127px;
overflow: visible;
}

header nav:before, header nav:after{
display: table;
content: "";
}

header nav:after{
clear: both;
}

header nav .header-list{
float: left;
}

header nav .login{
float: right;
}

header nav .header-list .list-nav, header nav .login .list-nav{
float: left;
height: 100%;
line-height: 60px;
margin-left: 26px;
font-size: 14px;
}

header nav .header-list .list-nav > a:hover,
header nav .login .list-nav > a:hover{
color: #108CEE;
}

header nav .header-list .list-nav > a:hover:after{
display: block;
content: '';
width: 100%;
height: 3px;
padding: 0 10px;
margin-left: -10px;
margin-top: -3px;
background-image: -webkit-linear-gradient(right, #00A1FF, #0B62FF);
background-image: -moz-linear-gradient(right, #00A1FF, #0B62FF);
background-image: -moz-linear-gradient(to left, #00A1FF, #0B62FF);
background-image: -o-linear-gradient(to left, #00A1FF, #0B62FF);
background-image: linear-gradient(to left, #00A1FF, #0B62FF);
background-repeat: repeat;
}

header nav .login .list-nav.console > a{
display: block;
height: 60px;
width: 120px;
padding: 0 8px;
line-height: 60px;
text-align: center;
}

header nav .login .list-nav.console > a:hover{
opacity: 1;
background: #0b83e1;
background-image: -webkit-linear-gradient(right, #00A1FF, #0B62FF);
background-image: -moz-linear-gradient(right, #00A1FF, #0B62FF);
background-image: -moz-linear-gradient(to left, #00A1FF, #0B62FF);
background-image: -o-linear-gradient(to left, #00A1FF, #0B62FF);
background-image: linear-gradient(to left, #00A1FF, #0B62FF);
background-repeat: repeat;
color: #FFF;
}

header nav .login .list-nav.console > a .icon-console{
width: 14px;
float: left;
line-height: 60px;
margin: 0 6px 0 10px;
font-size: 14px;
display: block;
}

代码地址：https://github.com/Easy-MJ/csdn-blog-demo/tree/master/layout-demo/01