Project1小米商城(繁琐半成)

 

 

 

<!DOCTYPE >
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Project小米商城</title>
		<link rel="stylesheet" href="css/all.css">
		<style>
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}

			.box a{
				text-decoration: none;
			}
			
			/* 顶部样式 */
			.header-all{
				height: 40px;
				background-color:rgb(51,51,51) ;
			}
			.header{
				height: 40px;
				width: 1226px;
				margin: 0 auto;
				position: relative;
			}
			.header a{
				line-height: 40px;
				color: rgb(176,176,176);
				font-size: 12px;
			}
			.header-left li{
				float: left;
			}
			
			.header-left-interval{
				width: 1px;
				height: 15px;
				background-color: rgb(59,66,69);
				margin:12.5px 8px;
			}
			.shopping{
				float:right;
			}
			.header-right {
				float: right;
				width: 260px;
			}
			.header-right li{
				float: left;
			}
			.shopping-text{
				float: right;
			}
			.shopping a{
				display: block;
				padding:0 20px 0 15px;
				background-color: rgb(66,66,66);
			}
			.header a:not(.shopping a):hover{
				color: white;
			}
			.shopping:hover a{
				color: rgb(255,103,0);
				background-color: white;
			}
			.shopping-box{
				width: 300px;
				height: 100px;
				position: absolute;
				z-index: 999;
				text-align: center;
				right: 0px;
				top: 40px;
				font-size: 12px;
				box-shadow: 0px 20px 30px rgba(0,0,0,.1);
				color: rgb(176,176,176);
				display: none;
			}
			.shopping-box p{
				display: table-cell;
				vertical-align: middle;
			}
			.shopping:hover .shopping-box{
				display:table;
			}
			/* 顶部样式 */
			
			/* 主体样式 */
			.main{
				width: 1226px;
				margin: 0 auto;
				position: relative;
			}
			/* 主体part1样式 */
			.main-part1{
				width: 100%;
				height: 100px;
				margin: 0 auto;
				line-height: 100px;
				background-color: white;
			}
			.main-part1 a{
				font-size: 16px;
				color: rgb(51,51,51);
			}
			.main-part1-left{
				float: left;
				
			}
			.main-part1-left img{
				width: 56px;
				height: 56px;
				margin-top: 22px;
			}
			.main-part1-middle{
				float: left;
				margin-left: 178px;
			}
			.main-part1-middle li:not(.xiaomiphone-box-interval,.redmiphone-box-interval,.xiaomi-tablet-computer-box-interval){
				float: left;
				margin: 0 10px;
			}
			.main-part1-right{
				float:right;
			}
			.main-part1-middle a:hover{
				color: rgb(255,103,0);
			}
			
			.xiaomiphone-box{/* 主体part1小米手机弹盒样式 */
				height: 230px;
				background-color:white;
				position: absolute;
				display: none;
				line-height: 20px;
				left: 0px;
				border-top: 1px rgb(224,224,224) solid;
				box-shadow: 0 1px 0px rgba(0,0,0,.3);
				z-index: 999999;
			}
			.xiaomiphone-box li{
				float: left;
			}
			.xiaomiphone-box img{
				width: 150px;
				padding-top: 35px;
				padding-bottom: 20px;
				padding: 35px 10px 20px 10px;
			}
			.xiaomiphone-box p{
				text-align: center;
			}
			.xiaomiphone-box .name{
				font-size: 12px;
				color: rgb(51,51,51);
				
			}
			.xiaomiphone-box .money{
				font-size: 12px;
				color:rgb(255,103,0);
			}
			 .xiaomiphone:hover .xiaomiphone-box{
				display: block;
			}
			.xiaomiphone-box-interval{
				width: 1.5px;
				height: 100px;
				background-color:rgb(224,224,224) ;
				margin: 35px 6px 0px 6px;
				
			}/* 主体part1小米手机弹盒样式 */
			
			.redmiphone-box{/* 主体part1红米手机弹盒样式 */
				height: 230px;
				background-color:white;
				position: absolute;
				display: none;
				line-height: 20px;
				left: 0px;
				border-top: 1px rgb(224,224,224) solid;
				box-shadow: 0 1px 0px rgba(0,0,0,.3);
				z-index: 999999;
			}
			.redmiphone-box li{
				float: left;
			}
			.redmiphone-box img{
				width: 150px;
				padding-top: 35px;
				padding-bottom: 20px;
				padding: 35px 10px 20px 10px;
			}
			.redmiphone-box p{
				text-align: center;
			}
			.redmiphone-box .name{
				font-size: 12px;
				color: rgb(51,51,51);
				
			}
			.redmiphone-box .money{
				font-size: 12px;
				color:rgb(255,103,0);
			}
			 .redmiphone:hover .redmiphone-box{
				display: block;
			}
			.redmiphone-box-interval{
				width: 1.5px;
				height: 100px;
				background-color:rgb(224,224,224) ;
				margin: 35px 6px 0px 6px;
				
			}/* 主体part1红米手机弹盒样式 */
			
			.xiaomi-tablet-computer-box{/* 主体part1小米平板弹盒样式 */
				width: 1226px;
				height: 230px;
				background-color:white;
				position: absolute;
				display: none;
				line-height: 20px;
				left: 0px;
				border-top: 1px rgb(224,224,224) solid;
				box-shadow: 0 1px 0px rgba(0,0,0,.3);
				z-index: 999999;
			}
			.xiaomi-tablet-computer-box li{
				float: left;
			}
			.xiaomi-tablet-computer-box img{
				width: 150px;
				padding-top: 35px;
				padding-bottom: 20px;
				padding: 35px 10px 20px 10px;
			}
			.xiaomi-tablet-computer-box p{
				text-align: center;
			}
			.xiaomi-tablet-computer-box .name{
				font-size: 12px;
				color: rgb(51,51,51);
				
			}
			.xiaomi-tablet-computer-box .money{
				font-size: 12px;
				color:rgb(255,103,0);
			}
			 .xiaomi-tablet-computer:hover .xiaomi-tablet-computer-box{
				display: block;
			}
			.xiaomi-tablet-computer-box-interval{
				width: 1.5px;
				height: 100px;
				background-color:rgb(224,224,224) ;
				margin: 35px 6px 0px 6px;
				
			}/* 主体part1小米平板弹盒样式 */
			/* 主体part1样式 */
			
			/* 主体part2样式 */
			
			.main-part2-left{/* 主体part2左边样式 */
				width: 233.5px;
				height: 420px;
				padding: 20px 0;
				background-color: rgb(90,90,97);
				float: left;
				/* display: table; */
			}
			.main-part2-left .topic a{
				display:table-cell;
				width: 213.5px;
				height: 42px;
				padding-left:30px ;
				font-size: 16px;
				color: white;
				vertical-align: middle;
				position:relative;
				z-index: 99999;
			}
			.main-part2-left .topic i{
				float: right;
				padding-right:30px ;
			}
			.main-part2-left .topic a:not(.photo-box a):hover{
				background-color: rgb(255,103,0);
			}/* 主体part2左边样式 */
			
			/* 主体part2右边样式 */
			.main-part2-right{
				position: relative;
				width: 1226px;
				height: 460px;
				
			}
			.main-part2-right .photo{
				position: absolute;
				right: 0;
				top: 0;
			}
			.main-part2-right img{
				width: 992.5px;
				height: 460px;
				/* float: right; */
				/* position: absolute; */
			}
			.main-part2-right-photo li:nth-child(1){
				z-index: 1;
			}
			.main-part2-right-point{
				z-index: 99;
				
				position: absolute;
				bottom: 20px;
			}
			.main-part2-right .pointer{
				z-index: 9999;
				position: absolute;
				bottom: 20px;
				right: 20px;
			}
			.main-part2-right .pointer a{
				float: left;
				width:10px ;
				height: 10px;
				background-color: rgba(255,255,255,.6);
				border-radius: 50%;
				margin: 0 4px;
				background-clip: content-box;/* 将背景颜色值设置到内容区,边框和内边距不再有背景颜色 */
				border: 2px transparent solid;
			}
			.main-part2-right .pointer a.active,
			.main-part2-right .pointer a:hover{
				background-color: #fff;
				border:2px rgba(255,255,255,.6) solid ;
			}/* 主体part2右边样式 */
			
			/* 左边手机弹盒样式*/
			.phone-box{
				width:992.5px;
				height: 460px;
			}
			.phone-box li{
				float: left;
			}
			
			
			.photo-box{
				width: 972.5px;
				height: 440px;
				background-color:white;
				position: absolute;
				z-index: 99999999;
				padding: 10px;
				right:0 ;
				top:100px;
				box-shadow: 0px 1px 5px rgba(0,0,0,.3);
				display: none;
			}
			.photo-box li{
				float: left;
				width: 240px;
				height: 72px;
				margin-top:  5px;
			
			}
			.photo-box img{
				padding: 5px;
				float: left;
				
			}
			.photo-box a{
				
				color: black;
			}
			.photo-box span{
				display: block;
				padding: 20px;
				font-size: 14px;
				color: black;
			}
			.topic:hover .photo-box{
				display: block;
			}	
			.photo-box a:hover span{
				/* background-color: white; */
				color: rgb(255,137,41);
			}/* 左边手机弹盒 */
			
			/* 主体part3样式 */
			.main-part3{
			width: 1226px;
			height: 170px;
			margin-top:20px ;
			position: relative;
			/* background-color: rgb(95,87,80); */
			}
			.main-part3-left{
				width: 233.5px;
				height: 170px;
				float: left;
				background-color: rgb(95,87,80);
			}
			.main-part3-left a{
				width: 74.5px;
				height: 63px;
				float: left;
				border: 1px rgb(102,94,87) solid;
				color: rgb(165,169,161);
				text-align: center;
				font-size: 14px;
				padding-top:20px ;
				display: block;
				/* z-index: 99999; */

			}
			.main-part3-left i{
				padding-bottom: 3px;
			}
			.main-part3-left a:hover{
				color: white;
			}
			.main-part3-right{
				width: 992.5px;
				height:170px ;
				float:right ;
			}
			.main-part3-right li{
				/* width: 100px; */
				float: left;
				margin-left: 14.5px;
			}
			.main-part3-right img{
				height: 100%;
			}/* 主体part3样式 */
			/* 主体样式 */
		</style>
	</head>
	<body>
		<div class="box"><!-- 外部框架 -->
			
			<div class="header-all"><!-- 顶部总体 -->
			<div class="header"><!-- 顶部 -->
				<ul class="header-left"><!-- 顶部左边 -->
					<li class="header-left-part"><a href="javascript:;">小米商城</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">MIUI</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">loT</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">云服务</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">天星数科</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">有品</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">小爱开放平台</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">企业团购</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">资质证照</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">协议规则</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">下载app</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">智能生活</a></li>
					<li class="header-left-interval"></li>
					<li class="header-left-part"><a href="javascript:;">Select Location</a></li>
				</ul><!-- 顶部左边 -->
				<div class="header-right"><!-- 顶部右边 -->
				<ul class="header-right-part">
					<li><a href="javascript:;">登录</a></li>
					<li class="header-left-interval"></li>
					<li><a href="javascript:;">注册</a></li>
					<li class="header-left-interval"></li>
					<li><a href="javascript:;">消息通知</a></li>	
				</ul>
				<ul class="shopping">
					<li class="shopping-text"><a href="javascript:;"><i class="fas">&#xf07a;</i> 购物车 (0)</a></li>
					<li class="shopping-box"><p>购物车中还没有商品,赶紧选购吧!</p></li>
				</ul>
				</div><!-- 顶部右边 -->
			</div><!-- 顶部 -->
			</div><!-- 顶部总体 -->
		
		<div class="main"><!-- 主体部分 -->
			<div class="main-part1"><!-- 主体part1 -->
				<div class="main-part1-left"><!-- 主体part1左边部分 -->
					<a href="javasript:;"><img src="C:\Users\西哥\Desktop\likepicture\小米官网项目图片/微信图片_20211204102815.png" alt="xioami.logo"></a>
				</div><!-- 主体part1左边部分 -->
				<div class="main-part1-middle"><!-- 主体part1中间部分 -->
					<ul>
						<li class="xiaomiphone">
							<a href="javascript:;">Xiaomi手机</a>
							<div class="xiaomiphone-box"><!-- 小米手机弹盒 -->
								<ul>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Xiaomi Civy</p>
											<p class="money">2599元起</p>
										</a>
									</li>
									<li class="xiaomiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/087c52d253d9301dff7743d6bf2d0330.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Xiaomi MIX 4</p>
											<p class="money">4199元起</p>
										</a>
									</li>
									<li class="xiaomiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Xiaomi MIX FOLD</p>
											<p class="money">7199元起</p>
										</a>
									</li>
									<li class="xiaomiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a359e9346e3c6ee8c9d8389e3fd9458.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Xiaomi MIX Ultra</p>
											<p class="money">5499元起</p>
										</a>
									</li>
									<li class="xiaomiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1c45eadcedeb27b1cafca0359422da9.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Xiaomi 11 Pro</p>
											<p class="money">3999元起</p>
										</a>
									</li>
									<li class="xiaomiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56e3379b5422cb06e5c8a0c546445606.png?thumb=1&w=200&h=138&f=webp&q=90"/>
										<p class="name">Xiaomi 11 青春版</p>
										<p class="money">1999元起</p>
										</a>
									</li>
								</ul>
							</div><!-- 小米手机弹盒 -->
						</li>
						<li class="redmiphone">
							<a href="javascript:;">Redmi 红米</a>
							<div class="redmiphone-box"><!-- 红米手机弹盒 -->
								<ul>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e78629420a392da6fd3e34dae9fac5d.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Redmi Note 11 Pro系列</p>
											<p class="money">1799元起</p>
										</a>
									</li>
									<li class="redmiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/25149bd95f33f9814aa4c4983c0d9b71.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Redmi Note 11 5G</p>
											<p class="money">1199元起</p>
										</a>
									</li>
									<li class="redmiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a785b54d06c72ff63e64d0fa51ee02f5.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Redmi Note 11 4G</p>
											<p class="money">999元起</p>
										</a>
									</li>
									<li class="redmiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e3c5d99c28700a3c45ea65eebbea0a04.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Redmi Note 10 Pro</p>
											<p class="money">1499元起</p>
										</a>
									</li>
									<li class="redmiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88bb84ff06f0ab467b859aeed36b817a.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">Redmi Note 11 5G</p>
											<p class="money">1099元起</p>
										</a>
									</li>
									<li class="redmiphone-box-interval"></li>
									<li>
										<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/acd0f27496ccdf81ef42124c35e8bfc4.png?thumb=1&w=200&h=138&f=webp&q=90"/>
										<p class="name">K40 游戏增强版</p>
										<p class="money">1999元起</p>
										</a>
									</li>
								</ul>
							</div><!-- 红米手机弹盒 -->
						</li>
						<li><a href="javascript:;">电视</a></li>
						<li><a href="javascript:;">笔记本</a></li>
						<li class="xiaomi-tablet-computer">
							<a href="javascript:;">平板</a>
							<div class="xiaomi-tablet-computer-box"><!-- 小米平板弹盒 -->
								<ul>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/33de34a4caf2834a1828dc51203dc922.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">小米平板5</p>
											<p class="money">1999元起</p>
										</a>
									</li>
									<li class="xiaomi-tablet-computer-box-interval"></li>
									<li>
										<a href="javascript:;">
											<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aad55902a2cc64bf0306b004adb14ef7.png?thumb=1&w=200&h=138&f=webp&q=90"/>
											<p class="name">小米平板5 Pro</p>
											<p class="money">2499元起</p>
										</a>
									</li>
								</ul>
							</div><!-- 小米平板弹盒 -->
						</li>
						<li><a href="javascript:;">家电</a></li>
						<li><a href="javascript:;">路由器</a></li>
						<li><a href="javascript:;">服务</a></li>
						<li><a href="javascript:;">社区</a></li>
					</ul>
				</div><!-- 主体part1中间部分 -->
				<div class="main-part1-right"><!-- 主体part1右边部分 -->
					<form>
						<input style="width:250px;height: 50px;font-size: 14px;color: rgb(149,149,149);margin-top: 6px;" name="sourse" value=" 手机"/>
						<button style="width: 50px;height: 50px;margin:0 0 0 -6px;" submit"><i class="fas">&#xf002;</i></button>
					</form>
				</div><!-- 主体part1右边部分 -->
			</div><!-- 主体part1 -->
		
		
		<div class="main-part2"><!-- 主体part2 -->
				<ul class="main-part2-left"><!-- 主体part2左边部分 -->
					<li class="topic">
						<a href="javascript:;">手机<i class="fas">&#xf054;</i></a>
						<div class="photo-box"><!-- 手机弹盒 -->
							<ul>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a95d59ec8c9c6ae7061f314eb4901e7c.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Note 11 Pro系列</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab345272bf9894bb8269d4901344b068.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xiaomi MIX FOLD</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e5aa3cab478f5eeba1c7d4cf25cba9a.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>K40 Pro 系列</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/958d5b4cf1f6a755b97b797f4cec67ed.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>黑鲨4S</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e2c570b7cd666114a7d351a1dd10a527.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Note 11 4G</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1241b5a94ba1739e85f72d46592af0e.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xiaomi 11 Ultra</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/79e2935264bf9247aa7512e330112820.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Note 10 5G</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/947721c8bc4a4ecc3bca17237ee64dea.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi Note 9 4G</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca3caca774dc8be0a453c90d1fa58e13.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Note 11 5G</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6cf44dfe89111cb35e1a2211481ff546.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xioami 11 Pro</span>
									</a>
								</li>
								<li><a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/56bb7e2d44cef71c3afedaeae3d98927.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Note 10 Pro</span>
									</a></li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/970c6b287eb89620f5ee8e2b347f6f3d.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi Note 9 5G</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/92fdd051100722d25323e9bd188befc5.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi K40</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a51c1afa4db8e47e62fad1f6fa4a8970.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xiaomi 11</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi 9A</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/76378ce289a36fcfa29f704ba90b4155.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi Note 9 Pro</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f33903e1162959f500360a39896f2306.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xiaomi Civi</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xiaomi 10S</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Xioami 11 青春</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cadc8b00dbe3b5615bd6ab657715baf.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi 9</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2bae1f43611e80a8e4877719c76bdb.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi MIX 4</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab956ee82c24bdd83d21bc212aad3eb5.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>K40 游戏增强版</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b45cbcf2bbe244982b2e865fa5077a52.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>黑鲨 4S Pro</span>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=50&h=50&f=webp&q=90">
										<span>Redmi 8A</span>
									</a>
								</li>
							</ul>
						</div><!-- 手机弹盒 -->
					</li>
					
					<li class="topic"><a href="javascript:;">电视<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">笔记本 平板<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">家电<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">出行 穿戴<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">智能 路由器<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">电源 配件<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">健康 儿童<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">耳机 音箱<i class="fas">&#xf054;</i></a></li>
					<li class="topic"><a href="javascript:;">生活 箱包<i class="fas">&#xf054;</i></a></li>
				</ul><!-- 主体part2左边部分 -->
			<div class="main-part2-right"><!-- 主体part2右边部分 -->
				<ul class="main-part2-right-photo"><!-- 切换图片列表 -->
					<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03163750afcd9567becd616f0ec5a603.jpeg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
					<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61bef947ca0b863003b3e68336192a3a.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
					<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce57203f1618c7554d8a22f92e18446.jpg?w=2452&h=920" alt="commodity.logo"></a></li>
					<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/19f12ce5a1770c2a23188f1055258967.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
					<li class="photo"><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="commodity.logo"></a></li>
				</ul><!-- 切换图片列表 -->
				<div class="pointer"><!-- 切换点 -->
					<a class="active" href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
				</div><!-- 切换点 -->
			</div><!-- 主体part2右边部分 -->
				
		</div><!-- 主体part2 -->
		
		<div class="main-part3"><!-- 主体part3 -->
			<ul class="main-part3-left">
				<li><a href="javascript:;"><i class="fas">&#xf017;</i><br>保障服务</a></li>
				<li><a href="javascript:;"><i class="fas">&#xf0d1;</i><br>企业团购</a></li>
				<li><a href="javascript:;"><i class="fab">&#xf082;</i><br>F码通道</a></li>
				<li><a href="javascript:;"><i class="fas">&#xf012;</i><br>米粉卡</a></li>
				<li><a href="javascript:;"><i class="fas">&#xf079;</i><br>以旧换新</a></li>
				<li><a href="javascript:;"><i class="fas">&#xf10b;</i><br>话费充值</a></li>
			</ul>
			<ul class="main-part3-right">
				<li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340"/></a></li>
				<li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fce474f4024b96545959ccd45b7e50f3.jpg?w=632&h=340"/></a></li>
				<li><a href="javascript:;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340"/></a></li>
			</ul>
		</div><!-- 主体part3 -->
		
		</div><!-- 主体部分 -->
		</div><!-- 外部框架 -->
	</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值