魅族官网html+css（纯手敲代码）

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量174 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65862926/article/details/133145814
版权

HTML部分

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	
</head>
<body>
	<!-- background -->
	<div class="background">
		
		<div class="bgc">
			
			<!-- nav -->
			<div class="nav">
				<!-- logo -->
				<div class="nav-logo"></div>
				<!-- shopping car -->
				<div class="car">
					<em>0</em>
					<div class="car-content">
						<span></span>
						<div class="car-icon"></div>
						<div class="car-text"></div>
							登录后可显示<br>
							您账号中已加入的商品哦~
					</div>
				</div>
				<!-- user -->
				<div class="user">
					<div class="user-content">
						<span></span>
						<ul>
							<li>立即登录</li>
							<li>立即注册</li>
							<li>我的订单</li>
							<li>M码通道</li>
						</ul>
					</div>
				</div>
				<!-- 搜索 -->
				<div class="search">
					<input type="text" name="" placeholder="魅族20">
					<i></i>
				</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-1">手机</div>
				<div class="sj-hover">
					<ul>
						<li>
							<img src="img/3.jpg">
							<p>魅族 20<br>￥2999</p>
						</li>
						<li>
							<img src="img/4.jpg">
							<p>魅族 20 PRO<br>￥3999</p>
						</li>
						<li>
							<img src="img/5.jpg">
							<p>魅族 20 INFINITY 无界版<br>￥6299</p>
						</li>					
					</ul>
				</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-2">PANDAER</div>
				<div class="sj-hover-2">
					<ul>
						<li>
							<img src="img/6.jpg">
							<p>夏日限定 妙磁抗菌壳<br>￥99</p>
						</li>
						<li>
							<img src="img/7.jpg">
							<p>Air 真无线蓝牙耳机<br>￥149</p>
						</li>
						<li>
							<img src="img/8.jpg">
							<p>PASA 超触感键帽<br>￥329</p>
						</li>
						<li>
							<img src="img/9.jpg">
							<p>宇宙之树 妙磁抗菌壳<br>￥139</p>
						</li>
						<li>
							<img src="img/10.jpg">
							<p>PASA 妙磁抗菌壳<br>￥139</p>
						</li>
						<li>
							<img src="img/11.jpg">
							<p>iPhone 夏日限定 抗摔壳<br>￥159</p>
						</li>
						<li>
							<img src="img/12.jpg">
							<p>重磅 肤感 T 恤<br>￥169</p>
						</li>
						<li>
							<img src="img/13.jpg">
							<p>PASA 航宇之星 邮差包<br>￥339</p>
						</li>					
					</ul>
				</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-3">lipro</div>
				<div class="sj-hover-3">
					<ul>
						<li>
							<img src="img/14.jpg">
							<p>学习护眼台灯<br>￥1799</p>
						</li>
						<li>
							<img src="img/15.jpg">
							<p>智能吸顶灯<br>￥899</p>
						</li>
						<li>
							<img src="img/16.jpg">
							<p>明装筒射灯 E 系列<br>￥169</p>
						</li>
						<li>
							<img src="img/17.jpg">
							<p>筒射灯 A 系列<br>￥79</p>
						</li>
						<li>
							<img src="img/18.jpg">
							<p>筒射灯 E 系列<br>￥229</p>
						</li>
						<li>
							<img src="img/19.jpg">
							<p>金属球泡<br>￥62</p>
						</li>
						<li>
							<img src="img/20.jpg">
							<p>地脚灯<br>￥89</p>
						</li>
						<li>
							<img src="img/21.jpg">
							<p>智能蓝牙控制器<br>￥89</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-4">配件</div>
				<div class="sj-hover-4">
					<ul>
						<li>
							<img src="img/22.jpg">
							<p>35W 便携闪充移动电源<br>￥199</p>
						</li>
						<li>
							<img src="img/23.jpg">
							<p>50W 无线潮充<br>￥299</p>
						</li>
						<li>
							<img src="img/24.jpg">
							<p>SHARGE 随行移动电源<br>￥199</p>
						</li>
						<li>
							<img src="img/25.jpg">
							<p>80W GaN 动力电芯 潮充<br>￥149</p>
						</li>
						<li>
							<img src="img/26.jpg">
							<p>67W GaN 潮充<br>￥209</p>
						</li>
						<li>
							<img src="img/27.jpg">
							<p>80W 双口车载潮充<br>￥129</p>
						</li>
						<li>
							<img src="img/28.jpg">
							<p>15W 妙磁车载无线潮充<br>￥209</p>
						</li>
						<li>
							<img src="img/29.jpg">
							<p>PANDAER 240W 快充线<br>￥79</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-5">Flyme</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-6">服务</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-7">社区</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-8">集团官网</div>
			</div>
			<div class="nav-mid">
				<div class="nav-mid-name-9">APP下载</div>
				<div class="sj-hover-9">
					<img src="img/30.jpg">
				</div>
			</div>
		</div>
	</div>
	<!-- 背景下面 -->
	<div class="section-box">
		<div class="section-box-adv">
			<ul>
				<li>
					<img src="	https://fms.res.meizu.com/dms/2023/09/18/e145d509-cc07-42e4-a303-29de7cbad252.png">
					<em>新魅力派对</em>
					<p>晚8 购机抢五折免单</p>
				</li>
				<li>
					<img src="https://fms.res.meizu.com/dms/2023/09/04/5ad5c78f-5597-4230-8f8c-5be0e31bd316.png">
					<em>以旧换新</em>
					<p>旧机回收 就来魅族商城</p>
				</li>
				<li>
					<img src="	https://fms.res.meizu.com/dms/2023/07/24/e61c2352-136b-42fa-b5be-834174f95bd7.png">
					<em>学生专区</em>
					<p>学生认证 专享福利</p>
				</li>
				<li>
					<img src="	https://fms.res.meizu.com/dms/2023/07/24/4daffa22-9a5c-4b23-8011-1e0605625f18.png">
					<em>魅友见面礼</em>
					<p>领取新人福利</p>
				</li>
			</ul>
		</div>
	</div>
	<div class="section-phone-box clearfix">
		<div class="section-title">
			<h3>手机</h3>
		</div>
		<div class="section-phone-adv"></div>
		<div class="section-box-row">
			<div class="index-center-wrapper">
				<ul class="clearfix">
					<li>
						<span class="red">12期</span>
						<span class="box-info">
							<span class="name">魅族 20</span><br>
							<span class="desc">第二代骁龙 8 旗舰处理器 | 全新 Flyme 10 </span><br>
							<span class="rmb"><em>￥</em> 2899<em>起</em> <s>￥2999</s></span>
						</span>
						<img src="	https://openfile.meizu.com/group1/M00/0B/4F/Cgbj0WTaGg6ARWbNAAacoG9LsIY232.png">
					</li>
					<li>
						<span class="red">12期</span>
						<span class="box-info">
							<span class="name">魅族 20 PRO</span><br>
							<span class="desc">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
							<span class="rmb"><em>￥</em>3999<em>起</em> <s>￥3999</s></span>
						</span>
						<img src="img/rmb1.png">
					</li>
					<li class="phon3">
						<div class="section-item-box goods-box">
							<a class="box-img box-img-retina" href="" target="_blank" data-mtype="gw_index_rp_1_3" data-bh="click_index_rp_1_3">
								<img class="goods-img lazy-img  loaded-img" data-src="https://openfile.meizu.com/group1/M00/0A/77/Cgbj0GQk-ZmAdpj5AA3X2fbhIlA274.png" actived="actived" src="https://openfile.meizu.com/group1/M00/0A/77/Cgbj0GQk-ZmAdpj5AA3X2fbhIlA274.png">
								<span class="box-info "><span class="goods-name">魅族 20「定胜青」</span>
								<span class="goods-desc">第二代骁龙 8 旗舰处理器 | 全新 Flyme 10</span><span  class="goods-price">
							<i>￥</i>2899<em>起</em><s>￥2999</s></span></span>
							<span class="product-sign red">12期</span></a></div>
					</li>
					<li class="phon4">
	
						<div class="section-item-box goods-box">
							<a class="box-img box-img-retina"  target="_blank" data-mtype="gw_index_rp_1_4" data-bh="click_index_rp_1_4">
								<img class="goods-img lazy-img  loaded-img" data-src="https://openfile.meizu.com/group1/M00/0A/76/Cgbj0GQk-NqAEaupAAnjnTAI6uw855.png" actived="actived" src="https://openfile.meizu.com/group1/M00/0A/76/Cgbj0GQk-NqAEaupAAnjnTAI6uw855.png">
								<span class="box-info "><span class="goods-name">魅族 20 PRO「曙光银」</span>
								<span class="goods-desc">第二代骁龙 8 旗舰处理器 | 全新 Flyme 10</span>
							<span class="goods-price"><i>￥</i>3899<em>起</em><s>￥3999</s></span></span><span class="product-sign red">12期</span></a></div>
	
					</li>
					<li class="phon5">
	
						<div class="section-item-box goods-box">
							<a class="box-img box-img-retina" target="_blank" data-mtype="gw_index_rp_1_5" data-bh="click_index_rp_1_5">
								<img class="goods-img lazy-img  loaded-img" data-src="https://openfile.meizu.com/group1/M00/0B/63/Cgbj0GTsAFmAf_4vAA0-C2QrdgI557.png" actived="actived" src="https://openfile.meizu.com/group1/M00/0B/63/Cgbj0GTsAFmAf_4vAA0-C2QrdgI557.png">
								<span class="box-info "><span class="goods-name">魅族 20 PRO 领克 08 定制版</span>
								<span class="goods-desc">加赠 ￥599 Flyme Auto 手机域至尊礼盒</span>
							<span  class="goods-price"><i>￥</i>4788<em>起</em><s>￥5288</s></span></span><span class="product-sign red">12期</span></a></div>
	
					</li>
					<li class="last">
						<div class="section-item-box goods-box">
							<a class="box-img box-img-retina"  target="_blank" data-mtype="gw_index_rp_1_6" data-bh="click_index_rp_1_6">
								<img class="goods-img lazy-img  loaded-img" data-src="https://openfile.meizu.com/group1/M00/0A/CF/Cgbj0GR0BCSALZWTAARFHnfd6T0252.png" actived="actived" src="https://openfile.meizu.com/group1/M00/0A/CF/Cgbj0GR0BCSALZWTAARFHnfd6T0252.png">
								<span class="box-info "><span class="goods-name">魅族 20 INFINITY 无界版</span>
								 <span class="goods-desc">2K+ 21:9 无界臻彩屏</span><span  class="goods-price"><i>￥</i>6299<em>起</em><s></s>
						</span></span><span class="product-sign red">24期</span></a></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="sect1 clearfix">
			<div class="st">
				<h3>PANDAER 奇趣探索</h3>
			</div>
			<div class="im2">
				<a href=""></a>
			</div>
			<div class="nt">
				<div class="nt1">
					<ul>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="img/100.png">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
						<li>
							<a href="">
								<img src="https://fms.res.meizu.com/dms/2023/06/01/59f78176-bea4-4fd4-9415-d8138e5d390b.jpg">
								<div class="bib">
									<span class="bib1">魅族 20 PRO</span><br>
									<span class="bib2">第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 </span><br>
									<span class="bib3">
										￥299<s>369</s>
									</span>
								</div>
							</a>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌壳</span><br>
								<span class="bid2">魅族 20 系列适用 | IML 双塑立体印刷</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 夏日限定 妙磁抗菌抗摔壳</span><br>
								<span class="bid2">iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力</span><br>
								<span class="bid3"><p>￥</p>159<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="https://openfile.meizu.com/group1/M00/0B/14/Cgbj0GTAhLWAVSsUAAlG8wdeF4I077.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER Air 真无线蓝牙耳机</span><br>
								<span class="bid2">13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴</span><br>
								<span class="bid3"><p>￥</p>149<p></span>
							</div>
						</li>
					</ul>
				</div>
			</div>
	</div>
	<div class="sect2 clearfix">
			<div class="st">
				<h3>lipro 智能家居</h3>
			</div>
			<div class="im3">
				<a href=""></a>
			</div>
			<div class="xt">
				<div class="xt1">
					<ul>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">学习护眼台灯</span><br>
								<span class="bid2">国 AA 级照度 | 低重影技术</span><br>
								<span class="bid3"><p>￥</p>1799<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">智能吸顶灯</span><br>
								<span class="bid2">如然之光 护眼好光 | 2cm 超薄灯体</span><br>
								<span class="bid3"><p>￥</p>899<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">客厅智能吸顶灯</span><br>
								<span class="bid2">3cm超薄灯体 | 全客厅护眼</span><br>
								<span class="bid3"><p>￥</p>2999<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">lipro 球泡</span><br>
								<span class="bid2">Ra97 高显色| RG0 护眼低蓝光</span><br>
								<span class="bid3"><p>￥</p>44<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">学习护眼台灯</span><br>
								<span class="bid2">国 AA 级照度 | 低重影技术</span><br>
								<span class="bid3"><p>￥</p>1799<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">智能吸顶灯</span><br>
								<span class="bid2">如然之光 护眼好光 | 2cm 超薄灯体</span><br>
								<span class="bid3"><p>￥</p>899<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">客厅智能吸顶灯</span><br>
								<span class="bid2">3cm超薄灯体 | 全客厅护眼</span><br>
								<span class="bid3"><p>￥</p>2999<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/21.jpg">
							</a>
							<div class="bid">
								<span class="bid1">lipro 球泡</span><br>
								<span class="bid2">Ra97 高显色| RG0 护眼低蓝光</span><br>
								<span class="bid3"><p>￥</p>44<p></span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="sect2">
			<div class="st">
				<h3>声学配件</h3>
			</div>
			<div class="im4">
				<a href=""></a>
			</div>
			<div class="xt">
				<div class="xt1 clearfix">
					<ul>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus 2S 主动降噪耳机</span><br>
								<span class="bid2">48dB ANC 主动降噪 | 30H 超长续航</span><br>
								<span class="bid3"><p>￥</p>289<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus Air 真无线耳机</span><br>
								<span class="bid2">ENC 智能通话降噪 | 定制 12mm 分频「超动圈」</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus 2 主动降噪耳机</span><br>
								<span class="bid2">全场景 ANC 主动降噪 | 「妙音」ENC通话降噪</span><br>
								<span class="bid3"><p>￥</p>249<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus+ 主动降噪耳机 APP版</span><br>
								<span class="bid2">12mm 超大动圈 | 30db 主动降噪</span><br>
								<span class="bid3"><p>￥</p>169<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus 2S 主动降噪耳机</span><br>
								<span class="bid2">48dB ANC 主动降噪 | 30H 超长续航</span><br>
								<span class="bid3"><p>￥</p>289<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus Air 真无线耳机</span><br>
								<span class="bid2">ENC 智能通话降噪 | 定制 12mm 分频「超动圈」</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus 2 主动降噪耳机</span><br>
								<span class="bid2">全场景 ANC 主动降噪 | 「妙音」ENC通话降噪</span><br>
								<span class="bid3"><p>￥</p>249<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus+ 主动降噪耳机 APP版</span><br>
								<span class="bid2">12mm 超大动圈 | 30db 主动降噪</span><br>
								<span class="bid3"><p>￥</p>169<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus 2S 主动降噪耳机</span><br>
								<span class="bid2">48dB ANC 主动降噪 | 30H 超长续航</span><br>
								<span class="bid3"><p>￥</p>289<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus Air 真无线耳机</span><br>
								<span class="bid2">ENC 智能通话降噪 | 定制 12mm 分频「超动圈」</span><br>
								<span class="bid3"><p>￥</p>139<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus 2 主动降噪耳机</span><br>
								<span class="bid2">全场景 ANC 主动降噪 | 「妙音」ENC通话降噪</span><br>
								<span class="bid3"><p>￥</p>249<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/24.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 Blus+ 主动降噪耳机 APP版</span><br>
								<span class="bid2">12mm 超大动圈 | 30db 主动降噪</span><br>
								<span class="bid3"><p>￥</p>169<p></span>
							</div>
						</li>						
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="sect3 clearfix">
		<div class="st clearfix">
				<h3>周边配件</h3>
			</div>
			<div class="im5">
				<a href=""></a>
			</div>
			<div class="xt">
				<div class="xt1">
					<ul>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 35W 便携闪充移动电源</span><br>
								<span class="bid2">多协议双向快充 | 银行卡便携尺寸</span><br>
								<span class="bid3"><p>￥</p>199<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER × SHARGE 随行移动电源</span><br>
								<span class="bid2">10000mAh 车规级电芯 | 随行轻量化设计</span><br>
								<span class="bid3"><p>￥</p>199<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 240W 快充线</span><br>
								<span class="bid2">支持魅族 20 系列 Super mCharge 快充</span><br>
								<span class="bid3"><p>￥</p>79<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 lifeme 磁吸无线充电器</span><br>
								<span class="bid2">115W（Max）| 智能 IC 充电</span><br>
								<span class="bid3"><p>￥</p>89<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 35W 便携闪充移动电源</span><br>
								<span class="bid2">多协议双向快充 | 银行卡便携尺寸</span><br>
								<span class="bid3"><p>￥</p>199<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER × SHARGE 随行移动电源</span><br>
								<span class="bid2">10000mAh 车规级电芯 | 随行轻量化设计</span><br>
								<span class="bid3"><p>￥</p>199<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">PANDAER 240W 快充线</span><br>
								<span class="bid2">支持魅族 20 系列 Super mCharge 快充</span><br>
								<span class="bid3"><p>￥</p>79<p></span>
							</div>
						</li>
						<li class="ig">
							<a href="">
								<img src="img/26.jpg">
							</a>
							<div class="bid">
								<span class="bid1">魅蓝 lifeme 磁吸无线充电器</span><br>
								<span class="bid2">115W（Max）| 智能 IC 充电</span><br>
								<span class="bid3"><p>￥</p>89<p></span>
							</div>
						</li>					
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="sect3 clearfix">
		<div class="st clearfix">
				<h3>社区热帖</h3>
		</div>
		<div class="xt">
				<div class="xt1">
					<ul>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
						<li class="ig1">
							<a href="">
								<img src="img/101.jpg">
							</a>
							<div class="comment-user-info">
								<img src="https://img.res.meizu.com/img/download/uc/13/04/28/90/00/1304289/w200h200?t=1678761648000">
								<span class="comment-username">卓岳</span>
							</div>
							<p>魅族 ∞ 领克无界生态发布会</p>
							<span class="comment-tip">图文直播</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	<div class="sect6">
			<div class="st">
				<h3>Flyme</h3>
			</div>
			<div class="sb clearfix">
				<ul>
					<li class="sb1">
						<a href="">
							<img src="	https://fms.res.meizu.com/dms/2023/08/09/127d6eee-7708-4267-a8a8-8566cf4986ac.jpg">
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/102.jpg">
							<p>Flyme 隐私安全白皮书</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/102.jpg">
							<p>Flyme 隐私安全白皮书</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/102.jpg">
							<p>Flyme 隐私安全白皮书</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/102.jpg">
							<p>Flyme 隐私安全白皮书</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/102.jpg">
							<p>Flyme 隐私安全白皮书</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/102.jpg">
							<p>Flyme 隐私安全白皮书</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="sect7">
			<div class="st">
				<h3>精彩视频</h3>
			</div>
			<div class="sb clearfix">
				<ul>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>魅族 20 魅友共创·白</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>魅族品牌焕新｜Infinite Passion 热爱无界</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>新「奇点」魅族来定义</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>魅族 20</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>魅族 20 魅友共创·白</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>魅族品牌焕新｜Infinite Passion 热爱无界</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>新「奇点」魅族来定义</p>
						</a>
					</li>
					<li class="sb2">
						<a href="">
							<img src="img/103.jpg">
							<p>魅族 20</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
