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

HTML部分

0登录后可显示
您账号中已加入的商品哦~
立即登录
立即注册
我的订单
M码通道
手机
魅族 20
￥2999
魅族 20 PRO
￥3999
魅族 20 INFINITY 无界版
￥6299
					
PANDAER
夏日限定 妙磁抗菌壳
￥99
Air 真无线蓝牙耳机
￥149
PASA 超触感键帽
￥329
宇宙之树 妙磁抗菌壳
￥139
PASA 妙磁抗菌壳
￥139
iPhone 夏日限定 抗摔壳
￥159
重磅 肤感 T 恤
￥169
PASA 航宇之星 邮差包
￥339
					
lipro
学习护眼台灯
￥1799
智能吸顶灯
￥899
明装筒射灯 E 系列
￥169
筒射灯 A 系列
￥79
筒射灯 E 系列
￥229
金属球泡
￥62
地脚灯
￥89
智能蓝牙控制器
￥89
配件
35W 便携闪充移动电源
￥199
50W 无线潮充
￥299
SHARGE 随行移动电源
￥199
80W GaN 动力电芯 潮充
￥149
67W GaN 潮充
￥209
80W 双口车载潮充
￥129
15W 妙磁车载无线潮充
￥209
PANDAER 240W 快充线
￥79
Flyme服务社区集团官网APP下载
新魅力派对
晚8 购机抢五折免单
以旧换新
旧机回收 就来魅族商城
学生专区
学生认证 专享福利
魅友见面礼
领取新人福利
手机
12期魅族 20
第二代骁龙 8 旗舰处理器 | 全新 Flyme 10 
￥ 2899起 ￥2999
12期魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥3999起 ￥3999
魅族 20「定胜青」第二代骁龙 8 旗舰处理器 | 全新 Flyme 10￥2899起￥299912期
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
魅族 20 PRO
第二代骁龙 8 旗舰处理器  | Flyme 10 安全高效 
￥299369
PANDAER 夏日限定 妙磁抗菌壳
魅族 20 系列适用 | IML 双塑立体印刷
￥
139
PANDAER 夏日限定 妙磁抗菌抗摔壳
iPhone 14 Pro 系列适用 | 妙磁阵列 2.0 大吸力
￥
159
PANDAER Air 真无线蓝牙耳机
13mm劲音大动圈 | 25h全天候续航 | 0压舒适佩戴
￥
149
lipro 智能家居
学习护眼台灯
国 AA 级照度 | 低重影技术
￥
1799
智能吸顶灯
如然之光 护眼好光 | 2cm 超薄灯体
￥
899
客厅智能吸顶灯
3cm超薄灯体 | 全客厅护眼
￥
2999
lipro 球泡
Ra97 高显色| RG0 护眼低蓝光
￥
44
学习护眼台灯
国 AA 级照度 | 低重影技术
￥
1799
智能吸顶灯
如然之光 护眼好光 | 2cm 超薄灯体
￥
899
客厅智能吸顶灯
3cm超薄灯体 | 全客厅护眼
￥
2999
lipro 球泡
Ra97 高显色| RG0 护眼低蓝光
￥
44
声学配件
魅蓝 Blus 2S 主动降噪耳机
48dB ANC 主动降噪 | 30H 超长续航
￥
289
魅蓝 Blus Air 真无线耳机
ENC 智能通话降噪 | 定制 12mm 分频「超动圈」
￥
139
魅蓝 Blus 2 主动降噪耳机
全场景 ANC 主动降噪 | 「妙音」ENC通话降噪
￥
249
魅蓝 Blus+ 主动降噪耳机 APP版
12mm 超大动圈 | 30db 主动降噪
￥
169
魅蓝 Blus 2S 主动降噪耳机
48dB ANC 主动降噪 | 30H 超长续航
￥
289
魅蓝 Blus Air 真无线耳机
ENC 智能通话降噪 | 定制 12mm 分频「超动圈」
￥
139
魅蓝 Blus 2 主动降噪耳机
全场景 ANC 主动降噪 | 「妙音」ENC通话降噪
￥
249
魅蓝 Blus+ 主动降噪耳机 APP版
12mm 超大动圈 | 30db 主动降噪
￥
169
魅蓝 Blus 2S 主动降噪耳机
48dB ANC 主动降噪 | 30H 超长续航
￥
289
魅蓝 Blus Air 真无线耳机
ENC 智能通话降噪 | 定制 12mm 分频「超动圈」
￥
139
魅蓝 Blus 2 主动降噪耳机
全场景 ANC 主动降噪 | 「妙音」ENC通话降噪
￥
249
魅蓝 Blus+ 主动降噪耳机 APP版
12mm 超大动圈 | 30db 主动降噪
￥
169
						
