投稿
  1. 首页
  2. html-js-css

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

网站漏洞检测 • 2022-6-12 • html-js-css • 阅读 22

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

文章目录 前言代码目录 二、使用步骤 1.引入库总结



前言

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



一、代码目录

。



二、使用步骤

 

 

 

 

 

 

 



1.引入库 

图标库:

图标库网站:

html代码:



	
		
		
		
		
		
		
		
	
	
		
			
				
					
						小米商城
						|
						MIUI
						|
						loT
						|
						云服务
						|
						天星数科
						|
						有品
						|
						小爱开放平台
						|
						企业团购
						|
						资质证照
						|
						协议规则
						|
						下载app
						|
						智能生活
						|
						Select Location
					
					
						
							
							购物车
							(0)
						
					
					
						登录
						|
						注册
						|
						消息通知
					
				
			

			
				
					
						
					
					
						
							全部商品分类
								
									
										手机
										电视
										笔记本 平板
										
										家电
										出行 穿戴
										
										智能 路由器
										
										电源 配件
										
										健康 儿童
										
										耳机 音箱
										
										生活 箱包
										
									
								
							
							Xiaomi手机
							Redmi红米
							电视
							平板
							家电
							路由器
							服务
							社区
						
					
					
						
					
				
			
		

		
			
				
					
						
						
						
						
					

					
						<
						>
					

					
						
							
							
							
							

						
					
				
				
					
						
							保障服务
							企业团购
							F码通道
							米粉卡
							以旧换新
							话费充值
						
					
					
						
							
							
							
						
					
				


			
			
				
					手机APP
					
						
						
							扫码领取新人百元礼包
						
					
				
				
					个人中心
				
				
					售后服务
				
				
					人工客服
				
				
					购物车
				
				
					回顶部
				
			

		

		
			
				
					
				
				
					
						手机
						
							查看更多
						
					
					
						
							
								
									
										
											
										
									
								
							
							
								
									
											
											Redmi Note 11 Pro系列
											
Redmi Note 11 Pro系列

											
1799元起

										
									
											
											Redmi Note 11 5G
											
5000mAh大电量

											
1199元起

										
									
											
											黑鲨4S
											
磁动力升降肩键

											
2699元起

										
									
											
											黑鲨4S Pro
											
磁动力升降肩键

											
4799元起

										
									
											
											Xiaomi Civi
											
3200万高清质感自拍

											
2599元起

										
									
											
											Xiaomi MIX 4
											
CUP全面屏

											
4999元起

										
									
											
											Redmi Note 10 Pro
											
天玑1100年度旗舰芯

											
1499元起4999元
											

										
									
											
											Redmi Note 10 5G
											
5G小金刚|旗舰长续航

											
1099元起1699元
											

										
								
							
						
					
					
						
							智能穿戴
							
								
									热门
									穿戴
								
							
						
						
							
								
									
										
											
												
											
										
									
								
								
									
										
												
												Redmi 手表 2
												
AMOLED高清大屏

												
389元399元
												

											
										
												
												小米手环
												
全屏实力

												
249元

											
										
												
												Redmi 手表
												
磁吸式充电

												
169元

											
										
												
												Redmi AirDots 3很无线蓝牙耳机
												
圈铁音质,超长续航

												
199元99元
												

											
										
												
												小米Buds 青春版
												
轻巧无线 持久动听

												
199元

											
										
												
												Xiaomi MIX 4
												
CUP全面屏

												
99元59元
												

											
										
												
												Redmi Buds 3 半入耳无线耳机
												
轻巧入耳,舒适有天分

												
299元199元
												

											
										
											
												
													
												
												浏览更多热门
											
										
									
								
							
						
					
					
						
							家电
							
								
									热门
									电视影音
								
							
						
						
							
								
									
										
											
												
											
										
										
											
												
											
										
									
								
								
									
										
												
												小米电视6 65” OLED
												
小米电视6 65” OLED

												
6999元399元
												

											
										
												
												小米电视6 至尊版 65英寸
												
小米电视6 至尊版 65英寸

												
7999元

											
										
												
												小米电视 ES55 2022款
												
小米电视 ES55 2022款

												
2999元

											
										
												
												米家互联网对开门冰箱 540L
												
米家互联网对开门冰箱 540L

												
2899元99元
												

											
										
												
												米家超薄电磁炉
												
米家超薄电磁炉

												
499元

											
										
												
												米家集尘扫拖机器人
												
米家集尘扫拖机器人

												
2999元59元
												

											
										
												
												Redmi全自动波轮洗衣机1A 8kg
												
Redmi全自动波轮洗衣机1A 8kg

												
849元199元
												

											
										
											
												

												
												米家烤电箱
												