<!-- dibu -->
<div class="footer">
	<div class="footer1">
		<div class="recommend-contain">
			<div class="recommend-wrap">
				<h3 class="title1">推荐产品</h3>
				<ul>
					<li>魅族 20</li>
					<li>魅族 20 PRO</li>
					<li>全部手机</li>
					<li>PANDAER</li>
					<li>lipro</li>
					<li>配件</li>
					
				</ul>
			</div>
			<div class="recommend-wrap">
				<h3 class="title1">购买渠道</h3>
				<ul>
					<li>官方商城</li>
					<li>零售门店</li>
					<li>线上销售授权名单</li>
					<li>企业服务</li>
					<li>M码通道</li>
					<li>魅族 20</li>
					
				</ul>
			</div>
			<div class="recommend-wrap">
				<h3 class="title1">服务支持</h3>
				<ul>
					<li>服务中心</li>
					<li>维修查询</li>
					<li>备件价格查询</li>
					<li>寄修服务</li>
					<li>增值保障</li>
					<li>真伪查询</li>
					
				</ul>
			</div>
			<div class="recommend-wrap">
				<h3 class="title1">官方社媒</h3>
				<ul>
					<li>官方社区</li>
					<li>新浪微博</li>
					<li>百度贴吧</li>
					<li>百度贴吧</li>
					<li>百度贴吧</li>
					<li>百度贴吧</li>
					
				</ul>
			</div>
			<div class="recommend-wrap">
				<h3 class="title1">关于魅族</h3>
				<ul>
					<li>了解魅族</li>
					<li>联系我们</li>
					<li>联系我们</li>
					<li>联系我们</li>
					<li>联系我们</li>
					<li>联系我们</li>
					
				</ul>
			</div>
		</div>
		<div class="kefu-contain">
			<div class="name">官方客服</div>
			<div class="contact">
				<div class="basic">
					<div class="ph">400-788-3333</div>
					<div class="time">周一至周日 8:00 - 24:00</div>
				</div>
				<div class="button">
					<img src="	https://fms.res.meizu.com/dms/2023/04/18/371426ca-48e9-4e2e-b919-c604bab93e3e.png">
					<span class="text">在线客服</span>
				</div>
			</div>
			<div class="subscribe">
				<div class="title1">关注魅族</div>
				<div class="list">
					<img src="	https://fms.res.meizu.com/dms/2023/05/09/6d8f49e4-bb95-456d-93c2-bbf318d9d019.png" class="imgs1">
					<img src="https://fms.res.meizu.com/dms/2019/01/07/26b50023-fde7-4f23-ae32-3aa39585f4c4.png" class="imgs2">
					<span id="bid1"></span>
					<img src="	https://fms.res.meizu.com/dms/2023/05/09/37a9cb84-dbcd-4071-9351-6da2127d6df7.png" class="imge">
					<img src="	https://fms.res.meizu.com/dms/2023/05/09/f5ebf3c0-3f08-4988-b148-ecc933835c49.png" class="img3">
					
				</div>
			</div>
		</div>
	</div>
	<div class="footer2">
		<div class="link-wrap">
			<div class="pl">
				<span>举报中心</span>&nbsp;&nbsp;<span>法律声明</span>&nbsp;&nbsp;<span>隐私政策</span>&nbsp;&nbsp;<span>营业执照</span>&nbsp;&nbsp;<span>粤ICP备13003602号-2</span>&nbsp;&nbsp;<span>合字B2-20170010</span>&nbsp;&nbsp;<span>粤公网安备 44049102496009 号</span>

			</div>
			
			<div class="pl2">
				©2023 珠海星纪魅族信息技术有限公司  &nbsp;<span></span>简体中文
				
			</div>
			
		</div>
		
	</div>