周边配件
PANDAER 35W 便携闪充移动电源
多协议双向快充 | 银行卡便携尺寸
￥
199
PANDAER × SHARGE 随行移动电源
10000mAh 车规级电芯 | 随行轻量化设计
￥
199
PANDAER 240W 快充线
支持魅族 20 系列 Super mCharge 快充
￥
79
魅蓝 lifeme 磁吸无线充电器
115W（Max）| 智能 IC 充电
￥
89
PANDAER 35W 便携闪充移动电源
多协议双向快充 | 银行卡便携尺寸
￥
199
PANDAER × SHARGE 随行移动电源
10000mAh 车规级电芯 | 随行轻量化设计
￥
199
PANDAER 240W 快充线
支持魅族 20 系列 Super mCharge 快充
￥
79
魅蓝 lifeme 磁吸无线充电器
115W（Max）| 智能 IC 充电
￥
89
					
社区热帖
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
卓岳
魅族 ∞ 领克无界生态发布会
图文直播
Flyme
Flyme 隐私安全白皮书
Flyme 隐私安全白皮书
Flyme 隐私安全白皮书
Flyme 隐私安全白皮书
Flyme 隐私安全白皮书
Flyme 隐私安全白皮书
精彩视频
魅族 20 魅友共创·白
魅族品牌焕新｜Infinite Passion 热爱无界
新「奇点」魅族来定义
魅族 20
魅族 20 魅友共创·白
魅族品牌焕新｜Infinite Passion 热爱无界
新「奇点」魅族来定义
魅族 20

推荐产品
魅族 20
魅族 20 PRO
全部手机
PANDAER
lipro
配件
购买渠道
官方商城
零售门店
线上销售授权名单
企业服务
M码通道
魅族 20
服务支持
服务中心
维修查询
备件价格查询
寄修服务
增值保障
真伪查询
官方社媒
官方社区
新浪微博
百度贴吧
百度贴吧
百度贴吧
百度贴吧
关于魅族
了解魅族
联系我们
联系我们
联系我们
联系我们
联系我们
官方客服400-788-3333周一至周日 8:00 - 24:00在线客服关注魅族举报中心  法律声明  隐私政策  营业执照  粤ICP备13003602号-2  合字B2-20170010  粤公网安备 44049102496009 号©2023 珠海星纪魅族信息技术有限公司   简体中文
	

css代码

