master

分支 (1)

管理

管理

master

millet_official_website
/
小米官网.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			/*去掉ul标签里面的点*/

			ul {
				list-style-type: none;
			}
			/*第一行大div设置*/

			.site-tobar {
				width: 1349px;
				height: 40px;
				background-color: black;
			}
			/*第一行内嵌套一个div*/

			.site-tobar .site-tobar-zhong {
				width: 1226px;
				height: 40px;
				margin: 0px auto;
			}
			/*左边的li标签设置*/

			.site-tobar .site-tobar-zhong li {
				float: left;
				height: 40px;
				/*垂直居中 line-height行高,line-height和height一样高的时候即可实现垂直居中*/
				line-height: 40px;

			}
			/*字体颜色大小设置*/

			.site-tobar .site-tobar-zhong a {
				color: white;
				text-decoration: none;
				font-size: 12px;
			}
			/*第二个大div设置*/

			.header {
				width: 1349px;
				height: 100px;
			}
			/*第二个大div里面的第二内div*/

			.header .header-nei {
				width: 1226px;
				height: 100px;
				margin: 0px auto;
			}
			/*第二个内div里面的一个小div*/

			.header .header-nei img {
				float: left;
				margin: 15px 0px 30px 10px;
			}
			/*第二个内div里面的一个文字块div*/

			.header .header-nei .header-nei-zuo {
				width: 1200px;
				height: 100px;
				margin: 0px auto;
			}

			.header .header-nei .header-nei-zuo li {
				float: left;
				height: 100px;
				line-height: 100px;
			}

			.header .header-nei .header-nei-zuo a {
				color: black;
				text-decoration: none;
				font-size: 18px;
			}
			/*第三块大div设置*/

			.top3 {
				width: 1226px;
				height: 460px;
				background-color: rgb(144, 132, 151);
				margin: 0px auto;
			}

			.top3 .top3-you img {
				float: right;
				width: 992px;
				height: 460px;
			}

			.top3 .top3-zuo {
				float: left;
				width: 234px;
				height: 460px;
			}

			.top3 .top3-zuo li {
				height: 46px;
				/*垂直居中 line-height行高,line-height和height一样高的时候即可实现垂直居中*/
				line-height: 46px;
			}

			.top3 .top3-zuo li a {
				display: block;
				color: white;
				text-decoration: none;
				font-size: 15px;
			}
			/*鼠标悬停状态*/
			.top3 .top3-zuo li a:hover{
				background-color: rgb(218,190,249);
				color: rgb(126,24,222);
			}
			/*设置bootstrap组件位置*/

			.top3 .top3-zuo li a span {
				float: right;
				margin: 15px;
			}
			/*第四块大div设置*/

			.top4 {
				width: 1240px;
				height: 170px;
				margin: 14px 60px 20px 60px;
			}

			.top4 .top4-zuo {
				width: 234px;
				height: 170px;
				background-color: rgb(95, 87, 80);
			}

			.top4 .top4-zuo img {
				float: left;
				width: 76px;
				height: 82px;
			}

			.top4 .top4-zuo .top-zuo-1 img {
				margin: -190px 100px 200px 0px;
			}

			.top4 .top4-zuo .top-zuo-2 img {
				margin: -280px 100px 200px 82px;
			}

			.top4 .top4-zuo .top-zuo-3 img {
				margin: -283px 100px 200px 158px;
			}

			.top4 .top4-zuo .top-zuo-4 img {
				margin: -198px 100px 200px 0px;
			}

			.top4 .top4-zuo .top-zuo-5 img {
				margin: -283px 100px 200px 82px;
			}

			.top4 .top4-zuo .top-zuo-6 img {
				margin: -283px 100px 200px 158px;
			}

			.top4 .top4-zuo2 img {
				float: left;
				width: 316px;
				height: 170px;
				margin: 0px 10px 20px 250px;
			}

			.top4 .top4-you img {
				float: right;
				width: 316px;
				height: 170px;
				margin: 0px 0px 20px 0px;
			}

			.top4 .top4-you2 img {
				float: right;
				width: 316px;
				height: 170px;
				margin: 0px 20px 20px 10px;
			}

			.top5 {
				width: 1226px;
				height: 58px;
				margin: 0px auto;
			}

			.top5 .top5-text {
				float: left;
				width: 105px;
				height: 58px;
				margin: -178px 100px 100px 0px;
				font-size: 24px;
				line-height: 58px;
			}

			.top5 .top5-you {
				float: right;
				width: 100px;
				height: 58px;
				line-height: 58px;
				margin: -178px 0px 100px 100px;
			}

			.top6 {
				width: 1240px;
				height: 340px;
				margin: 0px auto;
				margin-bottom: 20px;
			}

			.top6 .top6-1 img {
				width: 234px;
				height: 340px;
				margin: 0px 0px 0px -340px;
			}

			.top6 .top6-2 img {
				width: 989px;
				height: 340px;
				margin: -340px 0px 100px 250px;
			}

			.top7 {
				width: 1226px;
				height: 120px;
				margin: 0px auto;
				margin-bottom: 20px;
			}

			.top8{
				width: 1226px;
				height: 58px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top8 .top8-text{
				width: 105px;
				height: 58px;
				font-size: 24px;
				line-height: 58px;
			}
			.top8 .top8-you {
				float: right;
				width: 100px;
				height: 58px;
				line-height: 58px;
				margin: -59px 0px 100px 100px;
			}
			.top9{
				width: 1240px;
				height: 614px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top9 .top9-zuo img{
				width: 248px;
				height: 614px;
			}
			.top9 .top9-you ul{
				float: right;
				width: 992px;
				height: 614px;
				margin-top: -614px;
				list-style-type: none;
			}
			.top9 .top9-you ul li{
				float: left;
				border: 1px solid white;
			}
			.top9 .top9-you ul li img{
				width: 234px;
				height: 300px;
			}
			.top10{
				width: 1226px;
				height: 120px;
				margin: 0px auto;
			}
			.top11{
				width: 1226px;
				height: 58px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top11 .top11-text{
				width: 105px;
				height: 58px;
				font-size: 24px;
				line-height: 58px;
			}
			.top12{
				width: 1250px;
				height: 624px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top12 ul li{
				float: left;
				padding: 8px;
				margin: 0px;
			}
			.top10{
				width: 1226px;
				height: 120px;
				margin: 0px auto;
			}
			.top11{
				width: 1226px;
				height: 58px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top11 .top11-text{
				width: 105px;
				height: 58px;
				font-size: 24px;
				line-height: 58px;
			}
			.top12{
				width: 1250px;
				height: 624px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top12 ul li{
				float: left;
				padding: 8px;
				margin: 0px;
			}
			.top13{
				width: 1240px;
				height: 285px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top13 ul li{
				float: left;
				padding: 5px;
				margin: 0px;
			}
			.top14{
				width: 1226px;
				height: 80px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top15{
				width: 1226px;
				height: 192px;
				margin: 0px auto;
				margin-bottom: 20px;
			}
			.top16{
				width: 1349px;
				height: 232px;
				margin: 0px auto;
			}
		</style>
	</head>

	<body>
		<div class="site-tobar">
			<div class="site-tobar-zhong">
				<ul>
					<li>
						<a href="#">小米商城 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;MIUI &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;loT &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;云服务 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;金融 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;有品 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;小爱开放平台 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;企业团购 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;资质证照 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;协议规则 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;Select Location&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;登录 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;注册 &nbsp;</a>
					</li>
					<li>
						<a href="#">&nbsp;消息通知 &nbsp;</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>&nbsp;购物车(0)
						</a>
					</li>
				</ul>
			</div>
		</div>
		</div>
		<div class="header">
			<div class="header-nei">
				<div>
					<img src="img/01.png" />
				</div>
				<div class="header-nei-zuo">
					<ul>
						<li>
							<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米手机&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;Redemi红米&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;电视&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;笔记本&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;家电&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;路由器&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;智能硬件&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;服务&nbsp;</a>
						</li>
						<li>
							<a href="#">&nbsp;社区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
						</li>
						<li>
							<img src="img/03.png" />
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="top3">
			<div class="top3-zuo">
				<ul>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机 电话卡<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电视 盒子<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;笔记本 平板<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家电 插线板<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出行 穿戴<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能 路由器<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电源 配件<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;健康 儿童<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;耳机 音箱<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
					<li>
						<a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生活 箱包<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
					</li>
				</ul>
			</div>
			<div class="top3-you">
				<a href="#"><img src="img/02.jpg" /></a>
			</div>
		</div>
		<div class="top4">
			<div class="top4-you2">
				<a href="#"><img src="img/06.png" /></a>
			</div>
			<div class="top4-you">
				<a href="#"><img src="img/05.png" /></a>
			</div>
			<div class="top4-zuo2">
				<a href="#"><img src="img/04.png" /></a>
			</div>
			<div class="top4-zuo">
				<div class="top-zuo-1">
					<a href="#"><img src="img/07.png" /></a>
				</div>
				<div class="top-zuo-2">
					<a href="#"><img src="img/08.png" /></a>
				</div>
				<div class="top-zuo-3">
					<a href="#"><img src="img/09.png" /></a>
				</div>
				<div class="top-zuo-4">
					<a href="#"><img src="img/10.png" /></a>
				</div>
				<div class="top-zuo-5">
					<a href="#"><img src="img/11.png" /></a>
				</div>
				<div class="top-zuo-6">
					<a href="#"><img src="img/12.png" /></a>
				</div>
			</div>
		</div>
		<div class="top5">
			<div class="top5-text">
				小米闪付
			</div>
			<div class="top5-you">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
			</div>
		</div>
		<div class="top6">
			<div class="top6-1">
				<img src="img/13.png" />
			</div>
			<div class="top6-2">
				<a href="#"><img src="img/14.png" /></a>
			</div>
		</div>
		<div class="top7">
			<a href="#"><img src="img/15.jpg" /></a>
		</div>
		<div class="top8">
			<div class="top8-text">
				小米手机
			</div>
			<div class="top8-you">
				<a href="#">查看全部<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
			</div>
		</div>
		<div class="top9">
			<div class="top9-zuo">
				<img src="img/16.jpg" />
			</div>
			<div class="top9-you">
				<ul>
					<li>
						<a href="#"><img src="img/17.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/18.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/19.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/20.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/21.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/22.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/23.png" /></a>
					</li>
					<li>
						<a href="#"><img src="img/24.png" /></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="top10">
			<img src="img/25.png" />
		</div>
		<div class="top11">
			<div class="top11-text">
				家电
			</div>
		</div>
		<div class="top12">
			<ul>
				<li>
					<a href="#"><img src="img/26.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/27.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/32.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/33.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/34.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/28.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/31.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/35.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/36.png" /></a>
				</li>
				<li>
					<li>
						<img src="img/30.png" />
					</li>
					<li>
						<img src="img/29.png" />
					</li>
				</li>
			</ul>
		</div>
		<!--
       		以下结构一样
        -->
		<div class="top10">
			<img src="img/37.png" />
		</div>
		<div class="top11">
			<div class="top11-text">
				智能
			</div>
		</div>
		<div class="top12">
			<ul>
				<li>
					<a href="#"><img src="img/38.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/39.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/40.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/41.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/42.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/43.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/44.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/45.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/46.png" /></a>
				</li>
				<li>
					<li>
						<img src="img/47.png" />
					</li>
					<li>
						<img src="img/48.png" />
					</li>
				</li>
			</ul>
		</div>

		<div class="top10">
			<img src="img/25.png" />
		</div>
		<div class="top11">
			<div class="top11-text">
				搭配
			</div>
		</div>
		<div class="top12">
			<ul>
				<li>
					<a href="#"><img src="img/26.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/27.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/32.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/33.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/34.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/28.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/31.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/35.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/36.png" /></a>
				</li>
				<li>
					<li>
						<img src="img/30.png" />
					</li>
					<li>
						<img src="img/29.png" />
					</li>
				</li>
			</ul>
		</div>

		<div class="top10">
			<img src="img/25.png" />
		</div>
		<div class="top11">
			<div class="top11-text">
				配件
			</div>
		</div>
		<div class="top12">
			<ul>
				<li>
					<a href="#"><img src="img/26.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/27.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/32.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/33.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/34.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/28.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/31.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/35.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/36.png" /></a>
				</li>
				<li>
					<li>
						<img src="img/30.png" />
					</li>
					<li>
						<img src="img/29.png" />
					</li>
				</li>
			</ul>
		</div>

		<div class="top10">
			<img src="img/25.png" />
		</div>
		<div class="top11">
			<div class="top11-text">
				周边
			</div>
		</div>
		<div class="top12">
			<ul>
				<li>
					<a href="#"><img src="img/26.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/27.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/32.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/33.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/34.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/28.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/31.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/35.png" /></a>
				</li>
				<li>
					<a href="#"><img src="img/36.png" /></a>
				</li>
				<li>
					<li>
						<img src="img/30.png" />
					</li>
					<li>
						<img src="img/29.png" />
					</li>
				</li>
			</ul>
		</div>

		<div class="top10">
			<img src="img/49.png" />
		</div>
		<div class="top11">
			<div class="top11-text">
				视频
			</div>
		</div>
		<div class="top13">
			<ul>
				<li>
					<img src="img/50.png" />
				</li>
				<li>
					<img src="img/51.png" />
				</li>
				<li>
					<img src="img/52.png" />
				</li>
				<li>
					<img src="img/53.png" />
				</li>
			</ul>
		</div>
		<div class="top14">
			<a href="#"><img src="img/54.png" /></a>
		</div>
		<div class="top15">
			<a href="#"><img src="img/55.png" /></a>
		</div>
		<div class="top16">
			<a href="#"><img src="img/56.png" /></a>
		</div>
	</body>
</html>