</div>	
</body>
</html>

css代码

 

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
body{
	background: #F4F4F4;
}
.clearfix::after{
		/*	设置添加的子元素内容为空		*/
			content: '';
		/*	给子元素设置clear：both		*/
			clear: both;
		/*	将子元素转换为块级元素		*/
			display: block;
		/*	设置子元素的高度是0，不占空间		*/
			height: 0;
		/*	设置子元素不可见		*/
			visibility: hidden;
		}
/* 背景图 */
.background{
	position: relative;
	width: 100%;
	height: 670px;
/*	background: red;*/
}
.bgc{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-image: url(../img/c0.jpg),url(../img/c1.jpg),url(../img/c2.jpg),url(../img/c3.jpg),
	url(../img/c4.jpg),url(../img/c5.jpg),url(../img/c6.jpg),url(../img/c7.jpg);
	background-repeat: no-repeat;
	animation: ergou 32s  infinite;
	background-position: center;
}
@keyframes ergou{
			0%{
				background-image: url(../img/c0.jpg);
			}
			15%{
				background-image: url(../img/c1.jpg);
			}
			25%{
				background-image: url(../img/c2.jpg);
			}
			35%{
				background-image: url(../img/c3.jpg);
			}
			50%{
				background-image: url(../img/c4.jpg);
			}
			65%{
				background-image: url(../img/c5.jpg);
			}
			75%{
				background-image: url(../img/c6.jpg);
			}
			85%{
				background-image: url(../img/c7.jpg);
			}
			100%{
				background-image: url(../img/c8.jpg);
			}
		}