*{margin: 0;padding: 0;box-sizing: border-box;
}
li{list-style: none;
}
a{text-decoration: none;
}
body{background: #F4F4F4;
}
.clearfix::after{/*	设置添加的子元素内容为空		*/content: '';/*	给子元素设置clear：both		*/clear: both;/*	将子元素转换为块级元素		*/display: block;/*	设置子元素的高度是0，不占空间		*/height: 0;/*	设置子元素不可见		*/visibility: hidden;}
/* 背景图 */
.background{position: relative;width: 100%;height: 670px;
/*	background: red;*/
}
.bgc{width: 100%;height: 100%;margin: 0 auto;background-image: url(../img/c0.jpg),url(../img/c1.jpg),url(../img/c2.jpg),url(../img/c3.jpg),url(../img/c4.jpg),url(../img/c5.jpg),url(../img/c6.jpg),url(../img/c7.jpg);background-repeat: no-repeat;animation: ergou 32s  infinite;background-position: center;
}
@keyframes ergou{0%{background-image: url(../img/c0.jpg);}15%{background-image: url(../img/c1.jpg);}25%{background-image: url(../img/c2.jpg);}35%{background-image: url(../img/c3.jpg);}50%{background-image: url(../img/c4.jpg);}65%{background-image: url(../img/c5.jpg);}75%{background-image: url(../img/c6.jpg);}85%{background-image: url(../img/c7.jpg);}100%{background-image: url(../img/c8.jpg);}}
/* nav */
/* nav-logo */
.nav{position: absolute;width: 1240px;left: 50%;margin-left: -620px;
/*	background: yellow;*/height: 82px;z-index: 1001;
}
.nav-logo{float: left;width: 125px;	height: 80px;background: url(../img/logo.png) no-repeat;background-position: center;background-size: 100%;
}
/**/
.car{position: relative;float: right;width: 29px;height: 29px;background: url(../img/1.png) no-repeat;margin-top: 25px;overflow: hidden;
}
.car em{position: absolute;top: 0;right: 0;display: inline-block;font-style: normal;height: 15px;line-height: 15px;text-align: center;border-radius: 50%;background: #c00;color: #fff;padding: 0 3px;font-size: 12px;
}
.car-content{position: absolute;top: 40px;right: 0;width: 318px;height: 120px;background: white;color: #999;font-size: 12px; padding-top: 40px; padding-left: 40px;line-height: 20px;box-shadow: 0 0 5px rgba(0,0,0,.1);border-radius: 2px;
}
.car-icon{float: left;background: url(../img/xiong.png) no-repeat;display: inline-block;width: 47px;height: 42px;margin-right: 10px;background-size: 100%;
/*    margin-left: 40px;*/
}
.car-text{float: right ;
}
.car-content span{float: right;margin-top: -55px;margin-right: 4px;border: 8px solid;border-color: transparent transparent white transparent;
}
.car:hover{overflow: visible;
}
/* user */
.user{position: relative;float: right;width: 29px;height: 29px;background: url(../img/2.png) no-repeat;margin-top: 25px;margin-right: 10px;overflow: hidden;
}
.user-content{position: absolute;right: 0;width: 98px;background-color: #fff;top: 40px;left: 50%;border-radius: 2px;box-sizing: border-box;text-align: center;padding: 15px 0;margin-left: -48px;box-shadow: 0 0 5px rgba(0,0,0,.1);font-size: 12px;line-height: 28px;
}
.user-content span{float: right;margin-top: -30px;margin-right: 40px;border: 8px solid;border-color: transparent transparent white transparent;
}
.user:hover{overflow: visible;
}
/* 导航中间 */
.nav-mid{
/*	position: relative;*/
}
.nav-mid-name-1{position: absolute;top: 30px;left: 50%;transform: translateX(-385px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
.sj-hover{position: absolute;height: 0px;background: white;width: 100%;z-index: 999;overflow: hidden;transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-1:hover +.sj-hover{height: 265px;
}
.sj-hover:hover{height: 265px;
}/* 手机hover内容 */
.sj-hover ul{position: absolute;top: 82px;left: 50%;margin-left: -620px;width: 1240px;height: 183px;
/*	background: red;*/text-align: center;
}
.sj-hover ul li{display: inline-block;width: 142px;font-size: 12px;color: #333;cursor: pointer;
}
.sj-hover ul li img{width: 120px;height: 120px;
}
/* 2 */
.nav-mid-name-2{position: absolute;top: 30px;left: 50%;transform: translateX(-315px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
.sj-hover-2{position: absolute;height: 0px;background: white;width: 100%;z-index: 999;overflow: hidden;transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-2:hover +.sj-hover-2{height: 265px;
}
.sj-hover-2:hover{height: 265px;
}
.sj-hover-2 ul{position: absolute;top: 82px;left: 50%;margin-left: -620px;width: 1240px;height: 183px;
/*	background: red;*/text-align: center;
}
.sj-hover-2 ul li{display: inline-block;width: 142px;font-size: 12px;color: #333;cursor: pointer;
}
.sj-hover-2 ul li img{width: 120px;height: 120px;
}
/* 3 */
.nav-mid-name-3{position: absolute;top: 30px;left: 50%;transform: translateX(-205px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
.sj-hover-3{position: absolute;height: 0px;background: white;width: 100%;z-index: 999;overflow: hidden;
transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-3:hover +.sj-hover-3{height: 265px;
}
.sj-hover-3:hover{height: 265px;
}
.sj-hover-3 ul{position: absolute;top: 82px;left: 50%;margin-left: -620px;width: 1240px;height: 183px;
/*	background: red;*/text-align: center;
}
.sj-hover-3 ul li{display: inline-block;width: 142px;font-size: 12px;color: #333;cursor: pointer;
}
.sj-hover-3 ul li img{width: 120px;height: 120px;
}
/* 4 */
.nav-mid-name-4{position: absolute;top: 30px;left: 50%;transform: translateX(-135px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
.sj-hover-4{position: absolute;height: 0px;background: white;width: 100%;z-index: 999;overflow: hidden;
transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.nav-mid-name-4:hover +.sj-hover-4{height: 265px;
}
.sj-hover-4:hover{height: 265px;
}
.sj-hover-4 ul{position: absolute;top: 82px;left: 50%;margin-left: -620px;width: 1240px;height: 183px;
/*	background: red;*/text-align: center;
}
.sj-hover-4 ul li{display: inline-block;width: 142px;font-size: 12px;color: #333;cursor: pointer;
}
.sj-hover-4 ul li img{width: 120px;height: 120px;
}
/* 5 */
.nav-mid-name-5{position: absolute;top: 30px;left: 50%;transform: translateX(-65px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
/* 6 */
.nav-mid-name-6{position: absolute;top: 30px;left: 50%;transform: translateX(20px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
/* 7 */
.nav-mid-name-7{position: absolute;top: 30px;left: 50%;transform: translateX(90px);float: right;margin-right: 20px;
/*	background: red;*/z-index: 1002;
}
/* 8 */
.nav-mid-name-8{position: absolute;top: 30px;left: 50%;transform: translateX(160px);float: right;margin-right: 20px;z-index: 1002;
}
/* 9 */
/* 8 */
.nav-mid-name-9{position: absolute;top: 30px;left: 50%;transform: translateX(260px);float: right;margin-right: 20px;z-index: 1002;
}
.sj-hover-9{position: absolute;height: 0px;background: white;width: 100%;z-index: 999;overflow: hidden;transition: all 0.5s;
/*	transition-delay: 0.5s;*/
}
.sj-hover-9 img{margin-top: 90px;margin-left: 140px;width: 1240px;height: 300px;
}
.nav-mid-name-9:hover +.sj-hover-9{height: 400px;
}
.sj-hover-9:hover{height: 400px;
}
.search{position: relative;float: right;width: 170px;height: 86px;line-height: 77px;margin-right: 33px;
}
.search input{width: 127px;height: 30px;border-radius: 20px;border: 1px solid #ccc;margin: 0 20px;font-size: 12px;padding: 0 20px;margin-left: 15px;box-sizing: content-box;outline: 0;
}
.search i{position: absolute;top: 33px;right: -9px;display: inline-block;width: 17px;height: 14px;background: url(../img/search.png);background-size: 100%;cursor: pointer;
}
.nav-mid-name-1,.nav-mid-name-2,.nav-mid-name-3,
.nav-mid-name-4,.nav-mid-name-5,.nav-mid-name-6,.nav-mid-name-7
,.nav-mid-name-8,.nav-mid-name-9{font-size: 14px;cursor: pointer;
}
.nav-mid-name-1:hover,.nav-mid-name-2:hover,.nav-mid-name-3:hover,
.nav-mid-name-4:hover,.nav-mid-name-5:hover,.nav-mid-name-6:hover
,.nav-mid-name-7:hover,.nav-mid-name-8:hover,.nav-mid-name-9:hover{color: #FF6640;
}/*  下面内容 */
.section-box{margin-bottom: 50px;height: 260px;
}
.section-box-adv{height: auto;padding-bottom: 45px;background-color: #FFFFFF;border-bottom: 1px solid #eee;
}
.section-box-adv ul{width: 1240px;height: 232px;margin: 0 auto;
}
.section-box-adv ul li{float: left;padding-top: 45px;padding-left: 160px;
}
.section-box-adv ul li img{display: block;width: 130px;height: 130px;text-align: center;
}
.section-box-adv em{display: block;color: #333;font-size: 20px;font-style: normal;padding-left: 28px;
}
.section-box-adv p{font-size: 14px;color: #999;text-align: center;
}
.section-phone-box{margin-bottom: 50px;
}
.section-title{text-align: center;margin-bottom: 10px;height: 90px;background: #f4f4f4;line-height: 120px;}
.section-title h3{font-size: 30px;font-weight: 400;font-style: normal;
}
.section-phone-adv{height: 450px;background-color: #fff;border-bottom: 1px solid #eee;overflow: hidden;background: url(https://fms.res.meizu.com/dms/2023/07/14/c34d5374-3332-4252-9095-d69ec95dafbb.jpg) no-repeat;background-position: center;
}
.section-box-row{background: #f4f4f4;}
.index-center-wrapper{width: 1240px;margin: auto;
}
.index-center-wrapper li{position: relative;float: left;margin-right: 5px;width: 615px;height: 610px;background: #fff;
}
/* 手机 */
.phon3,.phon4,.phon5,.last{float: left;
position: relative;
width: 303px !important;
height: 375px !important;
margin-right: 9px ;
margin-top: 10px;
background-color: #fff;
overflow: hidden;
transition: all .3s ease;
}
.last{margin-right: 0;
}
.box-img {
background-size: cover;
display: block;
width: 100%;
height: 100%;
text-align: center;
background-repeat: no-repeat;
background-position: 50%;
}
.goods-img {
position: absolute;
left: 50%;
bottom: 0;
height: 460px;
margin-left: -250px;
margin-top: 30px;
}
.phon3 .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}
.phon4 .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}
.phon5 .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}.last .goods-img {
width: 230px;
height: 230px;
position: relative;
left: 39%;
}
.phon3 .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.phon4 .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.phon5 .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.last .box-info {
top: 275px;
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.goods-name {
color: #333;
font-size: 20px;
margin-bottom: 2px;
text-align: center;
}
.goods-desc {
color: #999;
font-size: 14px;
margin-bottom: 3px;
display: block;
}
.goods-price {
position: relative;
display: inline-block;
color: #c00;
font-size: 22px;
padding-left: 14px;
}
.goods-price i {
position: absolute;
left: 0;
font-size: 14px;
bottom: 3px;
}
i{
font-style: normal;
}
.goods-price em {
font-size: 16px;
}
.goods-price s {
font-size: 14px;
margin-left: 8px;
color: #666;
}.index-center-wrapper li img{position: absolute;left: 50%;bottom: 0;height: 460px;margin-left: -250px;
}
.red{position: absolute;top: 30px;left: 30px;display:inline-block;background-image: linear-gradient(120deg,#ff3149,#ff64a6);width: 60px;height: 60px;line-height: 60px;color: #fff;font-size: 16px;text-align: center;border-radius: 50%;
}
.box-info{position: absolute;top: 58px;left: 0;width: 100%;text-align: center;line-height: 30px;
}
.name{color: #333;font-size: 28px;margin-bottom: 0;}
.desc{color: #333;font-size: 18px;margin-bottom: 3px;
}
.rmb{color: #c00;font-size: 22px;padding-left: 14px;
}
.rmb em{font-weight: 400;font-style: normal;font-size: 14px;
}
.box-info s{font-size: 14px;margin-left: 8px;color: #666;
}
/*  sss */
/* 内容 */
.page{width: 100%;background: #f4f4f4;
}
/*内容1*/
.ic{width: 100%;height: 235px;background: #fff;padding-bottom: 45px;
}
.ic ul{max-width: 1240px;height: 232px;margin: 0 auto;
}
.ic ul li{float: left;display: block;list-style: none;padding-top: 45px;width: 25%;height: 187px;
}
.ic ul li a{display: block;text-decoration: none;text-align: center;width: 100%;height: 100%;
}
.ic ul li a:hover{opacity: 0.85;
}
.ic ul li a img{width: 130px;height: 130px;
}
.ic ul li a span{display: block;font-size: 20px;color: #333;
}
.ic ul li a p{font-size: 14px;color: #999;
}/*内容2*/
.st{margin-top: 50px;margin-bottom: 10px;text-align: center;
}
.st h3{width: 100%;height: 45px;font-size: 30px;margin: 0 auto;
}
.im1{width: 100%;height: 450px;background: url(img/13.jpg) no-repeat;background-position: center;
}
.im2{width: 100%;height: 450px;background: url(../img/c8.jpg) no-repeat;background-position: center;
}.im3{width: 100%;height: 450px;background: url(https://fms.res.meizu.com/dms/2022/07/20/21da28b6-0db6-464a-9a2d-c914d74b6467.jpg) no-repeat;background-position: center;
}
.im4{width: 100%;height: 450px;background: url(https://fms.res.meizu.com/dms/2023/07/17/c0e5df00-23fb-4b7a-b6db-9a603af73d0c.jpg) no-repeat;background-position: center;
}
.im5{width: 100%;height: 450px;background: url(../img/c9.jpg) no-repeat;background-position: center;
}
.st1 a{width: 100%;height: 100%;
}
.st2{width: 100%;height: 620px;
}
.st2 .wa{width: 1240px;height: 100%;margin: 0 auto;
}
.st2 .wa .wa-left{float: left;position: relative;width: 615px;height: 610px;background: #fff;margin-top: 10px;transition: all .3s ease;
}
.st2 .wa .wa-left:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.st2 .wa .wa-right{float: right;position: relative;width: 615px;height: 610px;background: #fff;margin-top: 10px;transition: all .3s ease;
}
.st2 .wa .wa-right:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.left-red{display: block;position: absolute;top: 30px;left: 30px;width: 60px;height: 60px;line-height: 60px;font-size: 16px;text-align: center;color: #fff;border-radius: 50%;background-image: linear-gradient(120deg,#ff3149,#ff64a6);
}
.left-text{text-align: center;position: absolute;top: 55px;width: 100%;height: 105px;
}
.left-text .b1{font-size: 28px;color: #333;
}
.left-text .b2{font-size: 18px;color: #333;
}
.left-text .b3{font-size: 22px;color: #c00;
}
.left-text .b3 p{display: inline-block;font-size: 14px;color: #c00;
}
.left-text img{position: absolute;top: 105px;left: 80px;width: 460px;height: 460px;
}
/*内容3*/
.nt{width: 100%;height: 3850px;
}
.nt .nt1{width: 1240px;height: 100%;margin: 0 auto;
}
.nt .nt1 ul li{position: relative;float: left;list-style: none;position: relative;width: 301px;height: 375px;margin-right: 9px;margin-top: 10px;background-color: #fff;transition: all .3s ease;
}
.nt .nt1 ul li:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.nt .nt1 ul li a{width: 100%;height: 100%;
}
.nt .nt1 ul li a img{width: 100%;height: 100%;
}
.bib{position: absolute;text-align: center;top: 280px;width: 100%;
}
.bib p{
display: inline-block;
}
.bib .bib1{color: white;font-weight: 700;font-size: 21px;
}
.bib .bib2{color: white;font-size: 14px;
}
.bib .bib3{color: #ebce6b;font-size: 24px;font-weight: 700;
}
.bib .bib3 s{color: white;font-size: 14px;margin-left: 4px;
}
.nt .nt1 .ig img{width: 230px;height: 230px;margin: 30px 36px 0;
}
.bid{position: absolute;text-align: center;top: 270px;width: 100%;height: 80px;
}
.bid1{color: #333;font-size: 16px;margin-bottom: 2px;
}
.bid2{color: #999;font-size: 14px;
}
.bid3{color: #c00;font-size: 22px;
}
.bid .bid3 p{display:inline-block;font-size: 14px;
}
/*内容4*/
.xt{width: 100%;
}
.xt1{width: 1240px;margin: 0 auto;
}
.xt .xt1 ul li{position: relative;float: left;list-style: none;position: relative;width: 301px;height: 375px;margin-right: 9px;margin-top: 10px;background-color: #fff;transition: all .3s ease;
}
.xt .xt1 ul li:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1)
}
.xt .xt1 ul li a{width: 100%;height: 100%;
}
.xt .xt1 ul li a img{width: 100%;height: 100%;
}
.bib{position: absolute;text-align: center;top: 280px;width: 100%;
}
.bib p{
display: inline-block;
}
.bib .bib1{color: white;font-weight: 700;font-size: 21px;
}
.bib .bib2{color: white;font-size: 14px;
}
.bib .bib3{color: #ebce6b;font-size: 24px;font-weight: 700;
}
.bib .bib3 s{color: white;font-size: 14px;margin-left: 4px;
}
.xt .xt1 .ig img{width: 230px;height: 230px;margin: 30px 36px 0;
}
.bid{position: absolute;text-align: center;top: 270px;width: 100%;height: 80px;
}
.bid1{color: #333;font-size: 16px;margin-bottom: 2px;
}
.bid2{color: #999;font-size: 14px;
}
.bid3{color: #c00;font-size: 22px;
}
.bid .bid3 p{display:inline-block;font-size: 14px;
}
/*内容5*/
.xt .xt1 ul .ig1 img{display: inline-block;width: 303px;height: 190px;
}
.xt .xt1 ul .ig1 .comment-user-info{height: 42px;line-height: 42px;margin-top: 10px;padding: 0 15px;
}
.xt .xt1 ul .ig1 .comment-user-info img {width: 36px;height: 36px;border: 1px solid #fff;border-radius: 50%;float: left;box-shadow: 1px 1px 1px 1px #eee;
}
.xt .xt1 ul .ig1 .comment-username {margin-left: 15px;text-align: left;float: left;font-size: 12px;color: #515151;
}
.xt .xt1 ul .ig1 p{padding: 10px 15px 15px;font-size: 16px;line-height: 27px;text-align: left;height: 66px;color: #515151;
}
.xt .xt1 ul .ig1 .comment-tip{color: #999;display: block;padding: 0 15px;margin-top: 10px;text-align: left;
}
.index-center-wrapper{width: 1240px;margin: auto;
}
.bottom-2 li{float: left;width: 305px;height: 245px;background: red;box-sizing: border-box;
}
.bottom-2 li:nth-child(1){width: 615px;height: 245px;
}
.bottom-2 li:nth-child(1) img{width: 615px;height: 245px;/*margin: 0;padding: 0;*/
}
/*内容6*/
.sb{width: 1240px;height: 520px;margin: 0 auto;
}
.sb1{float: left;display: inline-block;width: 615px;height: 245px;margin-bottom: 15px;margin-right: 5px;transition: all .3s ease;
}
.sb1:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.sb1 a{display: block;width: 100%;height: 100%;text-align: center;
}
.sb .sb1 img{width: 100%;height: 100%;
}
.sb2{float: left;display: inline-block;width: 292px;height: 245px;margin-right: 9px;margin-left: 9px;margin-bottom: 15px;text-align: center;background-color: #fff;transition: all .3s ease;overflow: hidden;
}
.sb2:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.sb2 a{text-decoration: none;
}
.sb .sb2 img{width: 292px;height: 190px;
}
.sb2 p{display: inline-block;width: 292px;height: 49px;color: #515151;line-height: 49px;
}
.footer{background-color: #fff;width: 100%;
}
.footer2{color: #fff;height: 66px;width: 100%;background-color: #000;
}
.footer2 .link-wrap{width: 1240px;height: 100%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;
}
.pl{margin-right: 24px;font-size: 13px;
}
.pl span:hover{color: #ccc;
}
.pl2{font-size: 13px;
}
.pl2 span{display: inline-block;width: 16px;height: 16px;background: url(https://fms.res.meizu.com/dms/2017/12/18/1c31db15-ab85-4932-8e6c-edfd6039bc60.png) no-repeat;background-size: 100%;background-position: center;margin:0 10px;}
.footer1{width: 1240px;margin: 0 auto;white-space: nowrap;display: flex;padding-top: 38px;margin-bottom: 58px;justify-content: space-between;cursor: pointer;
}
.recommend-contain{display: flex;max-width: 936px;
}
.recommend-wrap{width: 164px;
}
.title1{font-size: 15px;font-weight: 700;color: #3d3e40;margin-bottom: 16px;
}
.recommend-wrap ul li{margin-bottom: 16px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 13px;font-weight: 400;color: #737880;
}
.recommend-wrap ul li:hover{color: red;
}
.kefu-contain{width: 340px;
}
.name{font-size: 15px;font-weight: 700;color: #3d3e40;margin-bottom: 16px;
}
.contact{display: flex;justify-content: space-between;margin-bottom: 32px;
}
.ph{font-size: 18px;font-weight: 500;color: #3d3e40;
}
.time{font-size: 13px;font-weight: 400;color: #737880;
}
.button{display: flex;align-items: center;padding: 8px 16px;background: #ff4132;border-radius: 100px 100px 100px 100px;font-size: 15px;line-height: 15px;height: 37px;color: #fff;font-weight: 900;transition: all .2s ease;
}
.button img{width: 18px;height: 18px;object-fit: contain;display: inline-block;margin-right: 8px;
}
.list img{width: 32px;height: 32px;background-repeat: no-repeat;background-position: 50%;background-size: 100%;display: inline-block;}
.button:hover{opacity: .5;
}
.list{position: relative;
}
.subscribe .list .imgs2{position: absolute;top: -127px;left: -40px;display: inline-block;width: 124px;height: 0;overflow: hidden;background: #f4f4f4;opacity: 0.8;
}
.imgs1:hover +.imgs2{height: 124px;
}

运行结果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！