国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)

2年前作者：「已注銷」分類：Toy博客閱讀(25)違法舉報

這篇具有很好參考價值的文章主要介紹了html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

文章目錄

  • 前言
  • 代碼目錄
  • 二、使用步驟
    • 1.引入庫
  • 總結(jié)

前言

本項目所建立的小米官網(wǎng)為高仿,原創(chuàng)不易,麻煩各位多多支持。

一、代碼目錄

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)。

二、使用步驟

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)?

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)?

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)?

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)?

?

?

?

1.引入庫?

圖標(biāo)庫:

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)

圖標(biāo)庫網(wǎng)站:

html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)

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" 
			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="#">云服務(wù)</a>
						<span class="sep">|</span>
						<a href="#">天星數(shù)科</a>
						<span class="sep">|</span>
						<a href="#">有品</a>
						<span class="sep">|</span>
						<a href="#">小愛開放平臺</a>
						<span class="sep">|</span>
						<a href="#">企業(yè)團購</a>
						<span class="sep">|</span>
						<a href="">資質(zhì)證照</a>
						<span class="sep">|</span>
						<a href="#">協(xié)議規(guī)則</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>服務(wù)</span></a></li>
							<li class="nav-item"><a href=""><span>社區(qū)</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/保障服務(wù).png" alt="">保障服務(wù)</a></li>
							<li><a href="#"><img src="img/企業(yè)團購.png" alt="">企業(yè)團購</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/關(guān)注小米二維碼.png" alt="">
						<span>
							掃碼領(lǐng)取新人百元禮包
						</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>售后服務(wù)</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萬高清質(zhì)感自拍</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小金剛|旗艦長續(xù)航</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/手環(huán)6.jpg" alt=""></div>
												<h3 class="title">小米手環(huán)</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很無線藍(lán)牙耳機</h3>
												<p class="desc">圈鐵音質(zhì),超長續(xù)航</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">米家互聯(lián)網(wǎng)對開門冰箱 540L</h3>
												<p class="desc">米家互聯(lián)網(wǎng)對開門冰箱 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="http://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="http://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>風(fēng)扇</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="http://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="http://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>風(fēng)扇</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="http://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="http://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>預(yù)約維修服務(wù)</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余家售后網(wǎng)點</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>

								服務(wù)支持

							</dt>
							<dd>
								<a href="">
									售后政策
								</a>
							</dd>
							<dd>
								<a href="">
									自助服務(wù)
								</a>
							</dd>
							<dd>
								<a href="">
									相關(guān)下載
								</a>
							</dd>

						</dl>
						<dl>
							<dt>

								線下門店

							</dt>
							<dd>
								<a href="">
									小米之家
								</a>
							</dd>
							<dd>
								<a href="">
									服務(wù)網(wǎng)點
								</a>
							</dd>
							<dd>
								<a href="">
									授權(quán)體驗店/專區(qū)
								</a>
							</dd>

						</dl>
						<dl>
							<dt>

								關(guān)于小米

							</dt>
							<dd>
								<a href="">
									了解小米
								</a>
							</dd>
							<dd>
								<a href="">
									加入小米
								</a>
							</dd>
							<dd>
								<a href="">
									投資者關(guān)系
								</a>
							</dd>
							<dd>
								<a href="">
									企業(yè)社會責(zé)任
								</a>
							</dd>
							<dd>
								<a href="">
									廉潔舉報
								</a>
							</dd>

						</dl>
						<dl>
							<dt>
								<a href="">
									關(guān)注我們
								</a>
							</dt>
							<dd>
								<a href="">
									新浪微博
								</a>
							</dd>
							<dd>
								<a href="">
									官方微信
								</a>
							</dd>
							<dd>
								<a href="">
									廉潔舉報
								</a>
							</dd>
							<dd>
								<a href="">
									聯(lián)系我們
								</a>
							</dd>

						</dl>
						<dl>
							<dt>

								特色服務(wù)

							</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">
								關(guān)注小米:
								<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/關(guān)注小米二維碼.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="">政企服務(wù)</a>
					<span>|</span>
					<a href="">小米天貓店</a>
					<span>|</span>
					<a href="">小米集團隱私政策</a>
					<span>|</span>
					<a href="">小米公司兒童信息保護規(guī)則</a>
					<span>|</span>
					<a href="">小米商城隱私政策</a>
					<span>|</span>
					<a href="">小米商城用戶協(xié)議</a>
					<span>|</span>
					<a href="">問題反饋</a>
					
				</p>
				<p class="sites">
					<a href="">北京互聯(lián)網(wǎng)法院法律服務(wù)工作站</a>
					<span>|</span>
					<a href="">中國消費者協(xié)會</a>
					<span>|</span>
					<a href="">北京市消費者協(xié)會</a>
				</p>
				<p>
					<a href="">@mi.com</a>
					<span>京ICP證110507號</span>
					<a href="">京ICP備10046444號</a>
					<a href="">京公網(wǎng)安備11010802020134號</a>
					<a href="">京網(wǎng)文[2020]0276-042號</a><br>
					<a href="">(京)網(wǎng)械平臺備字（2018）第00005號</a>
					<a href="">互聯(lián)網(wǎng)藥品信息服務(wù)資格證(京)-非經(jīng)營性-2014-0090</a>
					<a href="">營業(yè)執(zhí)照</a>
					<a href="">醫(yī)療器械質(zhì)量公告</a><br>
					<a href="">增值電信業(yè)務(wù)許可證</a>
					<span>網(wǎng)絡(luò)食品經(jīng)營備案</span>
					<span>京食藥網(wǎng)食備202010048</span>
					<a href="">食品經(jīng)營許可證</a><br>
					<span>違法和不良信息舉報電話：171-5104-4404</span>
					<a href="">知識產(chǎn)權(quán)侵權(quán)投訴</a>
					<span>本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實驗室測試</span>
				</p>
				<div class="info-links">
					<a href=""><img src="img/隱私認(rèn)證.png" alt=""></a>
					<a href=""><img src="img/誠信網(wǎng)站.png" alt=""></a>
					<a href=""><img src="img/可信網(wǎng)站.png" alt=""></a>
					<a href=""><img src="img/誠信經(jīng)營.png" alt=""></a>
					<a href=""><img src="img/網(wǎng)站安全.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>