/* nav */
/* nav-logo */
.nav{
	position: absolute;
	width: 1240px;
	left: 50%;
	margin-left: -620px;
/*	background: yellow;*/
	height: 82px;
	
	z-index: 1001;
}
.nav-logo{
	float: left;
	width: 125px;	
	height: 80px;
	background: url(../img/logo.png) no-repeat;
	background-position: center;
	background-size: 100%;
}
/*<!-- shopping car -->*/
.car{
	position: relative;
	float: right;
	width: 29px;
	height: 29px;
	background: url(../img/1.png) no-repeat;
	margin-top: 25px;
	overflow: hidden;
}
.car em{
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	font-style: normal;
	height: 15px;
	line-height: 15px;
	text-align: center;
	border-radius: 50%;
    background: #c00;
    color: #fff;
    padding: 0 3px;
    font-size: 12px;
}
.car-content{
	position: absolute;
	top: 40px;
	right: 0;
	width: 318px;
	height: 120px;
	background: white;
	color: #999;
    font-size: 12px; 
    padding-top: 40px; 
    padding-left: 40px;
    line-height: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    border-radius: 2px;
}
.car-icon{
	float: left;
	background: url(../img/xiong.png) no-repeat;
	display: inline-block;
    width: 47px;
    height: 42px;
    margin-right: 10px;
    background-size: 100%;
/*    margin-left: 40px;*/
}
.car-text{
	float: right ;
}
.car-content span{
	float: right;
	margin-top: -55px;
	margin-right: 4px;
	border: 8px solid;
	border-color: transparent transparent white transparent;
}
.car:hover{
	overflow: visible;
}
/* user */
.user{
	position: relative;
	float: right;
	width: 29px;
	height: 29px;
	background: url(../img/2.png) no-repeat;
	margin-top: 25px;
	margin-right: 10px;
	overflow: hidden;
}
.user-content{
	position: absolute;
	right: 0;
	width: 98px;
	background-color: #fff;
    top: 40px;
    left: 50%;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: center;
    padding: 15px 0;
    margin-left: -48px;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    font-size: 12px;
    line-height: 28px;
}
.user-content span{
	float: right;
	margin-top: -30px;
	margin-right: 40px;
	border: 8px solid;
	border-color: transparent transparent white transparent;
}
.user:hover{
	overflow: visible;
}
/* 导航中间 */
.nav-mid{
/*	position: relative;*/
}
.nav-mid-name-1{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-385px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
.sj-hover{
	position: absolute;
	height: 0px;
	background: white;
	width: 100%;
	z-index: 999;
	overflow: hidden;
	transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-1:hover +.sj-hover{
	
	height: 265px;
}
.sj-hover:hover{
	height: 265px;
}

/* 手机hover内容 */
.sj-hover ul{
	position: absolute;
	top: 82px;
	left: 50%;
	margin-left: -620px;
	width: 1240px;
	height: 183px;
/*	background: red;*/
	text-align: center;
}
.sj-hover ul li{
	display: inline-block;
	width: 142px;
	font-size: 12px;
	color: #333;
	cursor: pointer;
}
.sj-hover ul li img{
	width: 120px;
	height: 120px;
}
/* 2 */
.nav-mid-name-2{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-315px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
.sj-hover-2{
	position: absolute;
	height: 0px;
	background: white;
	width: 100%;
	z-index: 999;
	overflow: hidden;
	transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-2:hover +.sj-hover-2{
	height: 265px;
}
.sj-hover-2:hover{
	height: 265px;
}
.sj-hover-2 ul{
	position: absolute;
	top: 82px;
	left: 50%;
	margin-left: -620px;
	width: 1240px;
	height: 183px;
/*	background: red;*/
	text-align: center;
}
.sj-hover-2 ul li{
	display: inline-block;
	width: 142px;
	font-size: 12px;
	color: #333;
	cursor: pointer;
}
.sj-hover-2 ul li img{
	width: 120px;
	height: 120px;
}
/* 3 */
.nav-mid-name-3{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-205px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
.sj-hover-3{
	position: absolute;
	height: 0px;
	background: white;
	width: 100%;
	z-index: 999;
	overflow: hidden;
transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-3:hover +.sj-hover-3{
	height: 265px;
}
.sj-hover-3:hover{
	height: 265px;
}
.sj-hover-3 ul{
	position: absolute;
	top: 82px;
	left: 50%;
	margin-left: -620px;
	width: 1240px;
	height: 183px;
/*	background: red;*/
	text-align: center;
}
.sj-hover-3 ul li{
	display: inline-block;
	width: 142px;
	font-size: 12px;
	color: #333;
	cursor: pointer;
}
.sj-hover-3 ul li img{
	width: 120px;
	height: 120px;
}
/* 4 */
.nav-mid-name-4{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-135px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
.sj-hover-4{
	position: absolute;
	height: 0px;
	background: white;
	width: 100%;
	z-index: 999;
	overflow: hidden;
transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-4:hover +.sj-hover-4{
	height: 265px;
}
.sj-hover-4:hover{
	height: 265px;
}
.sj-hover-4 ul{
	position: absolute;
	top: 82px;
	left: 50%;
	margin-left: -620px;
	width: 1240px;
	height: 183px;
/*	background: red;*/
	text-align: center;
}
.sj-hover-4 ul li{
	display: inline-block;
	width: 142px;
	font-size: 12px;
	color: #333;
	cursor: pointer;
}
.sj-hover-4 ul li img{
	width: 120px;
	height: 120px;
}
/* 5 */
.nav-mid-name-5{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-65px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
/* 6 */
.nav-mid-name-6{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(20px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
/* 7 */
.nav-mid-name-7{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(90px);
	float: right;
	margin-right: 20px;
/*	background: red;*/
	z-index: 1002;
}
/* 8 */
.nav-mid-name-8{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(160px);
	float: right;
	margin-right: 20px;
	z-index: 1002;
}
/* 9 */
/* 8 */
.nav-mid-name-9{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(260px);
	float: right;
	margin-right: 20px;
	z-index: 1002;
}
.sj-hover-9{
	position: absolute;
	height: 0px;
	background: white;
	width: 100%;
	z-index: 999;
	overflow: hidden;
	transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.sj-hover-9 img{
	margin-top: 90px;
	margin-left: 140px;
	width: 1240px;
	height: 300px;
}
.nav-mid-name-9:hover +.sj-hover-9{
	height: 400px;
}
.sj-hover-9:hover{
	height: 400px;
}
.search{
	position: relative;
	float: right;
	width: 170px;
	height: 86px;
	line-height: 77px;
	margin-right: 33px;
}
.search input{
	width: 127px;
    height: 30px;
	border-radius: 20px;
	border: 1px solid #ccc;
	margin: 0 20px;
	font-size: 12px;
	padding: 0 20px;
	margin-left: 15px;
	box-sizing: content-box;
	outline: 0;
}
.search i{
	position: absolute;
	top: 33px;
	right: -9px;
	display: inline-block;
	width: 17px;
	height: 14px;
	background: url(../img/search.png);
	background-size: 100%;
	cursor: pointer;
}
.nav-mid-name-1,.nav-mid-name-2,.nav-mid-name-3,
.nav-mid-name-4,.nav-mid-name-5,.nav-mid-name-6,.nav-mid-name-7
,.nav-mid-name-8,.nav-mid-name-9{
	font-size: 14px;
	cursor: pointer;
}
.nav-mid-name-1:hover,.nav-mid-name-2:hover,.nav-mid-name-3:hover,
.nav-mid-name-4:hover,.nav-mid-name-5:hover,.nav-mid-name-6:hover
,.nav-mid-name-7:hover,.nav-mid-name-8:hover,.nav-mid-name-9:hover{
	color: #FF6640;
}

/*  下面内容 */
.section-box{
	margin-bottom: 50px;
	height: 260px;
}
.section-box-adv{
	height: auto;
    padding-bottom: 45px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #eee;
}
.section-box-adv ul{
	width: 1240px;
	height: 232px;
    margin: 0 auto;
}
.section-box-adv ul li{
	float: left;
    padding-top: 45px;
    padding-left: 160px;
}
.section-box-adv ul li img{
	display: block;
	width: 130px;
	height: 130px;
    text-align: center;
}
.section-box-adv em{
	display: block;
    color: #333;
    font-size: 20px;
    font-style: normal;
    padding-left: 28px;
}
.section-box-adv p{
	font-size: 14px;
    color: #999;
	text-align: center;
}
.section-phone-box{
	margin-bottom: 50px;
}
.section-title{
    text-align: center;
    margin-bottom: 10px;
    height: 90px;
    background: #f4f4f4;
    line-height: 120px;


}
.section-title h3{
	font-size: 30px;
	font-weight: 400;
    font-style: normal;
}
.section-phone-adv{
    height: 450px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    background: url(https://fms.res.meizu.com/dms/2023/07/14/c34d5374-3332-4252-9095-d69ec95dafbb.jpg) no-repeat;
    background-position: center;
}
.section-box-row{
    background: #f4f4f4;

}
.index-center-wrapper{
	width: 1240px;
    margin: auto;
}
.index-center-wrapper li{
	position: relative;
	float: left;
	margin-right: 5px;
	width: 615px;
    height: 610px;
    background: #fff;
}
/* 手机 */
.phon3,.phon4,.phon5,.last{
	float: left;
position: relative;
width: 303px !important;
height: 375px !important;
margin-right: 9px ;
margin-top: 10px;
background-color: #fff;
overflow: hidden;
transition: all .3s ease;
}
.last{
	margin-right: 0;
}
.box-img {
background-size: cover;
display: block;
width: 100%;
height: 100%;
text-align: center;
background-repeat: no-repeat;
background-position: 50%;
}
.goods-img {
position: absolute;
left: 50%;
bottom: 0;
height: 460px;
margin-left: -250px;
margin-top: 30px;
}
.phon3 .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}
.phon4 .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}
.phon5 .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}

.last .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}
.phon3 .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.phon4 .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.phon5 .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.last .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.goods-name {
color: #333;
font-size: 20px;
margin-bottom: 2px;
text-align: center;
}
.goods-desc {
color: #999;
font-size: 14px;
margin-bottom: 3px;
display: block;
}
.goods-price {
position: relative;
display: inline-block;
color: #c00;
font-size: 22px;
padding-left: 14px;
}
.goods-price i {
position: absolute;
left: 0;
font-size: 14px;
bottom: 3px;
}
i{
font-style: normal;
}
.goods-price em {
font-size: 16px;
}
.goods-price s {
font-size: 14px;
margin-left: 8px;
color: #666;
}


.index-center-wrapper li img{
	    position: absolute;
    left: 50%;
    bottom: 0;
    height: 460px;
    margin-left: -250px;
}
.red{
	position: absolute;
	top: 30px;
    left: 30px;
    display:inline-block;
	background-image: linear-gradient(120deg,#ff3149,#ff64a6);
	width: 60px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    border-radius: 50%;
}
.box-info{
	position: absolute;
	top: 58px;
	left: 0;
    width: 100%;
    text-align: center;
    line-height: 30px;
}
.name{
	color: #333;
    font-size: 28px;
    margin-bottom: 0;
   }
.desc{
	    color: #333;
    font-size: 18px;
    margin-bottom: 3px;
}
.rmb{
    color: #c00;
    font-size: 22px;
    padding-left: 14px;
}
.rmb em{
	font-weight: 400;
    font-style: normal;
    font-size: 14px;
}
.box-info s{
	font-size: 14px;
    margin-left: 8px;
    color: #666;
}
/*  sss */
/* 内容 */
.page{
	width: 100%;
	background: #f4f4f4;
}
/*内容1*/
.ic{
	width: 100%;
	height: 235px;
	background: #fff;
	padding-bottom: 45px;
}
.ic ul{
	max-width: 1240px;
	height: 232px;
	margin: 0 auto;
}
.ic ul li{
	float: left;
	display: block;
	list-style: none;
	padding-top: 45px;
	width: 25%;
	height: 187px;
}
.ic ul li a{
	display: block;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 100%;
}
.ic ul li a:hover{
	opacity: 0.85;
}
.ic ul li a img{
	width: 130px;
	height: 130px;
}
.ic ul li a span{
	display: block;
	font-size: 20px;
	color: #333;
}
.ic ul li a p{
	font-size: 14px;
	color: #999;
}

/*内容2*/
.st{
	margin-top: 50px;
	margin-bottom: 10px;
	text-align: center;
}
.st h3{
	width: 100%;
	height: 45px;
	font-size: 30px;
	margin: 0 auto;
}
.im1{
	width: 100%;
	height: 450px;
	background: url(img/13.jpg) no-repeat;
	background-position: center;
}
.im2{
	width: 100%;
	height: 450px;
	background: url(../img/c8.jpg) no-repeat;
	background-position: center;
}

.im3{
	width: 100%;
	height: 450px;
	background: url(https://fms.res.meizu.com/dms/2022/07/20/21da28b6-0db6-464a-9a2d-c914d74b6467.jpg) no-repeat;
	background-position: center;
}
.im4{
	width: 100%;
	height: 450px;
	background: url(https://fms.res.meizu.com/dms/2023/07/17/c0e5df00-23fb-4b7a-b6db-9a603af73d0c.jpg) no-repeat;
	background-position: center;
}
.im5{
	width: 100%;
	height: 450px;
	background: url(../img/c9.jpg) no-repeat;
	background-position: center;
}
.st1 a{
	width: 100%;
	height: 100%;
}
.st2{
	width: 100%;
	height: 620px;
}
.st2 .wa{
	width: 1240px;
	height: 100%;
	margin: 0 auto;
}
.st2 .wa .wa-left{
	float: left;
	position: relative;
	width: 615px;
	height: 610px;
	background: #fff;
	margin-top: 10px;
	transition: all .3s ease;
}
.st2 .wa .wa-left:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.st2 .wa .wa-right{
	float: right;
	position: relative;
	width: 615px;
	height: 610px;
	background: #fff;
	margin-top: 10px;
	transition: all .3s ease;
}
.st2 .wa .wa-right:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.left-red{
	display: block;
	position: absolute;
	top: 30px;
	left: 30px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 16px;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	background-image: linear-gradient(120deg,#ff3149,#ff64a6);
}
.left-text{
	text-align: center;
	position: absolute;
	top: 55px;
	width: 100%;
	height: 105px;
}
.left-text .b1{
	font-size: 28px;
	color: #333;
}
.left-text .b2{
	font-size: 18px;
	color: #333;
}
.left-text .b3{
	font-size: 22px;
	color: #c00;
}
.left-text .b3 p{
	display: inline-block;
	font-size: 14px;
	color: #c00;
}
.left-text img{
	position: absolute;
	top: 105px;
	left: 80px;
	width: 460px;
	height: 460px;
}
/*内容3*/
.nt{
	width: 100%;
	height: 3850px;
}
.nt .nt1{
	width: 1240px;
	height: 100%;
	margin: 0 auto;
}
.nt .nt1 ul li{
	position: relative;
	float: left;
	list-style: none;
    position: relative;
    width: 301px;
    height: 375px;
    margin-right: 9px;
    margin-top: 10px;
    background-color: #fff;
    transition: all .3s ease;
}
.nt .nt1 ul li:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.nt .nt1 ul li a{
	width: 100%;
	height: 100%;
}
.nt .nt1 ul li a img{
	width: 100%;
	height: 100%;
}
.bib{
	position: absolute;
	text-align: center;
	top: 280px;
	width: 100%;
}
.bib p{
display: inline-block;
}
.bib .bib1{
	color: white;
	font-weight: 700;
	font-size: 21px;
}
.bib .bib2{
	color: white;
	font-size: 14px;
}
.bib .bib3{
	color: #ebce6b;
	font-size: 24px;
	font-weight: 700;
}
.bib .bib3 s{
	color: white;
	font-size: 14px;
	margin-left: 4px;
}
.nt .nt1 .ig img{
	width: 230px;
	height: 230px;
	margin: 30px 36px 0;
}
.bid{
	position: absolute;
	text-align: center;
	top: 270px;
	width: 100%;
	height: 80px;
}
.bid1{
	color: #333;
	font-size: 16px;
	margin-bottom: 2px;
}
.bid2{
	color: #999;
	font-size: 14px;
}
.bid3{
	color: #c00;
	font-size: 22px;
}
.bid .bid3 p{
	display:inline-block;
	font-size: 14px;
}
/*内容4*/
.xt{
	width: 100%;
}
.xt1{
	width: 1240px;
	margin: 0 auto;
}
.xt .xt1 ul li{
	position: relative;
	float: left;
	list-style: none;
    position: relative;
    width: 301px;
    height: 375px;
    margin-right: 9px;
    margin-top: 10px;
    background-color: #fff;
    transition: all .3s ease;
}
.xt .xt1 ul li:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.xt .xt1 ul li a{
	width: 100%;
	height: 100%;
}
.xt .xt1 ul li a img{
	width: 100%;
	height: 100%;
}
.bib{
	position: absolute;
	text-align: center;
	top: 280px;
	width: 100%;
}
.bib p{
display: inline-block;
}
.bib .bib1{
	color: white;
	font-weight: 700;
	font-size: 21px;
}
.bib .bib2{
	color: white;
	font-size: 14px;
}
.bib .bib3{
	color: #ebce6b;
	font-size: 24px;
	font-weight: 700;
}
.bib .bib3 s{
	color: white;
	font-size: 14px;
	margin-left: 4px;
}
.xt .xt1 .ig img{
	width: 230px;
	height: 230px;
	margin: 30px 36px 0;
}
.bid{
	position: absolute;
	text-align: center;
	top: 270px;
	width: 100%;
	height: 80px;
}
.bid1{
	color: #333;
	font-size: 16px;
	margin-bottom: 2px;
}
.bid2{
	color: #999;
	font-size: 14px;
}
.bid3{
	color: #c00;
	font-size: 22px;
}
.bid .bid3 p{
	display:inline-block;
	font-size: 14px;
}
/*内容5*/
.xt .xt1 ul .ig1 img{
	display: inline-block;
	width: 303px;
	height: 190px;
}
.xt .xt1 ul .ig1 .comment-user-info{
    height: 42px;
    line-height: 42px;
    margin-top: 10px;
    padding: 0 15px;
}
.xt .xt1 ul .ig1 .comment-user-info img {
    width: 36px;
    height: 36px;
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    box-shadow: 1px 1px 1px 1px #eee;
}
.xt .xt1 ul .ig1 .comment-username {
    margin-left: 15px;
    text-align: left;
    float: left;
    font-size: 12px;
    color: #515151;
}
.xt .xt1 ul .ig1 p{
	padding: 10px 15px 15px;
    font-size: 16px;
    line-height: 27px;
    text-align: left;
    height: 66px;
    color: #515151;
}
.xt .xt1 ul .ig1 .comment-tip{
	color: #999;
    display: block;
    padding: 0 15px;
    margin-top: 10px;
    text-align: left;
}
.index-center-wrapper{
	width: 1240px;
    margin: auto;
}
.bottom-2 li{
	float: left;
	width: 305px;
	height: 245px;
	background: red;
	box-sizing: border-box;
}
.bottom-2 li:nth-child(1){
	width: 615px;
	height: 245px;
}
.bottom-2 li:nth-child(1) img{
	width: 615px;
	height: 245px;
	/*margin: 0;
	padding: 0;*/
}
/*内容6*/
.sb{
	width: 1240px;
	height: 520px;
	margin: 0 auto;
}
.sb1{
	float: left;
	display: inline-block;
	width: 615px;
	height: 245px;
	margin-bottom: 15px;
	margin-right: 5px;
	transition: all .3s ease;
}
.sb1:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.sb1 a{
	display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.sb .sb1 img{
	width: 100%;
	height: 100%;
}
.sb2{
	float: left;
	display: inline-block;
	width: 292px;
	height: 245px;
	margin-right: 9px;
	margin-left: 9px;
	margin-bottom: 15px;
	text-align: center;
    background-color: #fff;
    transition: all .3s ease;
    overflow: hidden;
}
.sb2:hover{
	box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.sb2 a{
	text-decoration: none;
}
.sb .sb2 img{
	width: 292px;
	height: 190px;
}
.sb2 p{
	display: inline-block;
	width: 292px;
	height: 49px;
	color: #515151;
	line-height: 49px;
}
.footer{
	background-color: #fff;
    width: 100%;
}
.footer2{
	color: #fff;
    height: 66px;
    width: 100%;
    background-color: #000;
}
.footer2 .link-wrap{
	width: 1240px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pl{
	margin-right: 24px;
    font-size: 13px;
}
.pl span:hover{
	color: #ccc;
}
.pl2{
	font-size: 13px;
}
.pl2 span{
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(https://fms.res.meizu.com/dms/2017/12/18/1c31db15-ab85-4932-8e6c-edfd6039bc60.png) no-repeat;
	background-size: 100%;
	background-position: center;
	margin:0 10px;

}
.footer1{
    width: 1240px;
    margin: 0 auto;
    white-space: nowrap;
    display: flex;
    padding-top: 38px;
    margin-bottom: 58px;
    justify-content: space-between;
    cursor: pointer;
}
.recommend-contain{
	display: flex;
    max-width: 936px;
}
.recommend-wrap{
	width: 164px;
}
.title1{
	font-size: 15px;
    font-weight: 700;
    color: #3d3e40;
    margin-bottom: 16px;
}
.recommend-wrap ul li{
	margin-bottom: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    color: #737880;
}
.recommend-wrap ul li:hover{
	color: red;
}
.kefu-contain{
	width: 340px;
}
.name{
	font-size: 15px;
    font-weight: 700;
    color: #3d3e40;
    margin-bottom: 16px;
}
.contact{
	display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}
.ph{
	font-size: 18px;
    font-weight: 500;
    color: #3d3e40;
}
.time{
	font-size: 13px;
    font-weight: 400;
    color: #737880;
}
.button{
	display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #ff4132;
    border-radius: 100px 100px 100px 100px;
    font-size: 15px;
    line-height: 15px;
    height: 37px;
    color: #fff;
    font-weight: 900;
    transition: all .2s ease;
}
.button img{
	width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    margin-right: 8px;
}
.list img{
	width: 32px;
	height: 32px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    display: inline-block;
    
}
.button:hover{
	opacity: .5;
}
.list{
	position: relative;
}
.subscribe .list .imgs2{
	position: absolute;
	top: -127px;
	left: -40px;
	display: inline-block;
	width: 124px;
	height: 0;
	overflow: hidden;
	background: #f4f4f4;
	opacity: 0.8;
}
.imgs1:hover +.imgs2{
	height: 124px;
}

运行结果

安度晚分
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
wrh0740的博客
07-10 4952
第一章 MySQL 1. 数据库 1、什么是数据库？ 所谓的数据库就是指存储和管理数据的仓库 2、数据库有哪些分类？ 3、什么是关系型数据库？ 底层以二维表的形式保存数据的库就是关系型数据库 stu-学生表 4、常见的关系型数据库有哪些？ Sql Server：微软提供，收费，适用于一些中型或大型的项目中，在java中的使用占比不高（.NET中使用的较多） Oracle：甲骨文公司提供，收费，适用于一些大型或者超大型的项目中，在java中的使用占比非常高 mysql：瑞典MySQLAB公司提
前端菜鸟是这样入门学习的，点进来！
BOM485480的博客
06-23 325
现在从事IT方向的人有很多。由于Web前端薪资水平高，职业前景广阔，岗位缺口大，就业口径宽，想通过学习Web前端开发从而进入到该行业工作的人越来越多。当然也有很多人在犹豫不知道web前端开发都学哪些内容？零基础的可以学会吗？好不好学. 前端涉及到的东西太多了，自己也很浮躁，看了挺多书，可是代码缺敲得却不多。技术菜，又什么都想学，比如现在纠结要不要先学scss或者php或者angularjs,backbone等框架，还是深入学习html5+css3？ 在我看来前端这20%的东西大概就是常用的html标签，c
仿魅族官网完整源码（html+cssl+JavaScript）
09-19
核心技术：html、css、js； 项目介绍：仿魅族官网是一个使用HTML、CSS和JavaScript开发的网页项目。通过HTML5标准完成网页的排版、布局和响应式设计。包括首页、登录、注册、购物车、商品列表、商品详情等多个页面，实现了精准还原页面设计图，并提供了动画效果和交互功能。 工作内容介绍：  使用HTML、CSS和JavaScript完成网页的布局和排版，兼容各个主流浏览器。  实现响应式布局，确保页面在不同设备上的正常显示和良好用户体验。  使用原生JavaScript完成轮播图、关联滚动等交互功能，提升页面的动态效果。  根据页面设计图精确还原页面的样式和布局，保持页面的一致性和美观性。  负责页面的跳转和按钮点击事件的编写，增加用户的操作交互性。  对页面进行优化和性能调优，提高页面加载速度和用户体验。
HTML5+app开发学习之调试篇
cug-jdc的博客
10-22 4668
HTML5+app开发学习之调试篇 HBuilder对前端代码的调试方式有边改边看、真机运行、模拟器调试、浏览器调试等。
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（中）
十八岁讨厌编程的博客
11-03 7020
本文涉及：使用Vuex实现左侧菜单栏的折叠、Home组件的实现、Echarts基本使用、对axios的二次封装、使用mockjs完成数据模拟等内容。
移动web资源整理
u011337250的博客
05-03 113
【原】移动web资源整理2013年初接触移动端，简单做下总结，首先了解下移动web带来的问题设备更新换代快——低端机遗留下问题、高端机带来新挑战浏览器厂商不统一——兼容问题多网络更复杂——弱网络，页面打开慢低端机性能差——页面操作卡顿HTML5新技术多——学习成本不低未知问题——坑多面对这些问题，一开始我们只能在未知中试错，知道错误的方案才能更容易寻找正确的解决问题思路，2年多来，可看到移动web...
HBuilder学习与使用
qq_40954115的博客
03-16 2731
原文链接：点击打开链接摘要： 设计理念及常用功能 设计理念 HBuilder追求无鼠标的极速操作,有很多的快捷设定,包括语法库/语法结构模型/AST语法分析引擎 HBuilder主要用于开发html/js/css,同时配合HTML的后端脚本语言如php/jsp也可以适用,还有前端的预编译语言如less及markdown都可以良...设计理念及常用功能设计理念HBuilder追求无鼠标的极速操作,有...
Hbuilder 历次版本更新记录
热门推荐
yunzhonghefei的博客
11-18 2万+
HBuilder - Release Notes 7.6.0.201611071800 IDE 【重要】Mac版HBuilder支持iOS10真机运行,解决32位Windows系统下iOS真机运行无法识别手机的问题 解决macOS Sierra系统下HBuilder某些情况下崩溃的问题 添加px转rem的提示功能，可在工具>>选项或右键项目>>属性下的代码助手设置中配置。
小白是这样学习前端Web的
csjsz的博客
06-30 209
现在从事IT方向的人有很多。由于Web前端薪资水平高，职业前景广阔，岗位缺口大，就业口径宽，想通过学习Web前端开发从而进入到该行业工作的人越来越多。当然也有很多人在犹豫不知道web前端开发都学哪些内容？零基础的可以学会吗？好不好学. 前端涉及到的东西太多了，自己也很浮躁，看了挺多书，可是代码缺敲得却不多。技术菜，又什么都想学，比如现在纠结要不要先学scss或者php或者angularjs,backbone等框架，还是深入学习html5+css3？ 在我看来前端这20%的东西大概就是常用的html标签，
仿魅族官网(HTML+CSS)静态界面
11-28
本次设计魅族官网主要运用了HTML和CSS，为方便检查代码，style采用link进行引入，总体设计思想采用大盒子包括小盒子进行。多处使用了float: left;/ float: right;进行左/右浮动。多出使用了定位元素position: ...
html+css网页设计作业.zip
07-20
仿写了魅族的电脑端的官网，运用html+css，实现的源码压缩包。 主要写了首页，详情页，订单页，购物车页，登录页，订单详情页，目的是为了练习布局和样式。 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、...
web期末大作业前端结课大作业仿小米和魅族官网-纯html+css+js项目源码.rar
05-19
本项目是一个基于纯HTML、CSS和JavaScript的Web期末大作业，旨在模仿小米和魅族官网的设计风格和布局。项目源码经过精心设计和优化，运行测试OK，确保了兼容性和稳定性。此外，该项目还提供了详细的课程设计高分资源...
Web前端进阶教程，前端HTML5+CSS3+移动端项目实战（魅族官网+小米+迅雷移动端等）_Web前端零基础全套视频教程
05-22
本课程采用2+5模式，前两天承接HTML+CSS，使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每章节都配备综合案例，学完即练习企业级项目，让小伙伴...
【23】响应式布局教程
程序猿的博客
09-27 1229
**一：布局方式有如下几种： ————** **1. 固定布局**：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点： 1.1.页面很死板，在更大的屏幕上，页面左右2边留白。 1.2.不适应响应性布局。**2. 流式布局**：流式布局是以百分比作为单位的，我们要牢记如下公式： 百分比宽度
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 607
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1180
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1171
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
魅族htmlcss官网
09-21
魅族官网是一个基于HTML和CSS开发的网站，它是魅族公司的官方网站，用于展示和推广魅族手机和其他产品。这个网站的设计简洁、新颖，页面布局合理。使用了大量的HTML和CSS特效，使得整个网站在用户体验和视觉效果上都...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值