本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

麻辣小龙虾

986

文章

645769

访问

+关注

分类

暂无分类

日期归档

2024-11(6)

html+CSS+JS实现小米官网(附全部代码)

发布于2022-05-31 20:25 阅读(4759) 评论(0) 点赞(14) 收藏(5)

文章目录

二、使用步骤
- 1.引入库
总结

前言

本项目所建立的小米官网为高仿,原创不易,麻烦各位多多支持。

一、代码目录

。

二、使用步骤

1.引入库

图标库:

图标库网站:

html代码:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet/less" href="css/123.less" />
		<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
			integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
			crossorigin="anonymous" referrerpolicy="no-referrer" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	</head>
	<body>
		<div class="header">
			<div class="site-topbar">
				<div class="container">
					<div class="topbar-nav">
						<a href="#">小米商城</a>
						<span class="sep">|</span>
						<a href="#">MIUI</a>
						<span class="sep">|</span>
						<a href="#">loT</a>
						<span class="sep">|</span>
						<a href="#">云服务</a>
						<span class="sep">|</span>
						<a href="#">天星数科</a>
						<span class="sep">|</span>
						<a href="#">有品</a>
						<span class="sep">|</span>
						<a href="#">小爱开放平台</a>
						<span class="sep">|</span>
						<a href="#">企业团购</a>
						<span class="sep">|</span>
						<a href="">资质证照</a>
						<span class="sep">|</span>
						<a href="#">协议规则</a>
						<span class="sep">|</span>
						<a href="#">下载app</a>
						<span class="sep">|</span>
						<a href="#">智能生活</a>
						<span class="sep">|</span>
						<a href="">Select Location</a>
					</div>
					<div class="topbar-cart">
						<a href="">
							<i class="fa fa-shopping-cart orange" aria-hidden="true"></i>
							<em class="iconfont-cart"></em>购物车
							<span>(0)</span>
						</a>
					</div>
					<div class="topbar-info">
						<a href="">登录</a>
						<span>|</span>
						<a href="">注册</a>
						<span>|</span>
						<span class="message"><a href="">消息通知</a></span>
					</div>
				</div>
			</div>
 
			<div class="site-header">
				<div class="container">
					<div class="header-logo">
						<a href=""><img src="img/小米.jpg" alt=""></a>
					</div>
					<div class="header-nav">
						<ul class="clearfix">
							<li class="nav-category"><a href=""><span>全部商品分类</span></a>
								<div class="site-category" style="display: block;">
									<ul class="clearfix site-category-list">
										<li><a href="">手机<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li>
										<li><a href="">电视<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li>
										<li><a href="">笔记本 平板<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
										<li><a href="">家电<i class="fa fa-arrow-right" aria-hidden="true"></i></a></li>
										<li><a href="">出行 穿戴<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
										<li><a href="">智能 路由器<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
										<li><a href="">电源 配件<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
										<li><a href="">健康 儿童<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
										<li><a href="">耳机 音箱<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
										<li><a href="">生活 箱包<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
										</li>
									</ul>
								</div>
							</li>
							<li class="nav-item"><a href=""><span>Xiaomi手机</span></a></li>
							<li class="nav-item"><a href=""><span>Redmi红米</span></a></li>
							<li class="nav-item"><a href=""><span>电视</span></a></li>
							<li class="nav-item"><a href=""><span>平板</span></a></li>
							<li class="nav-item"><a href=""><span>家电</span></a></li>
							<li class="nav-item"><a href=""><span>路由器</span></a></li>
							<li class="nav-item"><a href=""><span>服务</span></a></li>
							<li class="nav-item"><a href=""><span>社区</span></a></li>
						</ul>
					</div>
					<div class="header-search">
						<form action="" class="clearfix">
 
							<a href="#"><input type="search" class="search-header" placeholder="手机"></a>
							<a href="#"><input type="submit" class="search-btn" value=""><i class="fa fa-search"
									aria-hidden="true"></i></a>
						</form>
					</div>
				</div>
			</div>
		</div>
 
		<div class="home-hero-container container">
			<div class="home-hero">
				<div class="swiper">
					<ul id="unit">
						<li><a href=""><img src="img/note11.jpg" alt=""></a></li>
						<li><a href=""><img src="img/年终盛典.jpg" alt=""></a></li>
						<li><a href=""><img src="img/小米笔记本.jpg" alt=""></a></li>
						<li><a href=""><img src="img/智能门铃.jpg" alt=""></a></li>
					</ul>
 
					<div class="Btn">
						<a href="javascript:void(0)" id="leftBtn" class="leftBtn">&lt;</a>
						<a href="javascript:void(0)" id="rightBtn" class="rightBtn">&gt;</a>
					</div>
 
					<div class="circles" id="circles">
						<ol>
							<li class="cur"></li>
							<li></li>
							<li></li>
							<li></li>
 
						</ol>
					</div>
				</div>
				<div class="home-hero-sub">
					<div class="span4">
						<ul class="clearfix">
							<li><a href="#"><img src="img/保障服务.png" alt="">保障服务</a></li>
							<li><a href="#"><img src="img/企业团购.png" alt="">企业团购</a></li>
							<li><a href="#"><img src="img/以旧换新.png" alt="">F码通道</a></li>
							<li><a href="#"><img src="img/米粉卡.png" alt="">米粉卡</a></li>
							<li><a href="#"><img src="img/以旧换新.png" alt="">以旧换新</a></li>
							<li><a href="#"><img src="img/话费充值.png" alt="">话费充值</a></li>
						</ul>
					</div>
					<div class="span16">
						<ul class="clearfix">
							<li class="first"><a href=""><img src="img/11Ultra.jpg" alt=""></a></li>
							<li><a href=""><img src="img/MIX FOLD.jpg" alt=""></a></li>
							<li><a href=""><img src="img/Redmi Buds3.jpg" alt=""></a></li>
						</ul>
					</div>
				</div>
 
 
			</div>
			<div class="tools" id="tools">
				<a href=""><i class="fa fa-mobile" aria-hidden="true"></i>
					<h3>手机APP</h3>
					<div class="pop-content">
						<img src="img/关注小米二维码.png" alt="">
						<span>
							扫码领取新人百元礼包
						</span>
					</div>
				</a>
				<a href=""><i class="fa fa-user" aria-hidden="true"></i>
					<h3>个人中心</h3>
				</a>
				<a href=""><i class="fa fa-wrench" aria-hidden="true"></i>
					<h3>售后服务</h3>
				</a>
				<a href=""><i class="fa fa-headphones" aria-hidden="true"></i>
					<h3>人工客服</h3>
				</a>
				<a href=""><i class="fa fa-shopping-cart orange" aria-hidden="true"></i>
					<h3>购物车</h3>
				</a>
				<a href="#top" id="to" style="display: none;"><i class="fa fa-arrow-up" aria-hidden="true"></i>
					<h3>回顶部</h3>
				</a>
			</div>
 
		</div>
 
		<div class="page-main">
			<div class="container">
				<div class="home-banner-box">
					<a href=""><img src="img/K40.jpg" alt=""></a>
				</div>
				<div class="home-brick-box">
					<div class="box-hd">
						<h2 class="title">手机</h2>
						<div class="more">
							<a href="">查看更多<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
						</div>
					</div>
					<div class="box-bd clearfix">
						<div class="row ">
							<div class="span4">
								<ul class="clearfix">
									<li class="brick-item">
										<a href="">
											<img src="img/LongMix.jpg" alt="">
										</a>
									</li>
								</ul>
							</div>
							<div class="span16 ">
								<ul class="clearfix">
									<li class="brick-item "><a href="">
											<div class="figure"><img src="img/Redmi11%20pro.jpg" alt=""></div>
											<h3 class="title">Redmi Note 11 Pro系列</h3>
											<p class="desc">Redmi Note 11 Pro系列</p>
											<p class="price">1799<span class="num">元</span><span>起</span></p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/Redmi%20Note%2011.jpg" alt=""></div>
											<h3 class="title">Redmi Note 11 5G</h3>
											<p class="desc">5000mAh大电量</p>
											<p class="price">1199<span class="num">元</span><span>起</span></p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/黑鲨4s.jpg" alt=""></div>
											<h3 class="title">黑鲨4S</h3>
											<p class="desc">磁动力升降肩键</p>
											<p class="price">2699<span class="num">元</span><span>起</span></p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/黑鲨4spro.jpg" alt=""></div>
											<h3 class="title">黑鲨4S Pro</h3>
											<p class="desc">磁动力升降肩键</p>
											<p class="price">4799<span class="num">元</span><span>起</span></p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/小米CIVI.jpg" alt=""></div>
											<h3 class="title">Xiaomi Civi</h3>
											<p class="desc">3200万高清质感自拍</p>
											<p class="price">2599<span class="num">元</span><span>起</span></p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/SmallMix.jpg" alt=""></div>
											<h3 class="title">Xiaomi MIX 4</h3>
											<p class="desc">CUP全面屏</p>
											<p class="price"><span class="num">4999</span>元<span>起</span></p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/note10pro.jpg" alt=""></div>
											<h3 class="title">Redmi Note 10 Pro</h3>
											<p class="desc">天玑1100年度旗舰芯</p>
											<p class="price">1499<span class="num">元</span><span>起</span><del
													style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">4999元</del>
											</p>
										</a></li>
									<li class="brick-item"><a href="">
											<div class="figure"><img src="img/SmallMix.jpg" alt=""></div>
											<h3 class="title">Redmi Note 10 5G</h3>
											<p class="desc">5G小金刚|旗舰长续航</p>
											<p class="price">1099<span class="num">元</span><span>起</span><del
													style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">1699元</del>
											</p>
										</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="home-brick-row">
						<div class="box-hd clearfix">
							<h2 class="title">智能穿戴</h2>
							<div class="more">
								<ul class="tab-list">
									<li class="tab-active">热门</li>
									<li>穿戴</li>
								</ul>
							</div>
						</div>
						<div class="box-bd clearfix">
							<div class="row ">
								<div class="span4">
									<ul class="clearfix">
										<li class="brick-item">
											<a href="">
												<img src="img/watch.jpg" alt="">
											</a>
										</li>
									</ul>
								</div>
								<div class="span16 ">
									<ul class="clearfix">
										<li class="brick-item "><a href="">
												<div class="figure"><img src="img/手表2.jpg" alt=""></div>
												<h3 class="title">Redmi 手表 2</h3>
												<p class="desc">AMOLED高清大屏</p>
												<p class="price">389<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/手环6.jpg" alt=""></div>
												<h3 class="title">小米手环</h3>
												<p class="desc">全屏实力</p>
												<p class="price">249<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/手表.jpg" alt=""></div>
												<h3 class="title">Redmi 手表</h3>
												<p class="desc">磁吸式充电</p>
												<p class="price">169<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/耳机3.jpg" alt=""></div>
												<h3 class="title">Redmi AirDots 3很无线蓝牙耳机</h3>
												<p class="desc">圈铁音质,超长续航</p>
												<p class="price">199<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/耳机3Pro.jpg" alt=""></div>
												<h3 class="title">小米Buds 青春版</h3>
												<p class="desc">轻巧无线 持久动听</p>
												<p class="price">199<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/耳机3Pro青春.jpg" alt=""></div>
												<h3 class="title">Xiaomi MIX 4</h3>
												<p class="desc">CUP全面屏</p>
												<p class="price">99<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/Air耳机.jpg" alt=""></div>
												<h3 class="title">Redmi Buds 3 半入耳无线耳机</h3>
												<p class="desc">轻巧入耳,舒适有天分</p>
												<p class="price">299<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del>
												</p>
											</a></li>
										<li class="brick-item-s ">
											<a href="">
												<div class="figure">
													<i class="fa fa-arrow-right" aria-hidden="true"></i>
												</div>
												<div class="more">浏览更多<small>热门</small></div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="home-brick-row-box">
						<div class="box-hd clearfix">
							<h2 class="title">家电</h2>
							<div class="more">
								<ul class="tab-list">
									<li class="tab-active">热门</li>
									<li>电视影音</li>
								</ul>
							</div>
						</div>
						<div class="box-bd clearfix">
							<div class="row ">
								<div class="span4">
									<ul class="clearfix">
										<li class="brick-item">
											<a href="">
												<img src="img/电视6.jpg" alt="">
											</a>
										</li>
										<li class="brick-item">
											<a href="">
												<img src="img/电视77.jpg" alt="">
											</a>
										</li>
									</ul>
								</div>
								<div class="span16 ">
									<ul class="clearfix">
										<li class="brick-item "><a href="">
												<div class="figure"><img src="img/电视6D.jpg" alt=""></div>
												<h3 class="title">小米电视6 65” OLED</h3>
												<p class="desc">小米电视6 65” OLED</p>
												<p class="price">6999<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/电视6至尊.jpg" alt=""></div>
												<h3 class="title">小米电视6 至尊版 65英寸</h3>
												<p class="desc">小米电视6 至尊版 65英寸</p>
												<p class="price">7999<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/电视2022.jpg" alt=""></div>
												<h3 class="title">小米电视 ES55 2022款</h3>
												<p class="desc">小米电视 ES55 2022款</p>
												<p class="price">2999<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/冰箱.jpg" alt=""></div>
												<h3 class="title">米家互联网对开门冰箱 540L</h3>
												<p class="desc">米家互联网对开门冰箱 540L</p>
												<p class="price">2899<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/电磁炉.jpg" alt=""></div>
												<h3 class="title">米家超薄电磁炉</h3>
												<p class="desc">米家超薄电磁炉</p>
												<p class="price">499<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人.jpg" alt=""></div>
												<h3 class="title">米家集尘扫拖机器人</h3>
												<p class="desc">米家集尘扫拖机器人</p>
												<p class="price">2999<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/洗衣机.jpg" alt=""></div>
												<h3 class="title">Redmi全自动波轮洗衣机1A 8kg</h3>
												<p class="desc">Redmi全自动波轮洗衣机1A 8kg</p>
												<p class="price">849<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del>
												</p>
											</a></li>
										<li class="brick-item-a">
											<a href="">
												<div class="figure"><img width="80" height="80" alt="米家电烤箱"
														data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1612c93ad4756215774a0dbec7a81bb2.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"
														src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1612c93ad4756215774a0dbec7a81bb2.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"
														lazy="loaded">
 
												</div>
												<h3 class="title">米家烤电箱</h3>
												<p class="price"><span>299元</span></p>
											</a>
										</li>
										<li class="brick-item-s ">
											<a href="">
												<div class="figure">
													<i class="fa fa-arrow-right" aria-hidden="true"></i>
												</div>
												<div class="more">浏览更多<small>热门</small></div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="home-brick-row-box">
						<div class="box-hd clearfix">
							<h2 class="title">生活电器</h2>
							<div class="more">
								<ul class="tab-list">
									<li class="tab-active">扫地机</li>
									<li>空净</li>
									<li>清洁</li>
									<li>风扇</li>
								</ul>
							</div>
						</div>
						<div class="box-bd clearfix">
							<div class="row ">
								<div class="span4">
									<ul class="clearfix">
										<li class="brick-item">
											<a href="">
												<img src="img/净化器4.jpg" alt="">
											</a>
										</li>
										<li class="brick-item">
											<a href="">
												<img src="img/拖地机器人.jpg" alt="">
											</a>
										</li>
									</ul>
								</div>
								<div class="span16 ">
									<ul class="clearfix">
										<li class="brick-item "><a href="">
												<div class="figure"><img src="img/拖地机器人2Pro.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 2Pro</h3>
												<p class="desc">米家扫拖机器人 2Pro</p>
												<p class="price">2699<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/拖地机器人2.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 2</h3>
												<p class="desc">米家扫拖机器人 2</p>
												<p class="price">1599<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人.jpg" alt=""></div>
												<h3 class="title">米家集尘扫拖机器人</h3>
												<p class="desc">米家集尘扫拖机器人</p>
												<p class="price">1799<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人1T.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 2C</h3>
												<p class="desc">米家扫拖机器人 2C</p>
												<p class="price">1299<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人2C.jpg" alt=""></div>
												<h3 class="title">米家扫地机器人1S</h3>
												<p class="desc">米家扫地机器人1S</p>
												<p class="price">1199<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人1S.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 G1</h3>
												<p class="desc">米家扫拖机器人 G1</p>
												<p class="price">2199<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人G1.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人1T</h3>
												<p class="desc">米家扫拖机器人1T</p>
												<p class="price">2299<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del>
												</p>
											</a></li>
										<li class="brick-item-a">
											<a href="">
												<div class="figure"><img width="80" height="80" alt="米家扫拖机器人 Pro"
														data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"
														src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"
														lazy="loaded">
 
												</div>
												<h3 class="title">米家扫拖机器人 Pro</h3>
												<p class="price"><span>299元</span></p>
											</a>
										</li>
										<li class="brick-item-s ">
											<a href="">
												<div class="figure">
													<i class="fa fa-arrow-right" aria-hidden="true"></i>
												</div>
												<div class="more">浏览更多<small>热门</small></div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="home-banner-box">
						<a href=""><img src="img/门铃.jpg" alt=""></a>
					</div>
					<div class="home-brick-row-box">
						<div class="box-hd clearfix">
							<h2 class="title">生活电器</h2>
							<div class="more">
								<ul class="tab-list">
									<li class="tab-active">扫地机</li>
									<li>空净</li>
									<li>清洁</li>
									<li>风扇</li>
								</ul>
							</div>
						</div>
						<div class="box-bd clearfix">
							<div class="row ">
								<div class="span4">
									<ul class="clearfix">
										<li class="brick-item">
											<a href="">
												<img src="img/净化器4.jpg" alt="">
											</a>
										</li>
										<li class="brick-item">
											<a href="">
												<img src="img/拖地机器人.jpg" alt="">
											</a>
										</li>
									</ul>
								</div>
								<div class="span16 ">
									<ul class="clearfix">
										<li class="brick-item "><a href="">
												<div class="figure"><img src="img/拖地机器人2Pro.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 2Pro</h3>
												<p class="desc">米家扫拖机器人 2Pro</p>
												<p class="price">2699<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">399元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/拖地机器人2.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 2</h3>
												<p class="desc">米家扫拖机器人 2</p>
												<p class="price">1599<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人.jpg" alt=""></div>
												<h3 class="title">米家集尘扫拖机器人</h3>
												<p class="desc">米家集尘扫拖机器人</p>
												<p class="price">1799<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人1T.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 2C</h3>
												<p class="desc">米家扫拖机器人 2C</p>
												<p class="price">1299<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">99元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人2C.jpg" alt=""></div>
												<h3 class="title">米家扫地机器人1S</h3>
												<p class="desc">米家扫地机器人1S</p>
												<p class="price">1199<span class="num">元</span></p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人1S.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人 G1</h3>
												<p class="desc">米家扫拖机器人 G1</p>
												<p class="price">2199<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">59元</del>
												</p>
											</a></li>
										<li class="brick-item"><a href="">
												<div class="figure"><img src="img/扫地机器人G1.jpg" alt=""></div>
												<h3 class="title">米家扫拖机器人1T</h3>
												<p class="desc">米家扫拖机器人1T</p>
												<p class="price">2299<span class="num">元</span><del
														style="margin-left: 10px;color: #b0b0b0;font-size: 10px;">199元</del>
												</p>
											</a></li>
										<li class="brick-item-a">
											<a href="">
												<div class="figure"><img width="80" height="80" alt="米家扫拖机器人 Pro"
														data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"
														src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d910c9c340274064a1e784e1d371ce5.jpg?thumb=1&amp;w=124&amp;h=124&amp;f=webp&amp;q=90"
														lazy="loaded">
 
												</div>
												<h3 class="title">米家扫拖机器人 Pro</h3>
												<p class="price"><span>299元</span></p>
											</a>
										</li>
										<li class="brick-item-s ">
											<a href="">
												<div class="figure">
													<i class="fa fa-arrow-right" aria-hidden="true"></i>
												</div>
												<div class="more">浏览更多<small>热门</small></div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
 
		<div>
			<div class="site-footer">
				<div class="container">
					<div class="footer-service">
						<ul class="list-service clearfix">
							<li><a href=""><i class="fa fa-wrench" aria-hidden="true"></i>预约维修服务</a></li>
							<li><a href=""><i class="fa fa-slideshare" aria-hidden="true"></i>7天无理由退货</a></li>
							<li><a href=""><i class="fa fa-header" aria-hidden="true"></i>15天免费换货</a></li>
							<li><a href=""><i class="fa fa-gift" aria-hidden="true"></i>满69包邮</a></li>
							<li><a href=""><i class="fa fa-map-marker" aria-hidden="true"></i>520余家售后网点</a></li>
						</ul>
					</div>
					<div class="footer-links clearfix">
						<dl>
							<dt>帮助中心</dt>
							<dd>
								<a href="">
									账户管理
								</a>
							</dd>
 
							<dd>
								<a href="">
									购物指南
								</a>
							</dd>
							<dd>
								<a href="">
									订单操作
								</a>
							</dd>
 
						</dl>
						<dl>
							<dt>
 
								服务支持
 
							</dt>
							<dd>
								<a href="">
									售后政策
								</a>
							</dd>
							<dd>
								<a href="">
									自助服务
								</a>
							</dd>
							<dd>
								<a href="">
									相关下载
								</a>
							</dd>
 
						</dl>
						<dl>
							<dt>
 
								线下门店
 
							</dt>
							<dd>
								<a href="">
									小米之家
								</a>
							</dd>
							<dd>
								<a href="">
									服务网点
								</a>
							</dd>
							<dd>
								<a href="">
									授权体验店/专区
								</a>
							</dd>
 
						</dl>
						<dl>
							<dt>
 
								关于小米
 
							</dt>
							<dd>
								<a href="">
									了解小米
								</a>
							</dd>
							<dd>
								<a href="">
									加入小米
								</a>
							</dd>
							<dd>
								<a href="">
									投资者关系
								</a>
							</dd>
							<dd>
								<a href="">
									企业社会责任
								</a>
							</dd>
							<dd>
								<a href="">
									廉洁举报
								</a>
							</dd>
 
						</dl>
						<dl>
							<dt>
								<a href="">
									关注我们
								</a>
							</dt>
							<dd>
								<a href="">
									新浪微博
								</a>
							</dd>
							<dd>
								<a href="">
									官方微信
								</a>
							</dd>
							<dd>
								<a href="">
									廉洁举报
								</a>
							</dd>
							<dd>
								<a href="">
									联系我们
								</a>
							</dd>
 
						</dl>
						<dl>
							<dt>
 
								特色服务
 
							</dt>
							<dd>
								<a href="">
									F码通道
								</a>
							</dd>
							<dd>
								<a href="">
									礼物码
								</a>
							</dd>
							<dd>
								<a href="">
									防伪查询
								</a>
							</dd>
 
						</dl>
						<div class="col-contact">
							<p class="phone">400-100-5678</p>
							<p>8:00-18:00 (仅收市话费)</p>
							<a href="" class="spa"><i class="fa fa-commenting-o" aria-hidden="true"></i>人工客服</a>
							<div class="follow">
								关注小米:
								<a href=""><i class="fa fa-weibo" aria-hidden="true"></i></a>
								<a href=""><i class="fa fa-weixin" aria-hidden="true"></i><img src="img/关注小米二维码.png"
										alt=""></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		<div class="site-info">
			<div class="container">
			<div class="logo"><img src="img/小米.jpg" alt="" style="background-color: #fafafa;"></div>
			<div class="info-text">
				<p class="sites">
					<a href="">小米商城</a>
					<span>|</span>
					<a href="">MIUI</a>
					<span>|</span>
					<a href="">米家</a>
					<span>|</span>
					<a href="">米聊</a>
					<span>|</span>
					<a href="">多看</a>
					<span>|</span>
					<a href="">游戏</a>
					<span>|</span>
					<a href="">政企服务</a>
					<span>|</span>
					<a href="">小米天猫店</a>
					<span>|</span>
					<a href="">小米集团隐私政策</a>
					<span>|</span>
					<a href="">小米公司儿童信息保护规则</a>
					<span>|</span>
					<a href="">小米商城隐私政策</a>
					<span>|</span>
					<a href="">小米商城用户协议</a>
					<span>|</span>
					<a href="">问题反馈</a>
					
				</p>
				<p class="sites">
					<a href="">北京互联网法院法律服务工作站</a>
					<span>|</span>
					<a href="">中国消费者协会</a>
					<span>|</span>
					<a href="">北京市消费者协会</a>
				</p>
				<p>
					<a href="">@mi.com</a>
					<span>京ICP证110507号</span>
					<a href="">京ICP备10046444号</a>
					<a href="">京公网安备11010802020134号</a>
					<a href="">京网文[2020]0276-042号</a><br>
					<a href="">(京)网械平台备字（2018）第00005号</a>
					<a href="">互联网药品信息服务资格证(京)-非经营性-2014-0090</a>
					<a href="">营业执照</a>
					<a href="">医疗器械质量公告</a><br>
					<a href="">增值电信业务许可证</a>
					<span>网络食品经营备案</span>
					<span>京食药网食备202010048</span>
					<a href="">食品经营许可证</a><br>
					<span>违法和不良信息举报电话：171-5104-4404</span>
					<a href="">知识产权侵权投诉</a>
					<span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
				</p>
				<div class="info-links">
					<a href=""><img src="img/隐私认证.png" alt=""></a>
					<a href=""><img src="img/诚信网站.png" alt=""></a>
					<a href=""><img src="img/可信网站.png" alt=""></a>
					<a href=""><img src="img/诚信经营.png" alt=""></a>
					<a href=""><img src="img/网站安全.png" alt=""></a>
				</div>
				<div class="slogan">
					<i>让全球每个人都能享受科技带来的美好生活</i>
				</div>
			</div>
		</div>
		</div>
		</div>
 
		
	</body>
