页面设计（自用）

开发技术:Html Css
开发工具:Hbuilder
项目介绍:简单的小米商城页面设计，完成了项目布局以及部分动态代码的编写

整体样式

CSS代码

* {
	text-decoration: none;
	list-style: none;
}

ul {
	padding: 0;
	margin: 0;
}

body,
html {
	padding: 0;
	margin: 0;
	height: 100%;
	/* width: 1920px; */

}

.container {
	background-color: rgb(245, 245, 245);
	height: 350%;
	margin: 0 auto;
	width: 1520px;
}

.top_ad img {
	width: 100%;
	display: block;
}

.nav {
	/* border: 1px solid gray; */
	background-color: rgb(51, 51, 51);
	height: 36px;
	padding-left: 180px;
	padding-right: 180px;
	margin-bottom: 24px;
}

.left_nav {
	float: left;
}

.left_nav li {
	/* background-color: red; */
	height: 36px;
	float: left;
	font-size: 12px;
	color: rgb(176, 164, 132);
	line-height: 36px;
}

.right_nav {
	float: right;
}

.right_nav li {
	height: 36px;
	float: right;
	font-size: 12px;
	color: rgb(176, 164, 132);
	line-height: 36px;
}

.fl {
	float: left;
}

.clear {
	clear: both;
}

.special_li {
	width: 100px;
	height: 30px;
	background-color: rgb(66, 66, 66);
	float: left;
	text-align: center;
	margin-left: 20px;
}

.special_li:hover a {
	color: orange;
}

.icon-gouwuchekong {
	font-size: 18px;

}

.nav a {
	color: rgb(176, 164, 132);
}

.nav a:hover {
	color: white;
}

.special_li a:hover {
	color: orange;
}

.special_li:hover {
	background-color: white;
	color: orange;
}

.sub_nav {
	padding-left: 180px;
	padding-right: 180px;
	position: relative;
	height: 80px;
}

.sub_nav li {
	float: left;
	padding: 26px 10px 38px 10px;

}

.sub_nav li:hover a {
	color: darkorange;
}

.icon_mi {
	float: left;
	margin-right: 120px;
}

.sub_nav_input {
	margin-left: 34px;
}

.sub_nav_input input {
	width: 290px;
	height: 60px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	margin-left: 20px;
}