299元

											
										
										
											
												
													
												
												浏览更多热门
											
										
									
								
							
						
					
					
						
							生活电器
							
								
									扫地机
									空净
									清洁
									风扇
								
							
						
						
							
								
									
										
											
												
											
										
										
											
												
											
										
									
								
								
									
										
												
												米家扫拖机器人 2Pro
												
米家扫拖机器人 2Pro

												
2699元399元
												

											
										
												
												米家扫拖机器人 2
												
米家扫拖机器人 2

												
1599元

											
										
												
												米家集尘扫拖机器人
												
米家集尘扫拖机器人

												
1799元

											
										
												
												米家扫拖机器人 2C
												
米家扫拖机器人 2C

												
1299元99元
												

											
										
												
												米家扫地机器人1S
												
米家扫地机器人1S

												
1199元

											
										
												
												米家扫拖机器人 G1
												
米家扫拖机器人 G1

												
2199元59元
												

											
										
												
												米家扫拖机器人1T
												
米家扫拖机器人1T

												
2299元199元
												

											
										
											
												

												
												米家扫拖机器人 Pro
												
299元

											
										
										
											
												
													
												
												浏览更多热门
											
										
									
								
							
						
					
					
						
					
					
						
							生活电器
							
								
									扫地机
									空净
									清洁
									风扇
								
							
						
						
							
								
									
										
											
												
											
										
										
											
												
											
										
									
								
								
									
										
												
												米家扫拖机器人 2Pro
												
米家扫拖机器人 2Pro

												
2699元399元
												

											
										
												
												米家扫拖机器人 2
												
米家扫拖机器人 2

												
1599元

											
										
												
												米家集尘扫拖机器人
												
米家集尘扫拖机器人

												
1799元

											
										
												
												米家扫拖机器人 2C
												
米家扫拖机器人 2C

												
1299元99元
												

											
										
												
												米家扫地机器人1S
												
米家扫地机器人1S

												
1199元

											
										
												
												米家扫拖机器人 G1
												
米家扫拖机器人 G1

												
2199元59元
												

											
										
												
												米家扫拖机器人1T
												
米家扫拖机器人1T

												
2299元199元
												

											
										
											
												

												
												米家扫拖机器人 Pro
												
299元

											
										
										
											
												
													
												
												浏览更多热门
											
										
									
								
							
						
					
				
			
		

		
			
				
					
						
							预约维修服务
							7天无理由退货
							15天免费换货
							满69包邮
							520余家售后网点
						
					
					
						
							帮助中心
							
								
									账户管理
								
							

							
								
									购物指南
								
							
							
								
									订单 *** 作
								
							

						
						
							

								服务支持

							
							
								
									售后政策
								
							
							
								
									自助服务
								
							
							
								
									相关下载
								
							

						
						
							

								线下门店

							
							
								
									小米之家
								
							
							
								
									服务网点
								
							
							
								
									授权体验店/专区
								
							

						
						
							

								关于小米

							
							
								
									了解小米
								
							
							
								
									加入小米
								
							
							
								
									投资者关系
								
							
							
								
									企业社会责任
								
							
							
								
									廉洁举报
								
							

						
						
							
								
									关注我们
								
							
							
								
									新浪微博
								
							
							
								
									官方微信
								
							
							
								
									廉洁举报
								
							
							
								
									联系我们
								
							

						
						
							

								特色服务

							
							
								
									F码通道
								
							
							
								
									礼物码
								
							
							
								
									防伪查询
								
							

						
						
							
400-100-5678

							
8:00-18:00 (仅收市话费)

							人工客服
							
								关注小米:
								
								
							
						
					
				
			
		
			
			
			
				

					小米商城
					|
					MIUI
					|
					米家
					|
					米聊
					|
					多看
					|
					游戏
					|
					政企服务
					|
					小米天猫店
					|
					小米集团隐私政策
					|
					小米公司儿童信息保护规则
					|
					小米商城隐私政策
					|
					小米商城用户协议
					|
					问题反馈
					
				

				

					北京互联网法院法律服务工作站
					|
					中国消费者协会
					|
					北京市消费者协会
				

				

					@mi.com
					京ICP证110507号
					京ICP备10046444号
					京公网安备11010802020134号
					京网文[2020]0276-042号

					(京)网械平台备字（2018）第00005号
					互联网药品信息服务资格证(京)-非经营性-2014-0090
					营业执照
					医疗器械质量公告

					增值电信业务许可证
					网络食品经营备案
					京食药网食备202010048
					食品经营许可证

					违法和不良信息举报电话：171-5104-4404
					知识产权侵权投诉
					本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
				

				
					
					
					
					
					
				
				
					让全球每个人都能享受科技带来的美好生活

 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代码:



总结

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1323093.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
网站漏洞检测 网站漏洞检测 一级用户组
0 0
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表（0条）

保存