</html>

css代码:


* {
  margin: 0;
  padding: 0;
}
body {
  font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
a {
  text-decoration: none;
}
div {
  display: block;
}
ul {
  list-style: none;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.container {
  width: 1226px;
  margin: 0 auto;
  position: relative;
}
.header {
  display: block;
}
.header .site-topbar {
  position: relative;
  z-index: 30;
  height: 40px;
  font-size: 12px;
  color: #b0b0b0;
  background: #333;
}
.header .site-topbar .topbar-nav {
  float: left;
  height: 40px;
  line-height: 40px;
}
.header .site-topbar .topbar-nav a {
  color: #b0b0b0;
  line-height: 40px;
  display: inline-block;
}
.header .site-topbar .topbar-nav .sep {
  margin: 0 0.3em;
  color: #424242;
}
.header .site-topbar .topbar-cart {
  position: relative;
  float: right;
  width: 120px;
  height: 40px;
  margin-left: 15px;
  transition: all 0.2s;
  font-size: 12px;
}
.header .site-topbar .topbar-cart a {
  position: relative;
  z-index: 32;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #b0b0b0;
  background: #424242;
}
.header .site-topbar .topbar-cart a .iconfont-cart {
  margin-right: 4px;
  font-size: 20px;
  line-height: 20px;
  vertical-align: -4px;
}
.header .site-topbar .topbar-cart a span {
  line-height: 40px;
  text-align: center;
  color: #b0b0b0;
}
.header .site-topbar .topbar-info {
  position: relative;
  float: right;
  height: 40px;
  line-height: 40px;
}
.header .site-topbar .topbar-info a {
  padding: 0 5px;
  text-align: center;
  float: left;
  color: #b0b0b0;
  line-height: 40px;
  display: inline-block;
}
.header .site-topbar .topbar-info span {
  margin: 0;
  float: left;
  color: #424242;
}
.header .site-topbar .topbar-info .message {
  float: left;
  padding: 0 10px;
}
.header .site-topbar .topbar-info .message a {
  color: #b0b0b0;
  line-height: 40px;
  display: inline-block;
  text-align: none;
}
.header .site-header {
  position: relative;
  z-index: 20;
  height: 100px;
}
.header .site-header .header-logo {
  float: left;
  width: 62px;
  margin-top: 22px;
}
.header .site-header .header-logo a {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  text-align: left;
  color: #757575;
}
.header .site-header .header-logo a img {
  padding-bottom: 2px;
  position: absolute;
  top: 0;
  left: -8px;
  z-index: 1;
  width: 69px;
  height: 58px;
}
.header .site-header .header-nav {
  float: left;
  width: 850px;
}
.header .site-header .header-nav ul {
  position: relative;
  z-index: 10;
  float: left;
  width: 1100px;
  height: 88px;
  margin: 0;
  padding: 12px 0 0 30px;
  font-style: 16px;
}
.header .site-header .header-nav ul .nav-category {
  position: relative;
  float: left;
  width: 127px;
  height: 548px;
  padding-right: 15px;
}
.header .site-header .header-nav ul .nav-category a {
  display: block;
  padding: 3px 0 38px;
  color: #333;
}
.header .site-header .header-nav ul .nav-category a span {
  color: #333;
  visibility: hidden;
}
.header .site-header .header-nav ul .nav-category .site-category {
  position: absolute;
  top: 88px;
  left: -92px;
  z-index: 21;
  width: 234px;
  height: 460px;
  font-size: 14px;
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list {
  margin: 0;
  padding: 20px 0;
  height: 420px;
  border: 0;
  color: #fff;
  width: 234px;
  background-color: rgba(105, 101, 101, 0.6);
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list li {
  height: 42px;
  color: #fff;
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list li a {
  color: #fff;
  position: relative;
  display: block;
  padding-left: 30px;
  height: 42px;
  line-height: 42px;
}
.header .site-header .header-nav ul .nav-category .site-category .site-category-list li a .fa-arrow-right {
  position: absolute;
  top: 12px;
  right: 20px;
  line-height: 16px;
  color: #e0e0e0;
}
.header .site-header .header-nav ul .nav-item {
  float: left;
}
.header .site-header .header-nav ul .nav-item a {
  display: block;
  padding: 26px 14px 38px;
  color: #333;
  transition: color 0.2s;
}
.header .site-header .header-nav ul .nav-item a span {
  color: #333;
}
.header .site-header .header-search {
  float: right;
  width: 296px;
  margin-top: 25px;
}
.header .site-header .header-search form {
  position: relative;
  width: 296px;
  height: 50px;
  z-index: 20;
  display: block;
}
.header .site-header .header-search form a:nth-child(1) {
  color: #333;
}
.header .site-header .header-search form a:nth-child(1) .search-header {
  position: absolute;
  top: 0;
  right: 51px;
  z-index: 1;
  width: 223px;
  height: 60px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 48px;
  border: 1px solid #e0e0e0;
  outline: 0;
  transition: all 0.2s;
}
.header .site-header .header-search form a:nth-child(2) {
  color: #333;
}
.header .site-header .header-search form a:nth-child(2) .search-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 52px;
  height: 60px;
  padding: 0 10px;
  font-size: 24px;
  line-height: 24px;
  color: #616161;
  border: 1px solid #e0e0e0;
  outline: 0;
  transition: all 0.2s;
  background: #fff;
}
.header .site-header .header-search form a:nth-child(2) i {
  position: absolute;
  top: 22px;
  right: 18px;
  z-index: 3;
  transform: scale(1.5);
}
.home-hero-container {
  position: relative;
  z-index: 10;
}
.home-hero-container .home-hero {
  position: relative;
  margin-bottom: 206px;
}
.home-hero-container .home-hero .swiper {
  position: relative;
  overflow: hidden;
  width: 1226px;
  height: 460px;
}
.home-hero-container .home-hero .swiper ul {
  position: relative;
  width: 8000px;
}
.home-hero-container .home-hero .swiper ul li {
  float: left;
}
.home-hero-container .home-hero .swiper ul li a img {
  display: block;
  width: 1226px;
  height: 460px;
}
.home-hero-container .home-hero .Btn a {
  position: absolute;
  top: 40%;
  left: 244px;
  margin-left: -10px;
  font-size: 50px;
  color: #b0b0b0;
  text-align: center;
  opacity: 0.8;
  outline: none;
  padding-bottom: 5px;
}
.home-hero-container .home-hero .Btn a:hover {
  background-color: gray;
}
.home-hero-container .home-hero .Btn .rightBtn {
  left: 97.7%;
}
.home-hero-container .home-hero .circles {
  position: absolute;
  left: 95%;
  bottom: 15px;
  height: 10px;
  margin-left: -30px;
  background-color: rgba(222, 222, 222, 0.4);
  padding: 5px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.home-hero-container .home-hero .circles ol {
  list-style: none;
}
.home-hero-container .home-hero .circles ol li {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  margin-right: 5px;
}
.home-hero-container .home-hero .circles ol .cur {
  background-color: red;
}
.home-hero-container .home-hero .home-hero-sub {
  margin-top: 14px;
  margin-left: -14px;
}
.home-hero-container .home-hero .home-hero-sub .span4 {
  width: 234px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul {
  margin: 0;
  padding: 3px;
  font-size: 12px;
  text-align: center;
  background: #5f5750;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li {
  position: relative;
  float: left;
  width: 70px;
  height: 82px;
  padding: 0 3px;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li a {
  display: block;
  padding-top: 18px;
  text-overflow: ellipsis;
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li a img {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  border: 0;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li::before {
  position: absolute;
  content: "";
  background: #665e57;
  top: -1px;
  left: 6px;
  width: 64px;
  height: 1px;
}
.home-hero-container .home-hero .home-hero-sub .span4 ul li::after {
  position: absolute;
  content: "";
  background: #665e57;
  top: 6px;
  left: 0;
  width: 1px;
  height: 70px;
}
.home-hero-container .home-hero .home-hero-sub .span16 {
  width: 978px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul {
  margin: 0;
  padding: 0;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul .first {
  margin-left: 0;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul li {
  margin-left: 15px;
  float: left;
  width: 316px;
  height: 170px;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul li a {
  display: block;
  height: 170px;
  color: #757575;
}
.home-hero-container .home-hero .home-hero-sub .span16 ul li a img {
  display: block;
  width: 316px;
  height: 170px;
}
.home-hero-container .tools {
  position: fixed;
  right: 0;
  top: 200px;
  left: auto;
  color: #757575;
  width: 100px;
  height: 200px;
  background-color: gray;
}
.home-hero-container .tools a {
  cursor: default;
  color: #757575;
  padding-top: 20px;
  text-decoration: none;
  position: relative;
  display: block;
  margin-top: -1px;
  background-color: #fff;
  border: 1px solid #f5f5f5;
  text-align: center;
}
.home-hero-container .tools a i {
  transform: scale(2);
  opacity: 0.6;
}
.home-hero-container .tools a h3 {
  opacity: 0.6;
  padding-top: 15px;
  padding-bottom: 15px;
}
.home-hero-container .tools a:hover {
  color: orangered;
}
.home-hero-container .tools a:hover .pop-content {
  opacity: 1;
  visibility: visible;
}
.home-hero-container .tools a .pop-content {
  position: absolute;
  left: -150px;
  top: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #f5f5f5;
  transition: opacity 0.3s;
  transform: translateZ(0);
  opacity: 0;
  visibility: hidden;
}
.home-hero-container .tools a .pop-content img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 6px auto;
}
.home-hero-container .tools a .pop-content span {
  display: block;
  width: 82px;
  margin: 14px auto 0;
  color: #757575;
  text-align: center;
}
.page-main {
  padding-top: 4px;
  padding-bottom: 12px;
  background: #f5f5f5;
}
.page-main .home-banner-box {
  height: 120px;
  margin: 22px 0;
  overflow: hidden;
}
.page-main .home-banner-box a {
  color: #757575;
}
.page-main .home-banner-box a img {
  width: 1226px;
  height: 120px;
  -webkit-aspect-ratio: auto 10.21666667;
}
.page-main .home-brick-box {
  margin-bottom: 8px;
}
.page-main .home-brick-box .box-hd {
  position: relative;
  height: 58px;
}
.page-main .home-brick-box .box-hd .title {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.page-main .home-brick-box .box-hd .more {
  position: absolute;
  top: 0;
  right: 0;
}
.page-main .home-brick-box .box-hd .more a {
  font-size: 16px;
  line-height: 58px;
  color: #424242;
  transition: all 0.4s;
}
.page-main .home-brick-box .box-hd .more a i {
  opacity: 0.3;
}
.page-main .home-brick-box .box-bd .row {
  margin-left: -14px;
}
.page-main .home-brick-box .box-bd .row .span4 {
  width: 234px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main .home-brick-box .box-bd .row .span4 ul {
  margin: 0 0 -14px -14px;
  height: 614px;
  padding: 0;
}
.page-main .home-brick-box .box-bd .row .span4 ul .brick-item {
  height: 614px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
}
.page-main .home-brick-box .box-bd .row .span4 ul .brick-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.page-main .home-brick-box .box-bd .row .span4 ul .brick-item a img {
  width: 234px;
  height: 614px;
  border: 0;
}
.page-main .home-brick-box .box-bd .row .span16 {
  width: 978px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main .home-brick-box .box-bd .row .span16 ul {
  margin: 0 0 -14px -14px;
  width: 992px;
  height: 614px;
  padding: 0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
  height: 300px;
  padding: 0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .figure {
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .figure img {
  width: 160px;
  height: 160px;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .title {
  margin: 0 10px 2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .desc {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 10px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
}
.page-main .home-brick-box .box-bd .row .span16 ul .brick-item a .price {
  margin: 0 10px 14px;
  text-align: center;
  color: #ff6700;
}
.page-main .home-brick-box .home-brick-row {
  margin-bottom: 8px;
}
.page-main .home-brick-box .home-brick-row .box-hd {
  position: relative;
  height: 58px;
}
.page-main .home-brick-box .home-brick-row .box-hd .title {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.page-main .home-brick-box .home-brick-row .box-hd .more {
  position: absolute;
  right: 0;
  top: 0;
}
.page-main .home-brick-box .home-brick-row .box-hd .more .tab-list {
  margin: 0;
  padding: 16px 0;
  font-size: 16px;
}
.page-main .home-brick-box .home-brick-row .box-hd .more .tab-list .tab-active {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
.page-main .home-brick-box .home-brick-row .box-hd .more .tab-list li {
  cursor: pointer;
  margin: 0 0 0 30px;
  display: inline-block;
  padding: 0;
  color: #424242;
  transition: border 0.3s;
}
.page-main .home-brick-box .home-brick-row .box-bd .row {
  margin-left: -14px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 {
  width: 234px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul {
  margin: 0 0 -14px -14px;
  height: 614px;
  padding: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul .brick-item {
  height: 614px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul .brick-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span4 ul .brick-item a img {
  width: 234px;
  height: 614px;
  border: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 {
  width: 978px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul {
  margin: 0 0 -14px -14px;
  width: 992px;
  height: 614px;
  padding: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
  height: 300px;
  padding: 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .figure {
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .figure img {
  width: 160px;
  height: 160px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .title {
  margin: 0 10px 2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .desc {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 10px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item a .price {
  margin: 0 10px 14px;
  text-align: center;
  color: #ff6700;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s {
  height: 93px;
  padding-top: 50px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .figure {
  position: absolute;
  right: 35px;
  top: 48px;
  width: 48px;
  height: 48px;
  color: #ff6700;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .figure .fa {
  transform: scale(1.5);
  text-align: center;
  background: rgba(200, 191, 194, 0.6);
  border-radius: 50%;
  color: orangered;
  padding: 10px;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .more {
  display: block;
  margin: 0 110px 0 30px;
  font-size: 18px;
  color: #333;
}
.page-main .home-brick-box .home-brick-row .box-bd .row .span16 ul .brick-item-s a .more small {
  display: block;
  font-size: 12px;
  color: #757575;
}
.page-main .home-brick-box .home-brick-row-box {
  margin-bottom: 8px;
}
.page-main .home-brick-box .home-brick-row-box .box-hd {
  position: relative;
  height: 58px;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .title {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more {
  position: absolute;
  right: 0;
  top: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more .tab-list {
  margin: 0;
  padding: 16px 0;
  font-size: 16px;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more .tab-list .tab-active {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-hd .more .tab-list li {
  cursor: pointer;
  margin: 0 0 0 30px;
  display: inline-block;
  padding: 0;
  color: #424242;
  transition: border 0.3s;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row {
  margin-left: -14px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 {
  width: 234px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul {
  margin: 0 0 -14px -14px;
  height: 614px;
  padding: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul .brick-item {
  height: 300px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul .brick-item a {
  display: block;
  width: 100%;
  height: 100%;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span4 ul .brick-item a img {
  width: 234px;
  height: 300px;
  border: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 {
  width: 978px;
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul {
  margin: 0 0 -14px -14px;
  width: 992px;
  height: 614px;
  padding: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
  height: 300px;
  padding: 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .figure {
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .figure img {
  width: 160px;
  height: 160px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .title {
  margin: 0 10px 2px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .desc {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 10px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item a .price {
  margin: 0 10px 14px;
  text-align: center;
  color: #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a {
  height: 93px;
  padding-top: 50px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a a .figure {
  position: absolute;
  right: 20px;
  top: 32px;
  width: 80px;
  height: 80px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a a .title {
  color: #333;
  margin: -10px 110px 5px 30px;
  font-size: 14px;
  font-weight: 400;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-a a .price {
  margin: 0 110px 0 30px;
  font-size: 12px;
  color: #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s {
  height: 93px;
  padding-top: 50px;
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  transition: all 0.2s linear;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .figure {
  position: absolute;
  right: 35px;
  top: 48px;
  width: 48px;
  height: 48px;
  color: #ff6700;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .figure .fa {
  transform: scale(1.5);
  text-align: center;
  background: rgba(200, 191, 194, 0.6);
  border-radius: 50%;
  color: orangered;
  padding: 10px;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .more {
  display: block;
  margin: 0 110px 0 30px;
  font-size: 18px;
  color: #333;
}
.page-main .home-brick-box .home-brick-row-box .box-bd .row .span16 ul .brick-item-s a .more small {
  display: block;
  font-size: 12px;
  color: #757575;
}
.site-footer .footer-service {
  padding: 27px 0;
  border-bottom: 1px solid #e0e0e0;
}
.site-footer .footer-service .list-service {
  margin: 0;
  padding: 0;
}
.site-footer .footer-service .list-service li:first-child {
  border-left: 0;
}
.site-footer .footer-service .list-service li {
  float: left;
  width: 19.8%;
  height: 25px;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  border-left: 1px solid #e0e0e0;
}
.site-footer .footer-service .list-service li a {
  color: #616161;
  transition: color 0.2s;
}
.site-footer .footer-links {
  padding: 40px 0;
}
.site-footer .footer-links dl {
  float: left;
  width: 160px;
  margin: 0;
}
.site-footer .footer-links dl dt {
  margin: -1px 0 26px;
  font-size: 14px;
  line-height: 1.25;
  color: #424242;
}
.site-footer .footer-links dl dd {
  margin: 10px 0 0;
  font-size: 12px;
}
.site-footer .footer-links dl dd a {
  color: #616161;
}
.site-footer .footer-links dl dd a:hover {
  color: orangered;
}
.site-footer .footer-links .col-contact {
  float: right;
  width: 251px;
  border-left: 1px solid #e0e0e0;
  text-align: center;
  color: #616161;
}
.site-footer .footer-links .col-contact .phone {
  font-size: 22px;
  line-height: 1;
  color: #ff6700;
}
.site-footer .footer-links .col-contact p {
  margin: 0 0 15px 0;
  font-size: 12px;
}
.site-footer .footer-links .col-contact .spa {
  padding: 10px 20px;
  color: #ff6700;
  background-color: #fff;
  width: 118px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 1px solid #ff6700;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s;
}
.site-footer .footer-links .col-contact .spa:hover {
  background-color: orangered;
  color: white;
}
.site-footer .footer-links .col-contact .spa:hover i {
  color: white;
}
.site-footer .footer-links .col-contact .spa i {
  color: #ff6700;
}
.site-footer .footer-links .col-contact .follow {
  font-size: 12px;
  margin-top: 20px;
  position: relative;
}
.site-footer .footer-links .col-contact .follow a {
  text-decoration: none;
}
.site-footer .footer-links .col-contact .follow a:hover {
  color: orangered;
}
.site-footer .footer-links .col-contact .follow a img {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 20px;
  left: 100px;
}
.site-footer .footer-links .col-contact .follow a i {
  color: #757575;
  transform: scale(1.5);
  margin-left: 8px;
  margin-top: -3px;
}
.site-footer .footer-links .col-contact .follow a:nth-child(2) img {
  display: none;
}
.site-footer .footer-links .col-contact .follow a:nth-child(2):hover img {
  display: block;
}
.site-info {
  padding: 30px 0;
  position: relative;
  background: white;
}
.site-info .logo {
  position: absolute ;
  top: 0;
  left: -15px;
  display: block;
}
.site-info .logo img {
  width: 80px;
  height: 65px;
}
.site-info .info-text {
  color: #b0b0b0;
  padding-left: 67px;
}
.site-info .info-text .sites {
  margin: 0;
  line-height: 18px;
}
.site-info .info-text .sites a {
  color: #757575;
}
.site-info .info-text .sites a span {
  margin: 0;
  font-family: sans-serif;
}
.site-info .info-text .sites a:hover {
  color: orangered;
}
.site-info .info-text p {
  margin: 0;
  line-height: 18px;
}
.site-info .info-text p a {
  color: #b0b0b0;
}
.site-info .info-text p a:hover {
  color: orangered;
}
.site-info .info-text p span {
  color: #b0b0b0;
}
.site-info .info-text .info-links {
  height: 28px;
  margin: 4px 0 15px;
}
.site-info .info-text .info-links a {
  display: inline-block;
}
.site-info .info-text .info-links a img {
  width: auto;
  height: 28px;
  margin-left: 0;
}
.site-info .info-text .slogan {
  clear: both;
  margin: 30px auto 0;
  width: 40%;
  height: 19px;
  display: block;
  text-align: left;
  color: #b0b0b0;
  font-size: 17px;
  opacity: 0.6;
}

JS代码:


<script>
			var $tpbox = $(".swiper");
			var $unit = $("#unit");
			var $tpboxLis = $("#circles li");
			var $leftBtn = $(".leftBtn");
			var $rightBtn = $(".rightBtn");
 
 
 
			var num = $unit.children("li").length;
 
			$unit.children("li:first").clone().appendTo($unit);
 
			var time = setInterval(rightBtnHandler, 2000);
 
			$tpbox.mouseenter(function() {
				clearInterval(time);
			});
 
			$tpbox.mouseleave(function() {
				time = setInterval(rightBtnHandler, 2000);
			});
 
			var idx = 0;
 
			$rightBtn.click(rightBtnHandler);
 
 
 
			function rightBtnHandler() {
				if ($unit.is(":animated")) {
					return;
				}
 
				idx++;
 
				$unit.animate({
					left: idx * -1226
				}, 500, function() {
 
 
					if (idx > num - 1) {
						idx = 0;
						$unit.css("left", 0);
					}
				});
 
 
 
				var i = idx <= num - 1 ? idx : 0;
				$tpboxLis.eq(i).addClass("cur").siblings().removeClass("cur");
 
			}
 
			$leftBtn.click(function() {
				if ($unit.is(":animated")) {
					return;
				}
 
				idx--;
 
				if (idx < 0) {
					idx = num - 1;
					$unit.css("left", num * -1226);
				}
 
				$unit.animate({
					left: idx * -1226
				}, 500);
 
				$tpboxLis.eq(idx).addClass("cur").siblings().removeClass("cur");
 
			});
 
			$tpboxLis.mouseenter(function() {
				idx = $(this).index();
				$unit.stop(true).animate({
					"left": idx * -1226
				}, 500);
				$tpboxLis.eq(idx).addClass("cur").siblings().removeClass("cur");
			});
		</script>

总结

本文所需要jquery的库，需要的可以后台留言我发给你们。原创不易,多多支持。

原文链接:https://blog.csdn.net/m0_50319610/article/details/121787670

所属网站分类: 技术文章 > 博客

作者：麻辣小龙虾

链接：http://www.qianduanheidong.com/blog/article/360930/7c4c5efab1ce94343efc/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权一经发现必将追究其法律责任

14 0

收藏该文

昵称:

评论内容：(最多支持255个字符)

---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力

程序员的那些事(new)

window属性：controllers

如何用Idea或者webstorm跑一个Vue项目

“我对技术架构的理解与架构师角色的思考” 读后感

程序员狂怒：薪水被应届生倒挂了，很不爽，天王老子也别想留住我！

荐结合论文看Youtube推荐系统中召回和排序的演进之路（中）篇

11个编程接单的网站，你有技术就有收入，有收入就有女朋友《男盆友》

身为程序员——你还不知道这十几个网站？

让微信 8.0 「裂开」「炸弹」的特效代码来了

35岁的程序员：第20章，解脱

在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

无法应用 CSS，可能是因为 Bootstrap

不含当前目录的相对路径

是否可以将 HTML 插入 Wix 模板？

使用 html 和 jQuery 动态加载标签，并输入 Java 的输入

无法使输入类型=日期必填

如何使用 VBA 从网络下载表格？

为什么计数器没有增加

子级没有渲染父级的 %height 吗？[重复]

电话号码验证包含 +** ***-***-****（后面加上两位数的国家代码和 10 位数的手机号码）

jQuery Grid css 无法在 .net core 2 中加载

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站