页面布局效果（一）

效果图：

图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