總結(jié)

本文所需要jquery的庫，需要的可以后臺留言我發(fā)給你們。原創(chuàng)不易,多多支持。文章來源地址http://www.zghlxwxcb.cn/news/detail-510400.html

到了這里，關(guān)于html+CSS+JS實現(xiàn)小米官網(wǎng)(附全部代碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • html+css+js制作LOL官網(wǎng)，web前端大作業(yè)（3個頁面+模擬登錄+鏈接）

    html+css+js制作LOL官網(wǎng)，web前端大作業(yè)（3個頁面+模擬登錄+鏈接）

    index.html index.css introduce.html introduce.css shop.html shop.css 鏈接：https://pan.baidu.com/s/1VtaAMts5TnKk8CJtaL750Q 提取碼：LDL6

    2024年02月02日
    瀏覽(24)
  • HTML+CSS好看的小黃人網(wǎng)頁制作（人物介紹部分，附全部代碼）

    HTML+CSS好看的小黃人網(wǎng)頁制作（人物介紹部分，附全部代碼）

    效果如下： 整體效果： 動態(tài)部分： ? 人物介紹部分通過縮放增強視覺沖擊效果，使得網(wǎng)頁更加靈動。 代碼部分： HTML代碼： ?css代碼部分（body）： 導(dǎo)航欄部分的代碼和網(wǎng)站首頁部分的代碼是幾乎一樣的，可以在這里復(fù)制粘貼(14條消息) HTML+CSS好看的小黃人網(wǎng)頁制作（首頁部

    2024年02月12日
    瀏覽(34)
  • 最詳細(xì)！?。∏岸嗽窆倬W(wǎng) （采用html+css+js+dom+ajax+jquery+swiper+json）完整版

    最詳細(xì)?。?！前端原神官網(wǎng) （采用html+css+js+dom+ajax+jquery+swiper+json）完整版

    1.該項目采用了大部分前端知識， 完整的復(fù)刻原神官網(wǎng)上所顯示的全內(nèi)容 ，非常全面和詳細(xì)。希望有興趣的小伙伴萌可以看看和參考一下！?。≡擁椖靠梢宰鳛榇髮W(xué)生 畢設(shè)項目（附帶項目答辯ppt） 同時也可以作為計算機專業(yè)的小伙伴的 期末大作業(yè) 。喜歡的請留下你的足跡

    2024年02月05日
    瀏覽(87)
  • HTML5+CSS3實現(xiàn)小米商城 （完整版）

    HTML5+CSS3實現(xiàn)小米商城 （完整版）

    對于小米商城，也是自己初學(xué)前端的一個小作品吧，這個網(wǎng)頁大概寫了有三四天吧，總體感受就是寫著還行，只要有耐心，就一定能成功。 畢竟第一次做，代碼寫的可能比較亂，命名可能也不是太規(guī)范，以后多加改正。 基本還原了原網(wǎng)頁，并且只用到了CSS3和HTML5。 鏈接：

    2024年02月04日
    瀏覽(20)
  • 用mysql+實現(xiàn)客戶端界面代碼【（css+html+js）或者vue】做一個酒店管理系統(tǒng)

    用mysql+實現(xiàn)客戶端界面代碼【（css+html+js）或者vue】做一個酒店管理系統(tǒng)

    魚弦：CSDN內(nèi)容合伙人、CSDN新星導(dǎo)師、51CTO(Top紅人+專家博主) 、github開源愛好者（go-zero源碼二次開發(fā)、游戲后端架構(gòu) https://github.com/Peakchen） ?? ? ? ? 設(shè)計內(nèi)容: 兩種身份的用戶 1)普通客戶:自己個人信息的管理、預(yù)定房間功能、收銀結(jié)賬功 能(押金，退房，賬單處理): 2)管理

    2024年02月08日
    瀏覽(24)
  • vue-codemirror實現(xiàn)一個前端代碼在線編輯器，可處理 HTML,VUE,JS,CSS代碼在線編輯

    vue-codemirror實現(xiàn)一個前端代碼在線編輯器，可處理 HTML,VUE,JS,CSS代碼在線編輯

    先找個目錄創(chuàng)建一個vue項目 例如 我們想要項目叫 editor 在終端執(zhí)行 2和3其實都可以 但個人建議 最近還是2會更穩(wěn)定一些 在終端執(zhí)行 引入依賴包 然后在項目src目錄下創(chuàng)建 utils 文件夾 里面創(chuàng)建一個setting.js 參考代碼如下 然后 這邊 調(diào)用組件的代碼 因為項目也剛創(chuàng) 我直接寫 s

    2024年02月15日
    瀏覽(32)
  • HTML＋CSS＋JS 登錄頁面的代碼結(jié)構(gòu)入門

    HTML＋CSS＋JS 登錄頁面的代碼結(jié)構(gòu)入門

    本作品創(chuàng)建了一個代碼簡單清新的登錄界面，并逐行解釋了其框架，包含HTML代碼，及對應(yīng)的CSS代碼和JS代碼，提供對登錄界面的一般框架的入門認(rèn)識。 功能簡介： 代碼實現(xiàn)了一個清新登錄界面，整體簡明，并具有一定的交互功能。該設(shè)計代碼是一個包含 HTML、CSS 和 JavaScrip

    2024年02月04日
    瀏覽(16)
  • 超好看的3D煙花代碼（html+css+js）帶音樂

    超好看的3D煙花代碼（html+css+js）帶音樂

    效果圖 可以修改路徑設(shè)置背景音樂 注意：如果不能自動播放背景音樂，修改瀏覽器的設(shè)置，允許媒體自動播放。 這里是Microsoft edge瀏覽器修改設(shè)置的步驟https://jingyan.baidu.com/article/03b2f78c6f0acc1fa237aef4.html 設(shè)置好后刷新瀏覽器就可以自動播放背景音樂了 3d煙花代碼

    2024年02月03日
    瀏覽(21)

  • 原神官網(wǎng)HTML+CSS

    ?這個網(wǎng)頁大量運用了flex布局，并且能夠自適應(yīng)屏幕寬度 下面是HTML代碼 下面是CSS樣式文件

    2024年02月13日
    瀏覽(19)
  • HTML+CSS仿大學(xué)官網(wǎng)

    HTML+CSS仿大學(xué)官網(wǎng)

    2024年01月17日
    瀏覽(10)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包