.sub_nav_input input:hover {
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.sub_nav [type="submit"] {
	height: 60px;
	width: 64px;
	border-top: 0px solid rgba(0, 0, 0, 0.2);
	border-right: 0px solid rgba(0, 0, 0, 0.2);
	border-bottom: 0px solid rgba(0, 0, 0, 0.2);
	border-left: 0px solid rgba(0, 0, 0, 0.2);
	background-color: white;
	cursor: pointer;
}

.sub_nav button:hover span {
	color: white;
}

.sub_nav button:hover {

	background-color: darkorange;
}

.icon-xianxingsousuo {
	font-size: 22px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
}

.sub_nav li>a {
	color: black;
}

.sub_nav li>a:hover {
	color: darkorange;
}

.icon_mi_hid {
	position: absolute;
	display: none;
	left: 180px;
	top: 0;
}

.icon_mi:hover .icon_mi_hid {
	display: block;
}

.sub_nav_hid {
	height: 240px;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 26px;
	/* background-color: gray; */
	border-top: 1px solid gray;
	position: absolute;
	display: none;
	left: 180px;
	background-color: white;
	z-index: 6;
}

.mifhone_li:hover .sub_nav_hid {
	display: block;
}

.redmi_li:hover .sub_nav_hid {
	display: block;
}

.tv_li:hover .sub_nav_hid {
	display: block;
}

.computer_li:hover .sub_nav_hid {
	display: block;
}

.elec_li:hover .sub_nav_hid {
	display: block;
}

.router_li:hover .sub_nav_hid {
	display: block;
}

.ui_li:hover .sub_nav_hid {
	display: block;
}

/* .serve_li:hover .sub_nav_hid{
	display: block;
}
.social_li:hover .sub_nav_hid{
	display: block;
} */
.sub_nav_hid li {
	width: 14%;
	height: 177px;
	border-left: 0px solid red;
	text-align: center;
	margin-right: px;
}

.darkorange_color {
	color: darkorange;
}

.sub_nav_hid>ul div {
	font-size: 12px;
}

.menu>.menu_img img {
	width: 1160px;

}

.left_menu img {
	width: 40px;
}

.menu_img {
	position: relative;
}

.menu {
	padding-left: 180px;
	padding-right: 180px;
	position: relative;
}

.menu a {
	color: rgba(0, 0, 0, 0.3);
}

.left_menu {
	width: 250px;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 180px;
	top: 5px;
	padding-top: 17px;
	padding-bottom: 18px;
}

.left_menu>ul>li {
	height: 40px;
	width: 220px;
	line-height: 40px;
	padding-left: 30px;
	/* background-color: #000000; */
}

.left_menu ul>li>a {
	color: white;
}

.left_menu>ul>li:hover {
	background-color: rgba(255, 103, 0);

}

.left_menu>ul>li:hover .menu_hid {
	display: block;

}

/*.left_menu>ul>li:hover .menu_hid li{
	display: block;
	
} */
.fr {
	float: right;
}

.left_icon_left {
	font-weight: 600;
	margin-right: 20px;
}

.circle_left {
	border-radius: 50%;
	border: 1px solid white;
	background-color: gray;
	height: 5px;
	width: 5px;
	position: absolute;
	right: 70px;
	bottom: 30px;
}

.circle_left_mid {
	border-radius: 50%;
	border: 1px solid white;
	background-color: gray;
	height: 5px;
	width: 5px;
	position: absolute;
	right: 85px;
	bottom: 30px;
}

.circle_mid {
	border-radius: 50%;
	border: 1px solid white;
	background-color: gray;
	height: 5px;
	width: 5px;
	position: absolute;
	right: 100px;
	bottom: 30px;
}

.circle_right_mid {
	border-radius: 50%;
	border: 1px solid white;
	background-color: gray;
	height: 5px;
	width: 5px;
	position: absolute;
	right: 115px;
	bottom: 30px;
}

.circle_right {
	border-radius: 50%;
	border: 1px solid white;
	background-color: white;
	height: 5px;
	width: 5px;
	position: absolute;
	right: 130px;
	bottom: 30px;
}

.left_icon_right {
	/* background-color: rgba(0,0,0,0.3); */
	position: absolute;
	height: 65px;
	width: 45px;
	left: 250px;
	bottom: 190px;
	line-height: 65px;
	text-align: center;
}

.left_icon_right:hover {
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
}

.left_icon_right_style {
	font-size: 36px;
	font-weight: 600;

}

.right_icon_left {
	/* background-color: rgba(0,0,0,0.3); */
	position: absolute;
	height: 65px;
	width: 45px;
	right: 1px;
	bottom: 190px;
	line-height: 65px;
	text-align: center;
}

.right_icon_left:hover {
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
}

.right_icon_left_style {
	font-size: 36px;
	font-weight: 600;
}

.hot {
	padding-left: 180px;
	padding-right: 180px;
	margin-top: 15px;
	margin-bottom: 30px;
}

.hot_box {
	width: 249px;
	height: 166px;
	background-color: rgb(95, 87, 80);
}

.hot_box li {
	width: 83px;
	height: 83px;
	float: left;
	text-align: center;

}

.icon_size span {
	font-size: 30px;
}

.icon_size {
	margin-top: 10px;
	height: 73px;
}

.border_r {
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.border_b {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.hot_box a {
	color: lightgray;
}

.hot_box li:hover {
	color: white;
}

.hot img {
	height: 166px;
	width: 290px;
}

.l_img {
	margin-left: 14px;
}

.m_img {
	margin-left: 13px;
	margin-right: 13px;
}

.mid_title {
	padding-left: 180px;
	padding-right: 180px;
}

.mid_title_fontstyle {
	font-size: 30px;
	color: rgba(0, 0, 0, 0.8);
	float: left;
}

.mid_button {
	float: right;
}

.mid_button button {
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.2);
	color: rgba(0, 0, 0, 0.7);
}

.mid_button button:hover {
	color: darkorange;
}

.mid_main {
	/* padding-left: 180px;
	padding-right: 180px; */
	margin-top: 20px;
}

.mid_main li {
	width: 19%;
	float: left;
	border-right: 0px solid red;
	border-top: 1px solid green;
	text-align: center;
	padding-top: 30px;
	/* height: 300px; */
	padding-bottom: 20px;
	border-bottom: 1px solid green;
}

.margin_left10 {
	margin-left: 14px;
}

.truncation {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mid_main img {
	width: 175px;
	height: 175px;
}

.mid_main_img_local {
	margin-bottom: 20px;
}

.mid_main_wordstyle {
	color: gray;
	font-size: 13px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.red_color {
	color: red;
}

.mid_main .icon-naozhong {
	font-size: 70px;

}

.left_main_font_style {
	font-size: 20px;
	margin-top: 16px;
	margin-bottom: 16px;
}

.gray_color {
	color: gray;
}

.clock_hour {
	height: 18%;
	width: 18%;
	background-color: gray;
	line-height: 40px;
}

.clock_min {
	height: 18%;
	width: 18%;
	background-color: gray;
	line-height: 40px;
}

.clock_sec {
	height: 18%;
	width: 18%;
	background-color: gray;
	line-height: 40px;
}

.left_main_clock {
	padding-left: 19%;
	padding-right: %;
}

.left_main_clock_font {
	font-size: 20px;
	font-weight: 600;

}

.white_color {
	color: white;
}

.left_special_pad {
	padding-bottom: 100px;
}

.mid_ad {
	padding-left: 180px;
	padding-right: 180px;
	text-align: center;
	margin-top: 30px;
	padding-bottom: 30px;
}

.mid_ad img {
	width: 100%;
	height: 150px;
}

.fix_box {
	position: fixed;
	right: 0px;
	top: 90px;
	z-index: 7;
}

.fix_box li {

	width: 100px;
	background-color: white;
	text-align: center;
	border-bottom: 0px solid red;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fix_box span {
	color: gray;
	font-size: 36px;
}

.footer {
	padding-left: 180px;
	padding-right: 180px;
	margin-top: 30px;
}

.footer_help {
	width: 14%;
}

.footer_about {
	width: 14%;
}

.footer_follow {
	width: 14%;
}

.footer_offline {
	width: 14%;
}

.footer_serve {
	width: 14%;
}

.footer_spserve {
	width: 14%;
}

.footer li {
	font-size: 14px;
	margin-bottom: 6px;
}

.footer_sp_li li {
	font-size: 18px;
	margin-bottom: 26px;
}

.sp_serve_button button {
	height: 30px;
	width: 130px;
	border: 1px solid darkorange;
	color: darkorange;
	margin-top: 8px;
	margin-bottom: 10px;
	cursor: pointer;

}

.sp_serve_button button:hover {
	background-color: darkorange;
	color: white;
}

.follow_size {
	font-size: 12px;
}

.menu_hid {
	width: 920px;
	height: 425px;
	background-color: white;
	position: absolute;
	left: 250px;
	top: 0;
	padding-top: 10px;
	padding-bottom: 0px;
	display: none;

}

.menu_hid li {
	line-height: 40px;
	height: 73px;
	width: 218px;
	border-right: 0px solid red;
	padding-left: 10px;
	background: white;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.menu_hid a>div{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footer>div>ul>li>a {
	color: gray;
}

.footer>div>ul>li>a:hover {
	color: orange;
}

.main_phone {
	padding-left: 180px;
	padding-right: 180px;
	height: 560px;
}

.main_phone_s li {
	border: 0px solid blue;
	/* width: 22%; */
	height: 225px;
	text-align: center;
	background-color: white;
	margin: 0 1%;
	margin-bottom: 2.6%;

}

.main_phone_s_bottom {
	margin-bottom: 1%;
}

.main_phone_s {
	height: 490px;
	width: 957px;

	border: 0px solid red;
}

.main_phone_s li img {
	width: 140px;
	height: 140px;
}

.main_phone_b {


	border-top: 0px solid rgb(245, 245, 245);
}

.main_phone_b>a>img:hover {}

.main_phone_s li:hover {}

.black_color {
	color: #000000;
}

.main_phone_s a {
	color: black;
}

.mid_main>ul>a {
	color: #000000;
}

.fix_box>ul>li:hover span {
	color: orange;
}

.fix_box>ul>li span {
	cursor: default;
}

.fix_box>ul>li {
	cursor: default;
}

.test {
	/* padding-top: 5px; */
	padding-bottom: 16px;
	background-color: rgb(245, 245, 245);
	/* background-color: #0000FF; */
	height: 235px;
	width: 220px;
}

.test:hover {
	padding-bottom: 0px;
	padding-top: 16px;
}

.test:hover {
	box-shadow: black 0px 10px 10px;
}

Html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./font_u24jc7y3ptl/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/小米官网.css" />
	</head>
	<body>
		<div name="top" class="fix_box">
			<ul>
				<li><a href="">
						<div><span class="iconfont icon-xianxingshouji"></span></div><span class="gray_color" style="font-size: 16px;">手机App</span>
					</a></li>
				<li><a href="">
						<div><span class="iconfont icon-xianxinggeren"></span></div><span class="gray_color" style="font-size: 16px;">个人中心</span>
					</a></li>
				<li><a href="">
						<div><span class="iconfont icon-xianxingshezhi"></span></div><span class="gray_color" style="font-size: 16px;">售后服务</span>
					</a></li>
				<li><a href="">
						<div><span class="iconfont icon-receive_full"></span></div><span class="gray_color" style="font-size: 16px;">人工客服</span>
					</a></li>
				<li><a href="">
						<div><span class="iconfont icon-gouwuchekong"></span></div><span class="gray_color" style="font-size: 16px;">购物车</span>
					</a></li>
				<li style="margin-top: 24px;"><a href="#top">
						<div><span class="iconfont icon-xianxingxiangshang"></span></div><span class="gray_color" style="font-size: 16px;">返回顶部</span>
					</a></li>
			</ul>
		</div>
		<div class="container">
			<div class="top_ad"><img src="./img/米金广告.png" alt=""></div>
			<div class="nav">
				<div class="left_nav">
					<ul>
						<li><a href="">小米商城</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">MIUI</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">loT</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">云服务</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">天星数科</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">有品</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">小爱开放平台</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">企业团购</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">资质证照</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">协议规则</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">下载</a>app&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">智能生活</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">Select Location</a></li>
					</ul>
				</div>
				<div class="right_nav">
					<ul>
						<li class="special_li "><a href=""><span class="iconfont icon-gouwuchekong">&nbsp;</span>购物车(0)</a></li>
						<li><a href="">消息通知</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">注册</a>&nbsp;</li>
						<li>|&nbsp;</li>
						<li><a href="">登录</a>&nbsp;</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<div class="sub_nav">
				<div><a href="">
						<div class="icon_mi"><img src="img/mi_icon.png">
							<div class="icon_mi_hid"><img src="./img/mi_icon2.png" alt=""></div>
						</div>
					</a></div>

				<div class="fl">
					<ul>
						<li class="mifhone_li"><a href="">小米手机</a>

							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">小米11</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone2.png" alt=""></div>
											<div class="black_color">小米10至尊纪念版</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone3.png" alt=""></div>
											<div class="black_color">小米10</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone4.png" alt=""></div>
											<div class="black_color">小米10青春版5G</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone5.png" alt=""></div>
											<div class="black_color">小米MIX Alpha</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
									<a href="">
										<li>
											<div></div>
											<div></div>
											<div class="darkorange_color"></div>
										</li>
									</a>
								</ul>
							</div>
						</li>
						<li class="redmi_li"><a href="">Redmi 红米</a>
							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/red1.png" alt=""></div>
											<div class="black_color">Redmi Note 9系列</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/red2.png" alt=""></div>
											<div class="black_color">Redmi K30S 至尊纪念版</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/red3.png" alt=""></div>
											<div class="black_color">Redmi K30至尊纪念版</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/red4.png" alt=""></div>
											<div class="black_color">Redmi 9A</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/red5.png" alt=""></div>
											<div class="black_color">Redmi K30 系列</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/red6.png" alt=""></div>
											<div class="black_color">Redmi 10X</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
								</ul>
							</div>
						</li>
						<li class="tv_li"><a href="">电视</a>
							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/ds1.jpg" alt=""></div>
											<div class="black_color">小米电视大师 82英寸至尊纪念版</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/ds2.jpg" alt=""></div>
											<div class="black_color">小米电视大师 82英寸</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/ds3.jpg" alt=""></div>
											<div class="black_color">小米透明电视</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/ds4.jpg" alt=""></div>
											<div class="black_color">小米电视大师 65英寸OLED</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/ds5.jpg" alt=""></div>
											<div class="black_color">小米MIX Alpha</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/ds6.jpg" alt=""></div>
											<div class="black_color">小米MIX Alpha</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
								</ul>
							</div>
						</li>
						<li class="computer_li"><a href="">笔记本</a>
							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi G 游戏本</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">RedmiBook 16</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">RedmiBook 14 II</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Pro 15.6 2020款</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">RedmiBook Air 13</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">显示器</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
								</ul>
							</div>
						</li>
						<li class="elec_li"><a href="">家电</a>
							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">米价互联网空调C1</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">米价互联网空调</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi全自动波轮洗衣机1A</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">米家互联网洗烘一体机10KG</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">米家风冷对开门冰箱 483L</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">米家两门冰箱 160L</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
								</ul>
							</div>
						</li>
						<li class="router_li"><a href="">路由器</a>
							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">小米路由器AX6000</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi路由器 AX6</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi路由器 AX5</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">小米路由器AX1800</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">小米路由器AX3600</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi路由器AC2100</div>
											<div class="darkorange_color">19999元</div>
										</li>
									</a>
								</ul>
							</div>
						</li>
						<li class="ui_li"><a href="">智能硬件</a>
							<div class="sub_nav_hid">
								<ul>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">小米全自动智能门锁</div>
											<div class="darkorange_color">3999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi小爱触屏音箱Pro8</div>
											<div class="darkorange_color">5299元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">小米小爱触屏音箱</div>
											<div class="darkorange_color">3799元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">Redmi小爱音箱 Play</div>
											<div class="darkorange_color">1999元起</div>
										</li>
									</a>
									<a href="">
										<li>
											<div><img width="100%" src="./img/mi_phone.png" alt=""></div>
											<div class="black_color">查看全部</div>
											<div class="black_color">智能硬件</div>
										</li>
									</a>

								</ul>
							</div>
						</li>
						<li class="serve_li"><a href="">服务</a>

						</li>
						<li class="social_li"><a href="">社区</a>

						</li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="fl sub_nav_input" style="position: relative; outline: orange;"><input type="text" placeholder="&nbsp;&nbsp;Redmi 10X 5G" />
					<div style="position: absolute;right: 2px;top: 2px;"><a href=""><button type="submit"><span class="iconfont icon-xianxingsousuo"></span></button></a></div>
				</div>
			</div>
			<div class="menu">
				<div class="menu_img"><img src="img/mi.jpg">
					<div class="circle_left"></div>
					<div class="circle_left_mid"></div>
					<div class="circle_mid"></div>
					<div class="circle_right_mid"></div>
					<div class="circle_right"></div>
					<a href="">
						<div class="left_icon_right"><span class="left_icon_right_style iconfont icon-xianxingxiangzuo"></span></div>
					</a>
					<a href="">
						<div class="right_icon_left"><span class="right_icon_left_style iconfont icon-xianxingxiangyou"></span></div>
					</a>
				</div>
				<div class="left_menu">
					<ul>
						<li><a href="">手机 电话卡<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">
								<ul class="fl">

									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-1-1.jpg" alt=""></div>
											<div>小米11sgseeessssssssssssseeeeessssssss</div>
										</a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-1-2.jpg" alt=""></div>
											<div>小米10至尊纪念版</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-1-3.jpg" alt=""></div>
											<div class="fl">小米10</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-1-4.jpg" alt=""></div>
											<div class="fl">小米10青春版</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-1-5.jpg" alt=""></div>
											<div class="fl">Redmi K30S 至尊纪念版</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-1-6.jpg" alt=""></div>
											<div class="fl">小米云服务</div></a>
									</li>

								</ul>
								<ul class="fl">

									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-2-1.jpg" alt=""></div>
											<div class="fl">Redmi K30 Pro 变焦版</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-2-2.jpg" alt=""></div>
											<div class="fl">Redmi K30 5G</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-2-3.jpg" alt=""></div>
											<div class="fl">Redmi K30 至尊纪念版</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-2-4.jpg" alt=""></div>
											<div class="fl">Redmi 10X Pro</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-2-5.jpg" alt=""></div>
											<div class="fl">Redmi 10X 5G</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-2-6.jpg" alt=""></div>
											<div class="fl">Redmi 10X 4G</div></a>
									</li>

								</ul>
								<ul class="fl">

									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-3-1.jpg" alt=""></div>
											<div class="fl">Redmi Note 9 Pro</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-3-2.jpg" alt=""></div>
											<div class="fl">Redmi Note 9 5G</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-3-3.jpg" alt=""></div>
											<div class="fl">Redmi Note 9 4G</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-3-4.jpg" alt=""></div>
											<div class="fl">Redmi Note 8 Pro</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-3-5.jpg" alt=""></div>
											<div class="fl">Redmi Note 8</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-3-6.jpg" alt=""></div>
											<div class="fl">手机上门维修</div></a>
									</li>

								</ul>
								<ul class="fl">

									<li>
										<a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-4-1.jpg" alt=""></div>
											<div class="fl">Redmi 9</div>
											</a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-4-2.jpg" alt=""></div>
											<div class="fl">Redmi 9A</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-4-3.jpg" alt=""></div>
											<div class="fl">Redmi 8</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-4-4.jpg" alt=""></div>
											<div class="fl">Redmi 8A</div></a>
									</li>


									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-4-5.jpg" alt=""></div>
											<div class="fl">腾讯黑鲨游戏手机</div></a>
									</li>
									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/1-4-5.jpg" alt=""></div>
											<div class="fl">腾讯黑鲨游戏手机</div></a>
									</li>



								</ul>

							</div>
						</li>
						<li><a href="">电视 盒子<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">
								<ul class="fl">

									<li><a href="" style="color: #000000;display: inline-block;height: 100%;width: 100%;">
											<div class="fl"><img src="./img/2-1-1.webp" alt=""></div>
											<div>小米透明电视</div></a>
									</li>

									<a href="">
										<li>
											<div class="fl"><img src="./img/2-1-2.webp" alt=""></div>
											<div>小米电视5 PRO 55英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-1-3.webp" alt=""></div>
											<div class="fl">小米电视5 65英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-1-4.webp" alt=""></div>
											<div class="fl">Redmi 智能电视 A系列</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-1-5.webp" alt=""></div>
											<div class="fl">量子点电视</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-1-6.webp" alt=""></div>
											<div class="fl">Redmi智能电视X系列</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-2-1.webp" alt=""></div>
											<div class="fl">小米电视大师 82英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-2-2.webp" alt=""></div>
											<div class="fl">小米电视5 Pro65英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-2-3.webp" alt=""></div>
											<div class="fl">小米电视5 55英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-2-4.webp" alt=""></div>
											<div class="fl">小米全面屏电视E43K</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-2-5.webp" alt=""></div>
											<div class="fl">金属全面屏电视</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-2-6.jpg" alt=""></div>
											<div class="fl">小米盒子</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-3-1.webp" alt=""></div>
											<div class="fl">大师电视</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-3-2.webp" alt=""></div>
											<div class="fl">小米电视5 Pro 75英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-3-3.webp" alt=""></div>
											<div class="fl">小米电视4A 60英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-3-4.webp" alt=""></div>
											<div class="fl">Redmi智能电视 X55</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-3-5.jpg" alt=""></div>
											<div class="fl">小米全面屏电视</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-3-6.webp" alt=""></div>
											<div class="fl">电视音箱</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-4-1.webp" alt=""></div>
											<div class="fl">Redmi智能电视 MAX</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-4-2.webp" alt=""></div>
											<div class="fl">小米电视5 75英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-4-3.webp" alt=""></div>
											<div class="fl">小米电视4A 70英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-4-4.webp" alt=""></div>
											<div class="fl">小米电视4S 75英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-4-5.jpg" alt=""></div>
											<div class="fl">小米壁画电视</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-4-6.webp" alt=""></div>
											<div class="fl">激光投影电视</div>
										</li>
									</a>
								</ul>

							</div>
						</li>
						<li><a href="">笔记本 显示器<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">
								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-1-1.jpg" alt=""></div>
											<div>Redmi G游戏本</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-1-2.jpg" alt=""></div>
											<div>RedmiBook Air 13</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-1-3.jpg" alt=""></div>
											<div class="fl">RedmiBook 16</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-1-4.jpg" alt=""></div>
											<div class="fl">RedmiBook 14</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-1-5.jpg" alt=""></div>
											<div class="fl">小米笔记本Pro 15.6</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-1-6.jpg" alt=""></div>
											<div class="fl">RedmiBook13</div>
										</li>
									</a>
								</ul>



								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-2-1.jpg" alt=""></div>
											<div class="fl">小米笔记本 Air 13.3</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-2-2.jpg" alt=""></div>
											<div class="fl">小米笔记本 Air 12.5</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-2-3.jpg" alt=""></div>
											<div class="fl">小米游戏本</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-2-4.jpg" alt=""></div>
											<div class="fl">小米显示器34英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-2-5.jpg" alt=""></div>
											<div class="fl">小米显示器27英寸</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-2-6.jpg" alt=""></div>
											<div class="fl">Redmi显示器23.8英寸</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-1.jpg" alt=""></div>
											<div class="fl">键鼠套装</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-2.jpg" alt=""></div>
											<div class="fl">鼠标</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-3.jpg" alt=""></div>
											<div class="fl">转接器</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
						<li><a href="">家电 插线板<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">
								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-1.jpg" alt=""></div>
											<div>冰箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-2.jpg" alt=""></div>
											<div>立式空调</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-3.jpg" alt=""></div>
											<div class="fl">壁挂空调</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-4.jpg" alt=""></div>
											<div class="fl">滚筒洗衣机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-5.jpg" alt=""></div>
											<div class="fl">Redmi全自动波轮洗衣机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-3-6.jpg" alt=""></div>
											<div class="fl">净水器</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-4-1.jpg" alt=""></div>
											<div class="fl">微波炉</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-4-2.jpg" alt=""></div>
											<div class="fl">电烤箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-4-3.jpg" alt=""></div>
											<div class="fl">扫地机器人</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-4-4.jpg" alt=""></div>
											<div class="fl">吸尘器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-4-5.jpg" alt=""></div>
											<div class="fl">空气净化器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./img/1-4-6.jpg" alt=""></div>
											<div class="fl">电饭煲</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./img/2-1-1.webp" alt=""></div>
											<div class="fl">电磁炉</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">电水壶</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">滤水壶</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">落地风扇</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">投影仪</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">灯具</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">插线板</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">新风机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">电暖气</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">电压力锅</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">料理机</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
						<li><a href="">出行 穿戴<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">
								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone.jpg" alt=""></div>
											<div>Redmi 手表</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone.jpg" alt=""></div>
											<div>手环5NFC</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone.jpg" alt=""></div>
											<div class="fl">手环5</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone.jpg" alt=""></div>
											<div class="fl">小米手表</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone.jpg" alt=""></div>
											<div class="fl">VR</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone.jpg" alt=""></div>
											<div class="fl">平衡车</div>
										</li>
									</a>
								</ul>



								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">自行车</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">滑板车</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">车载充电器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">平衡车配件</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">智能后视镜</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">智能记录仪</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">无线车充</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">充气宝</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">石英表</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
						<li><a href="">智能 路由器<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">


								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">打印机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">喷墨打印机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">喷墨打印机墨水</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小米路由器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">智能家庭</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">对讲机</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">摄像机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">照相机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">智能门锁</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">视频门铃</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">小爱老师</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">Redmi路由器</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">小爱音箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">云服务空间年卡</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">云服务空间月卡</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
						<li><a href="">电源 配件<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">


								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">移动电源</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">数据线</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">车充</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">充电器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">电池</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">自拍杆</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">手机壳</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">手机贴膜</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">无线充电器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">平板配件</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">黑纱配件</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">其他配件</div>
										</li>
									</a>
								</ul>

							</div>
						</li>
						<li><a href="">健康 儿童<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">


								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">洗手机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">剃须刀</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">修剪器</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">牙刷</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">吹风机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">体重秤</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">体脂秤</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">早教启智</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">益智积木</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">儿童手表</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">儿童滑板车</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">婴儿推车</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">儿童书包</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">健身车</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">走步机</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
						<li><a href="">耳机 音箱<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">


								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小爱音箱 Art 电池版</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小爱触屏音箱Pro 8</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">Redmi小爱触屏音箱8</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小爱音箱 Pro</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小米小爱音箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小米小爱音箱 Play</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">小米小爱触屏音箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">Redmi音箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">线控耳机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">蓝牙耳机</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">头戴耳机</div>
										</li>
									</a>
									<a href=""><a href="">
											<li>
												<div class="fl"><img src="./phone2.jpg" alt=""></div>
												<div class="fl">品牌耳机</div>
											</li>
										</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">蓝牙音箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">小米AI音箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">小米小爱音箱HD</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">k歌耳机</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
						<li><a href="">生活 箱包<span class="left_icon_left iconfont icon-xianxingxiangyou fr"></span></a>
							<div class="menu_hid" style="line-height: 20px;">


								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">小背包</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">双肩包</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">胸包</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">旅行箱</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">运动鞋</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone1.jpg" alt=""></div>
											<div class="fl">眼镜</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">床垫</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">枕头</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">饰品</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">螺丝刀</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">保温杯</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone2.jpg" alt=""></div>
											<div class="fl">驱蚊器</div>
										</li>
									</a>
								</ul>

								<ul class="fl">
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">毛巾/浴巾</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">米兔</div>
										</li>
									</a>
									<a href="">
										<li>
											<div class="fl"><img src="./phone3.jpg" alt=""></div>
											<div class="fl">笔</div>
										</li>
									</a>

								</ul>

							</div>
						</li>
					</ul>
				</div>
				<div class="clear"></div>


			</div>
			<div class="hot">
				<div class="fl hot_box">
					<ul>
						<a href="">
							<li>
								<div class="icon_size border_r border_b"><span class="iconfont icon-naozhong"></span>
									<div>小米秒杀</div>
								</div>
							</li>
						</a>
						<a href="">
							<li>
								<div class="icon_size border_r border_b"><span class="iconfont icon-keep_full"></span>
									<div>企业团购</div>
								</div>
							</li>
						</a>
						<a href="">
							<li>
								<div class="icon_size border_b"><span class="iconfont icon-facebook_full"></span>
									<div>F码通道</div>
								</div>
							</li>
						</a>
						<a href="">
							<li>
								<div class="icon_size border_r"><span class="iconfont icon-xianxingdinggou"></span>
									<div>米粉卡</div>
								</div>
							</li>
						</a>
						<a href="">
							<li>
								<div class="icon_size border_r"><span class="iconfont icon-shuaxin"></span>
									<div>以旧换新</div>
								</div>
							</li>
						</a>
						<a href="">
							<li>
								<div class="icon_size"><span class="iconfont icon-receive_full"></span>
									<div>话费充值</div>
								</div>
							</li>
						</a>
					</ul>
				</div>
				<div class="fl l_img"><a href=""><img src="./img/hot1.png" alt=""></a></div>
				<div class="fl m_img"><a href=""><img src="./img/hot2.png" alt=""></a></div>
				<div class="fl"><a href=""><img src="./img/hot3.png" alt=""></a></div>
				<div class="clear"></div>
			</div>
			<div class="mid_title">
				<div class="mid_title_fontstyle"><span>小米秒杀</span></div>
				<div class="mid_button">
					<div><a href=""><button type="button"><span class="iconfont icon-xianxingxiangzuo"></span></button></a><a href=""><button
							 type="button"><span class="iconfont icon-xianxingxiangyou"></span></button></a></div>
				</div>
				<div class="clear"></div>
				<div class="mid_main">
					<ul>
						<li class="left_special_pad">
							<div class="red_color left_main_font_style"><span>00:00 场</span></div>
							<div class="red_color"><span class="iconfont icon-naozhong"></span></div>
							<div class="left_main_font_style gray_color">距离结束还有</div>

							<div class="left_main_clock">
								<div class="fl clock_hour left_main_clock_font white_color">01</div>
								<div class="fl left_main_clock_font">&nbsp;:&nbsp;</div>
								<div class="fl clock_min left_main_clock_font white_color">02</div>
								<div class="fl left_main_clock_font">&nbsp;:&nbsp;</div>
								<div class="fl clock_sec left_main_clock_font white_color">21</div>
							</div>
							<div class="clear"></div>
							<div style="height: 45px;"></div>
						</li>
						<a href="">
							<li class="margin_left10">
								<div class="mid_main_img_local"><img src="./img/mi_ms1.png" alt=""></div>
								<div class="truncation">米色儿童学习手表4 粉色</div>
								<div class="truncation mid_main_wordstyle">8天超长待机,AI双摄高清视频通话</div>
								<div><span class="darkorange_color">799元</span><del style="text-decoration: line-through;color: gray;">899元</del></div>
							</li>
						</a>
						<a href="">
							<li class="margin_left10">
								<div class="mid_main_img_local"><img src="./img/mi_ms2.png" alt=""></div>
								<div class="truncation">九号平衡车 Plus 白色</div>
								<div class="truncation mid_main_wordstyle">一个形影不离的新伙伴</div>
								<div><span class="darkorange_color">2999元</span><del style="text-decoration: line-through;color: gray;">3499元</del></div>
							</li>
						</a>
						<a href="">
							<li class="margin_left10">
								<div class="mid_main_img_local"><img src="./img/mi_ms3.png" alt=""></div>
								<div class="truncation">米家滚筒洗烘一体机1A 8kg 简单</div>
								<div class="truncation mid_main_wordstyle">智能烘干，即洗即吹</div>
								<div><span class="darkorange_color">1599元</span><del style="text-decoration: line-through;color: gray;">1999元</del></div>
							</li>
						</a>
						<a href="">
							<li class="margin_left10">
								<div class="mid_main_img_local"><img src="./img/mi_ms4.png" alt=""></div>
								<div class="truncation">RedmiBook Air 13 i5/16G/510</div>
								<div class="truncation mid_main_wordstyle">轻盈便携|轻松办公</div>
								<div><span class="darkorange_color">4799元</span><del style="text-decoration: line-through;color: gray;">5199元</del></div>
							</li>
						</a>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
			<a href="">
				<div class="mid_ad"><img src="./img/advertise.png" alt="" /></div>
			</a>
			<div class="main_phone">
				<div>
					<div class="fl" style="font-size: 24px;color: gray;">手机</div>
					<div class="fr"><a href="" style="color: #000000;"><span>查看全部</span><span>></span></a></div>
				</div>
				<div class="clear"></div>
				<div style="height: 20px;"></div>
				<div class="fl main_phone_b">
					<a href=""><img style="width: 200px;height: 476px;margin-right: 2px;" src="./img/sj1.webp" alt=""></a>
				</div>
				<div class="fl main_phone_s">
					<div class="clear"></div>
					<ul>
						<a href="">
							<div class="test fl">
								<li>

									<img src="./img/sj2.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>

								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj3.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj4.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj5.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj6.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj7.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj8.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
						<a href="">
							<div class="test fl">
								<li><img src="./img/sj9.webp" alt="">
									<div>小米11</div>
									<div>晓龙888|2K四曲面屏</div>
									<div class="darkorange_color">3999元起</div>
								</li>
							</div>
						</a>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
			<div class="footer">
				<div class="footer_help fl">
					<ul>
						<div class="footer_sp_li">
							<li>帮助中心</li>
						</div>
						<li class="gray_color"><a href="">账户管理</a></li>
						<li class="gray_color"><a href="">购物指南</a></li>
						<li class="gray_color"><a href="">订单操作</a></li>
					</ul>
				</div>
				<div class="footer_serve fl">
					<ul>
						<div class="footer_sp_li">
							<li>服务支持</li>
						</div>
						<li class="gray_color"><a href="">售后政策</a></li>
						<li class="gray_color"><a href="">自助服务</a></li>
						<li class="gray_color"><a href="">相关下载</a></li>
					</ul>
				</div>
				<div class="footer_offline fl">
					<ul>
						<div class="footer_sp_li">
							<li>线下门店</li>
						</div>
						<li class="gray_color"><a href="">小米之家</a></li>
						<li class="gray_color"><a href="">服务网点</a></li>
						<li class="gray_color"><a href="">授权体验店</a></li>
					</ul>
				</div>
				<div class="footer_about fl">
					<ul>
						<div class="footer_sp_li">
							<li>关于小米</li>
						</div>
						<li class="gray_color"><a href="">了解小米</a></li>
						<li class="gray_color"><a href="">加入小米</a></li>
						<li class="gray_color"><a href="">投资者关系</a></li>
						<li class="gray_color"><a href="">企业社会责任</a></li>
						<li class="gray_color"><a href="">廉洁举报</a></li>
					</ul>
				</div>
				<div class="footer_follow fl">
					<ul>
						<div class="footer_sp_li">
							<li>关注我们</li>
						</div>
						<li class="gray_color"><a href="">新浪微博</a></li>
						<li class="gray_color"><a href="">官方微信</a></li>
						<li class="gray_color"><a href="">联系我们</a></li>
						<li class="gray_color"><a href="">公益基金会</a></li>
					</ul>
				</div>
				<div class="footer_spserve fl">
					<ul>
						<div class="footer_sp_li">
							<li>特色服务</li>
						</div>
						<li class="gray_color"><a href="">F码通道</a></li>
						<li class="gray_color"><a href="">礼物码</a></li>
						<li class="gray_color"><a href="">防伪查询</a></li>
					</ul>
				</div>
				<div align="center">
					<div class="darkorange_color" style="font-size: 22px;">400-100-5678</div>
					<div class="gray_color" style="font-size: 13px;">8:00-18:00 (仅收市话费)</div>
					<div class="sp_serve_button"><button type="button">人工客服</button></div>
					<div class="follow_size">关注小米</div>
				</div>
			</div>
		</div>
	</body>
</html>