小米官网页头导航
<!DOCTYPE html><!-- html5文档声明 -->
<html> <!-- 输入语言类型 -->
<head><!-- 头部信息 -->
<meta charset="UTF-8"> <!-- 万国字符集 -->
<title>小米商城</title><!-- 浏览器窗口标签标题 -->
<link rel="shoutcut icon" type="image/x-icon" href="">
<style>/*css样式*/
*{margin: 0px;padding: 0px;} /*body页面边距清零*/
li{list-style: none;}/*无序列表样式去除*/
a{text-decoration: none;cursor: pointer;color: white;}/*a标签下划线样式去除，hover链接光标为手势指针*/
a:hover{text-decoration: underline;color: red;}
.clear{clear: both;}/*清除浮动*/
/*头部样式*/
.header{width: 100%;height: 40px;margin: 0px auto;background: #2F3E45;}
.menu{width: 1226px;height: 40px;margin: 0px auto;}
.menu_left li{float: left;line-height: 40px;margin:0px 3px;}
.menu_right {line-height: 40px;}
.menu_right li{float: right;right: 10px;margin: 0px 3px;}
.gouwuche div{width: 200px;height: 80px;background: white; position: absolute;right: 0px;display: none;}
.gouwuche:hover div{display: block;}
.gouwuche:hover a{color: orange;background: white;}
.gouwuche:hover{background: white;}
/*底部样式*/
.footer{width: 1226px;height: 100px;margin: 10px auto;background: #2E2E2E;color: #A5A0A0;}
/*主体部分*/
.content{width: 1000px;margin: 10px auto; background:#F6F6F6; }
.navigation{background: #DCE2F3;height: 40px;margin: 0px auto;} /*导航*/
.sub01{background: #ccc;height: 500px;margin: 10px auto;}
.sub01_01{background: #ccc;width: 246px;height: 480px;}
.sub02{background: #ccc;height: 180px;margin: 10px auto;}
.sub03{background: #ccc;height: 280px;margin: 10px auto;}
.sub04{background: #ccc;height: 120px;margin: 0px auto;}
.sub05{background: #ccc;height: 70px;margin: 10px auto;}
.sub06{background: #ccc;height: 500px;margin: 10px auto;}
</style>
</head>
<body>
<!-- 头部-->
<div>
<div>
<ul>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">IOT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">金融</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">小爱开放平台</a></li>
<li><a href="#">政企服务</a></li>
<li><a href="#">资质证照</a></li>
<li><a href="#">协仪规则</a></li>
<li><a href="#">下载app</a></li>
</ul>
<ul>
<li style="margin:0px 10px;position:relative;width:120px;height:40px;text-align:center;color:black;"><a href="#">购物车</a>
<div>购物车中还没有商品，赶紧选购吧！</div>
</li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">消息</a></li>
</ul>
</div>
</div>
<!-- 主体 -->
<div>
<div>
<div>
</div>
<div>
<div></div>
</div>
<div></div>
<div></div>
<div style="background:url(https://i1.mifile.cn/a4/xmad_15471302447392_lWdEk.jpg)"></div>
<div></div>
<div></div>
<div style="background:url(https://i1.mifile.cn/a4/xmad_15468275542298_hFEMq.jpg)"></div>
<div></div>
<div></div>
<div style="background:url(https://i1.mifile.cn/a4/xmad_15439756480639_IhxpV.jpg)"></div>
<div></div>
<div></div>
<div style="background:url(https://i1.mifile.cn/a4/xmad_15472200003038_GJvus.jpg)"></div>
</div>
</div>
<!-- 底部 -->
<div>
<div>底部</div>
</div>
</body>
</html>
