首页构成

• shortcut 快捷导航模块
• header 头部模块
• nav 导航模块
• footer 底部模块(优先做页面公共模块)

快捷导航模块

<!-- 快捷导航模块 -->
		<section class="shortcut">
			<div class="w">
				<div class="fl">
					<ul>
						<li>品优购欢迎您! &nbsp;</li>
						<li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li>
					</ul>
				</div>
				<div class="fr">
					<ul>
						<li><a href="#">我的订单</a></li>
						<li></li>
						<li class="tri-icon">我的品优购</li>
						<li></li>
						<li><a href="#">品优购会员</a></li>
						<li></li>
						<li><a href="#">企业采购</a></li>
						<li></li>
						<li class="tri-icon">关注品优购</li>
						<li></li>
						<li class="tri-icon">客户服务 </li>
						<li></li>
						<li class="tri-icon">网站导航</li>
					</ul>
				</div>
			</div>
		</section>

css代码:

/* 版心 */
.w{
	width: 1200px;
	margin: 0 auto;
}
.style_red{
	color: #c81623;
}
@font-face {
  font-family: 'icomoon';
  /* 路径变化 */
  src:  url('../fonts/icomoon.eot?nukn6v');
  src:  url('../fonts/icomoon.eot?nukn6v#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?nukn6v') format('truetype'),
    url('../fonts/icomoon.woff?nukn6v') format('woff'),
    url('../fonts/icomoon.svg?nukn6v#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 快捷导航模块 */
.fl{
	float: left;
}
.fr{
	float: right;
}
.shortcut{
	height: 31px;
	line-height: 31px;
	background-color: #f1f1f1;
	color: #666666;
	font-size: 12px;
}
.shortcut ul li{
	float: left;
	position: relative;

}
.shortcut .fr ul li:nth-child(even){
	width: 1px;
	height: 12px;
	margin: 9px 15px 0;
	background-color: #666666;
}
.tri-icon::after{
	font-family: 'icomoon';
	content: '\e901';
	margin-left: 5px;
}

头部模块

<!-- 头部header模块 -->
		<header class="header w">
			<div class="logo">
				<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
			</div&