小米商城（HTML5+CSS3版）
正在学习HTML5+CSS3的小伙伴们如果想练手的话，可以先照着小米商城的网站敲。因为还没有学到JS，下面代码只实现了部分功能：
index：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官网</title>
<link rel="stylesheet" href="css/xiaomi.css">
<link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
</head>
<body>
<!-- 小米顶部广告 -->
<div class="advertisement w2"></div>
<!-- 小米导航栏 -->
<div class="nav w2">
<div class="header w1">
<div class="nav-left">
<ul>
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">IoT</a><span>|</span></li>
<li><a href="">云服务</a><span>|</span></li>
<li><a href="">天星数科</a><span>|</span></li>
<li><a href="">有品</a><span>|</span></li>
<li><a href="">小爱开放平台</a><span>|</span></li>
<li><a href="">企业团购</a><span>|</span></li>
<li><a href="">资质证照</a><span>|</span></li>
<li><a href="">协议规则</a><span>|</span></li>
<li>
<div class="app">
<a href="">下载app</a>
<div class="top-triango"></div>
<div class="sub-app">
<img src="/images/导航栏1.png" alt="">
<p>小米商城APP</p>
</div>
</div>
</li>
<li><a href=""><span>|</span>智能生活</a><span>|</span></li>
<li><a href="">Select Location</a></li>
</ul>
</div>
<div class="nav-right">
<ul>
<li class="car"><a href=""><i></i> 购物车 (0)</a>
<div class="empty">你家购物车空了，穷鬼</div>
</li>
<li><a href="">消息通知</a></li>
<li><a href="">注册</a><span>|</span></li>
<li><a href="">登录</a><span>|</span></li>
</ul>
</div>
</div>
</div>
<!-- 副导航栏 -->
<div class="big-sub">
<div class="sub-main w1 ">
<div class="sub-left">
<ul>
<li><img src="/images/副导航栏1.png" alt="" title="小米官网"></li>
<li><a href="">小米手机</a>
<div class="left-change">
<ul>
<li class="left-change1"><img src="/images/副导航栏2.webp" alt="">
<p>Xiaomi Civi 2</p><i>2399元起</i>
</li>
<li><img src="/images/副导航栏3.webp" alt="">
<p>Xiaomi MIX Fold 2</p><i>8999元起</i>
</li>
<li><img src="/images/副导航栏4.webp" alt="">
<p>Xiaomi 12S UIrea</p><i>5999元起</i>
</li>
<li><img src="/images/副导航栏5.webp" alt="">
<p>Xiaomi 12S Pro</p><i>4399元起</i>
</li>
<li><img src="/images/副导航栏6.webp" alt="">
<p>Xiaomi 12S</p><i>3699元起</i>
</li>
<li><img src="/images/副导航栏7.webp" alt="">
<p>Xiaomi 12 Pro 天玑版</p><i>2999元起</i>
</li>
</ul>
</div>
</li>
<li><a href="">红米手机</a></li>
<li><a href="">电视</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">平板</a></li>
<li><a href="">家电</a></li>
<li><a href="">路由器</a></li>
<li><a href="">服务中心</a></li>
<li><a href="">社区</a></li>
</ul>
</div>
<div class="sub-right">
<input type="text" class="search" value=" iphone 14 pro max 暗夜紫">
<button></button>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="w2 m1">
<div class="w1">
<div class="lbt">
<div class="button-left"></div>
<div class="button-right"><i></i></div>
<div class="hdm">
<ul>
<li><div class="hdm-left"><a href="">手机</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">电视</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">笔记本 平板</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">出行 穿戴</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">耳机 音响</a><i>></i></div>
<div class="hdm-list">
<ul>
<li><img src="/images/滑动门11.webp" alt=""><em class="color-change">骨传导耳机</em></li>
<li><img src="/images/滑动门12.webp" alt=""><em class="color-change">Necklace</em></li>
<li><img src="/images/滑动门13.webp" alt=""><em class="color-change">Xiaomi Bud 4 Pro</em></li>
<li><img src="/images/滑动门14.webp" alt=""><em class="color-change">Redmi Bud 4 Pro</em></li>
<li><img src="/images/滑动门15.webp" alt=""><em class="color-change">Redmi Bud 4</em></li>
<li><img src="/images/滑动门16.webp" alt=""><em class="color-change">Xiaomi无线降噪耳机</em></li>
</ul>
<ul>
<li><img src="/images/滑动门21.webp" alt=""><em class="color-change">Xiaomi 无线降噪耳机3</em></li>
<li><img src="/images/滑动门22.webp" alt=""><em class="color-change">Redmi Buds 3</em></li>
<li><img src="/images/滑动门23.webp" alt=""><em class="color-change">Air2 SE</em></li>
<li><img src="/images/滑动门24.webp" alt=""><em class="color-change">Redmi Buds 3青春版</em></li>
<li><img src="/images/滑动门25.webp" alt=""><em class="color-change">小米圈铁耳机Pro</em></li>
<li><img src="/images/滑动门26.webp" alt=""><em class="color-change">小米活塞耳机</em></li>
</ul>
<ul>
<li><img src="/images/滑动门31.webp" alt=""><em class="color-change">小米小爱触屏音箱Pro 8</em></li>
<li><img src="/images/滑动门32.webp" alt=""><em class="color-change">小米小爱随身音箱</em></li>
<li><img src="/images/滑动门33.webp" alt=""><em class="color-change">Xiaomi智能家庭屏6</em></li>
<li><img src="/images/滑动门34.webp" alt=""><em class="color-change">小米小爱音箱Art</em></li>
<li><img src="/images/滑动门35.webp" alt=""><em class="color-change">Xiaomi Sound</em></li>
<li><img src="/images/滑动门36.webp" alt=""><em class="color-change">Redmi小爱触屏音箱Pro 8</em></li>
</ul>
<ul>
<li><img src="/images/滑动门41.webp" alt=""><em class="color-change">Xiaomi智能家庭屏10</em></li>
<li><img src="/images/滑动门42.webp" alt=""><em class="color-change">小爱音箱Pro</em></li>
<li><img src="/images/滑动门43.webp" alt=""><em class="color-change">小爱音箱Play增强版</em></li>
<li><img src="/images/滑动门44.jpg" alt=""><em class="color-change">小米小爱触屏音箱</em></li>
<li><img src="/images/滑动门45.jpg" alt=""><em class="color-change">小米小暖音箱Play</em></li>
<li><img src="/images/滑动门46.webp" alt=""><em class="color-change">小米小爱音箱Art电池版</em></li>
</ul>
</div>
</li>
<li><div class="hdm-left"><a href="">家电</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">智能 路由器</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">电源 配件</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">健康</a><i>></i></div></li>
<li><div class="hdm-left"><a href="">生活 箱包</a><i>></i></div></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 促销商品区 -->
<div class="w2 m2">
<div class="w1">
<div class="sp-div sp-first">
<ul>
<li><a href=""><img src="/images/促销商品区1.png" alt="">保障服务</a></li>
<li><a href=""><img src="/images/促销商品区2.png" alt="">企业团购</a></li>
<li><a href=""><img src="/images/促销商品区3.png" alt="">F码通道</a></li>
<li><a href=""><img src="/images/促销商品区4.png" alt="">米粉卡</a></li>
<li><a href=""><img src="/images/促销商品区5.png" alt="">以旧换新</a></li>
<li><a href=""><img src="/images/促销商品区6.png" alt="">话费充值</a></li>
</ul>
</div>
<div class="sp-div sp-last"><a href=""><img src="/images/促销商品区7.jpg" alt=""></a></div>
<div class="sp-div sp-last"><a href=""><img src="/images/促销商品区8.jpg" alt=""></a></div>
<div class="sp-div sp-last"><a href=""><img src="/images/促销商品区9.jpg" alt=""></a></div>
</div>
</div>
<!--商品区 -->
<div class="m">
<div class="w1 m3"><a href=""><img src="/images/商品区1.webp" alt=""></a></div>
<!-- 第一个商品 -->
<div class="w1 phone">
<h2>手机</h2>
<div class="phone-left">
<a href="">
<img src="/images/商品区2.webp" alt="">
</a>
</div>
<div class="phone-right right1">
<div><img src="/images/商品区3.webp" alt="">
<h3>Redmi Note 12 5G</h3>
<p>三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量</p>
<i>1199元起</i>
</div>
<div><img src="/images/商品区4.webp" alt="">
<h3>Redmi K50</h3>
<p>2K直屏的狠旗舰</p>
<i>1699元起</i>
</div>
<div><img src="/images/商品区5.webp" alt="">
<h3>Redmi Note 12 Pro</h3>
<p>IMX766 防抖相机｜OLED 柔性直屏｜67W 闪充</p>
<i>2099元起</i>
</div>
<div><img src="/images/商品区6.webp" alt="">
<h3>Redmi Note 12 Pro+</h3>
<p>2亿超清防抖相机｜OLED 柔性直屏</p>
<i>1099元起</i>
</div>
<div><img src="/images/商品区7.webp" alt="">
<h3>Redmi Note 11 5G</h3>
<p>5000mAh大电量</p>
<i>2099元起</i>
</div>
<div><img src="/images/商品区8.webp" alt="">
<h3>Redmi Note 11T Pro</h3>
<p>天玑8100｜真旗舰芯</p>
<i>1599元起</i>
</div>
<div><img src="/images/商品区9.webp" alt="">
<h3>Xiaomi 12S Pro</h3>
<p>骁龙8+ 旗舰处理器 | 徕卡影像</p>
<i>4399元起</i>
</div>
<div><img src="/images/商品区10.webp" alt="">
<h3>Redmi K50 至尊版</h3>
<p>骁龙8+ ｜1.5K 高清直屏</p>
<i>2699元起</i>
</div>
</div>
</div>
<!-- ----------------------------------------------------------------------------------------------------------------- -->
<!-- 第二个商品 -->
<div class="w1 phone">
<h2>智能家居</h2>
<div class="phone-right right2">
<div class="left-move"><img src="/images/日用百货1.webp" alt="">
</div>
<div><img src="/images/日用百货2.webp" alt="">
<h3>小米小爱音箱 Pro</h3>
<p>澎湃低音，语音遥控传统家电</p>
<i>899元</i> <del>999元</del>
</div>
<div><img src="/images/日用百货3.webp" alt="">
<h3>小米AI音箱（第二代）</h3>
<p>低频饱满有深度，人声清晰有细节</p>
<i>199元</i> <del>299元</del>
</div>
<div><img src="/images/日用百货4.webp" alt="">
<h3>Xiaomi智能家庭屏 10</h3>
<p>MIUI Home｜10.1" 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 KTV｜小爱同学</p>
<i>499元</i> <del>599元</del>
</div>
<div><img src="/images/日用百货5.webp" alt="">
<h3>小米小爱音箱Play 增强版</h3>
<p>LED时钟显示，语音控制传统家电</p>
<i>99元</i> <del>199元</del>
</div>
<div class="left-move"><img src="/images/日用百货6.webp" alt="">
</div>
<div><img src="/images/日用百货9.webp" alt="">
<h3>小米小爱音箱 Play</h3>
<p>听音乐、语音遥控家电</p>
<i>219元</i> <del>299元</del>
</div>
<div><img src="/images/日用百货7.webp" alt="">
<h3>小米小爱触屏音箱</h3>
<p>可视化智能家居，海量视听资源</p>
<i>269元</i> <del>299元</del>
</div>
<div><img src="/images/日用百货8.webp" alt="">
<h3>Xiaomi Sound</h3>
<p>HARMAN工程师专业调音，高保真震撼音质</p>
<i>179元</i> <del>199元</del>
</div>
<div class="small-box"><img src="/images/日用百货9.webp" alt=""><a href=""></a>
<h3>小米小爱音箱</h3>
<i>209元</i></a>
</div>
<div class="small-box">
<h2></h2><a href="">
<h3>浏览更多</h3>
<p>小爱音响</p>
</a>
</div>
</div>
</div>
<!-- 第三个商品 -->
<div class="kong"></div>
<div class="w1 m3"><a href=""><img src="/images/日用百货10.webp" alt=""></a></div>
<div class="w1 phone">
<h2>日用百货</h2>
<div class="phone-right right2">
<div class="left-move"><img src="/images/智能家居1.webp" alt="">
</div>
<div><img src="/images/智能家居2.webp" alt="">
<h3>米家声波电动牙刷T700</h3>
<p>智能洁齿丨强劲动力</p>
<i>29元</i> <del>39元</del>
</div>
<div><img src="/images/智能家居3.webp" alt="">
<h3>米家电动剃须刀S500</h3>
<p>3刀头360°浮动丨超长续航</p>
<i>159元</i> <del>179元</del>
</div>
<div><img src="/images/智能家居4.webp" alt="">
<h3>米家理发器</h3>
<p>米家理发器</p>
<i>129元</i> <del>149元</del>
</div>
<div><img src="/images/智能家居5.webp" alt="">
<h3>米家自动洗手机套装</h3>
<p>伸手出泡，抑菌有效</p>
<i>69元</i> <del>79元</del>
</div>
<div class="left-move"><img src="/images/智能家居6.webp" alt="">
</div>
<div><img src="/images/智能家居7.webp" alt="">
<h3>米家电动冲牙器</h3>
<p>超长待机丨4挡模式</p>
<i>199元</i> <del>219元</del>
</div>
<div><img src="/images/智能家居8.webp" alt="">
<h3>米家声波电动牙刷T500</h3>
<p>过压提醒丨健康报告</p>
<i>159元</i> <del>199元</del>
</div>
<div><img src="/images/智能家居9.webp" alt="">
<h3>米家电子体温计</h3>
<p>快速知体温，精准更智能</p>
<i>89元</i> <del>99元</del>
</div>
<div class="small-box"><img src="/images/智能家居10.webp" alt=""><a href=""></a>
<h3>米家电子体温计</h3>
<i>89元</i></a>
</div>
<div class="small-box">
<h2></h2><a href="">
<h3>浏览更多</h3>
<p>健康防护</p>
</a>
</div>
</div>
</div>
</div>
<!-- 踝部区 -->
<div class="w2 mm">
<div class="w1 m4">
<ul>
<li><a href="" id="border-out"><i></i> 预约维修服务</a></li>
<li><a href=""><i></i> 7天无理由退货</a></li>
<li><a href=""><i></i> 15天免费换货</a></li>
<li><a href=""><i></i> 满69元包邮</a></li>
<li><a href=""><i></i> 1100余家售后网点</a></li>
</ul>
</div>
<div class="w1 m5">
<dl class="footer-dl" id="footer-dl">
<dt>选购指南</dt>
<dd><a href="">手机</a></dd>
<dd><a href="">电视</a></dd>
<dd><a href="">笔记本</a></dd>
<dd><a href="">平板</a></dd>
<dd><a href="">穿戴</a></dd>
<dd><a href="">耳机</a></dd>
<dd><a href="">家电</a></dd>
<dd><a href="">路由器</a></dd>
<dd><a href="">音箱</a></dd>
<dd><a href="">配件</a></dd>
</dl>
<dl class="footer-dl">
<dt>服务中心</dt>
<dd><a href="">申请售后</a></dd>
<dd><a href="">售后服务</a></dd>
<dd><a href="">维修服务价格</a></dd>
<dd><a href="">订单查询</a></dd>
<dd><a href="">以旧换新</a></dd>
<dd><a href="">保障服务</a></dd>
<dd><a href="">防伪查询</a></dd>
<dd><a href="">F码通道</a></dd>
</dl>
<dl class="footer-dl">
<dt>线下门店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服务网点</a></dd>
<dd><a href="">授权体验</a></dd>
</dl>
<dl class="footer-dl">
<dt>关于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投资者关系</a></dd>
<dd><a href="">环境，社会管制</a></dd>
<dd><a href="">廉洁举报</a></dd>
</dl>
<dl class="footer-dl">
<dt>关注我们</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">联系我们</a></dd>
<dd><a href="">公益基金会</a></dd>
</dl>
<div class="phone-number">
<i>400-100-5678</i>
<p>8:00-18:00 （仅收市话费）</p>
<a href=""><em></em> 人工客服</a>
</div>
</div>
</div>
<!-- 底部区 -->
<div class="w2 mmm">
<div class="m6 w1">
<div class="bottom-logo"></div>
<div class="bottom-font">
<p><a href="" class="bottom-change">小米商城</a>|<a href="" class="bottom-change"> MIUI </a>|<a href=""
class="bottom-change">米家</a>|<a href="" class="bottom-change">米聊</a>|<a href=""
class="bottom-change">多看</a>|<a href="" class="bottom-change">游戏</a>|<a href=""
class="bottom-change">政企服务</a>|<a href="" class="bottom-change">小米天猫店</a>|<a href=""
class="bottom-change">小米集团隐私政策</a>|<a href="" class="bottom-change">小米公司儿童信息保护规则</a>|<a href=""
class="bottom-change">小米商城隐私政策</a>|<a href="" class="bottom-change">小米商城用户协议</a>|<a href=""
class="bottom-change">问题反馈</a>|<a href="" class="bottom-change">Select Location</a></p>
<p><a href="" class="bottom-change">北京互联网法院法律服务工作站</a>|<a href="" class="bottom-change">中国消费者协会</a>|<a
href="" class="bottom-change">北京市消费者协会</a></p>
<p>© mi.com京ICP证110507号 京ICP备10046444号 公网安备11010802020134号 京网文[2020]0276-042号<br>
(京) 网械平台备字 (2018) 第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证<br>
违法和不良信息举报电话: 171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</p>
</div>
<div class="bottom-img">
<img src="/images/底部1.png" alt="">
<img src="/images/底部2.png" alt="">
<img src="/images/底部3.png" alt="">
<img src="/images/底部4.png" alt="">
<img src="/images/底部5.png" alt="">
</div>
<div class="last"></div>
</div>
</div>
<!-- 功能区 -->
<div class="set">
<div class="set1">
<a href=""></a>
<div id="set-">
<img src="/images/底部6.png" alt="" class="set-1">
<span class="set-2">扫码领取新人百元礼包</span>
<div class="right-triango"></div>
</div>
</div>
<div class="set1">
<a href=""></a>
<div id="set-change">
<span class="set-2 set-2max">个人中心</span>
<div class="right-triango"></div>
</div>
</div>
<div class="set1">
<a href=""></a>
<div id="set-change">
<span class="set-2 set-2max">售后服务</span>
<div class="right-triango"></div>
</div>
</div>
<div class="set1">
<a href=""></a>
<div id="set-change">
<span class="set-2 set-2max">人工客服</span>
<div class="right-triango"></div>
</div>
</div>
<div class="set1">
<a href=""></a>
<div id="set-change">
<span class="set-2 set-2max">购物车</span>
<div class="right-triango"></div>
</div>
</div>
<div class="set2">
<a href=""></a>
<div id="set-change">
<span class="set-2 set-2max">回到顶部</span>
<div class="right-triango"></div>
</div>
</div>
</div>
</body>
</html>/css/index.css
* {
margin: 0;
padding: 0
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7yi5yk');
src: url('fonts/icomoon.eot?7yi5yk#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7yi5yk') format('truetype'),
url('fonts/icomoon.woff?7yi5yk') format('woff'),
url('fonts/icomoon.svg?7yi5yk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
button {
cursor: pointer;
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
border: 0;
outline: none;
}
ul li {
list-style: none;
}
a{
text-decoration: none;
}
.w1 {
width: 1226px;
height: 100%;
margin: 0 auto;
}
.w2 {
width: 100%;
}
.advertisement {
height: 96px;
background-image: url(/images/顶部广告.png);
background-position: 50%;
background-repeat: no-repeat;
}
/* 导航栏 */
.nav {
height: 40px;
background-color: rgb(51, 51, 51);
}
.header {
height: 100%;
margin: 0 auto;
}
.nav-left li {
float: left;
line-height: 40px;
}
.nav-left .app{
position: relative;
}
.sub-app img{
margin-top: 5px;
width: 90px;
height: 90px;
}
.sub-app{
position: absolute;
top: 40px;
left: 41%;
width: 124px;
height: 0;
background: #fff;
margin-left: -55px;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 14px;
color: #333;
line-height: 1;
overflow: hidden;
transition: height .3s;
z-index: 99;
}
.nav-left a,
.nav-right a {
font-size: 12px;
color: #b0b0b0;
text-decoration: none;
transition: color .2s linear 0s;
}
.nav-left a:hover,
.nav-right a:hover{
color: #fff;
}
.app:hover>.sub-app{
height: 120px;
}
.app:hover>.top-triango{
visibility: visible;
}
.app:hover>a{
color: #ffffff;
}
.nav-left span,
.nav-right span {
font-style: 10px;
color: #424242;
margin: 0 7px;
}
.nav-right li {
float: right;
line-height: 40px;
}
.car{
position: relative;
width: 120px;
height: 40px;
background-color: #424242;
/* 字体水平居中 */
text-align: center;
margin-left: 20px;
transition: all .2s linear 0s;
}
.car a{
display: inline-block;
font-family: 'icomoon';
width: 100%;
height: 100%;
transition: all .2s linear 0s;
}
.car i{
font-style: normal;
font-size: 15px;
}
.empty{
position: absolute;
right: 0;
top: 40px;
z-index: 31;
width: 316px;
height: 0;
color: #424242;
font-size: 12px;
line-height: 100px;
background: #fff;
box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
overflow: hidden;
transition: height .3s;
}
.car:hover{
background-color: #fff;
}
.car:hover>a{
color: #ff6700;
}
.car:hover>.empty{
height: 100px;
}
/* 副导航栏 */
.big-sub{
width: 100%;
height: 100px;
}
.sub-main{
position: relative;
width: 1226px;
height: 100%;
/* border: 1px solid red; */
margin: 0 auto;
}
.sub-left{
float: left;
height: 100px;
width: 850px;
border: 1px solid transparent;
}
.sub-left li{
float: left;
position: relative;
line-height: 100px;
margin-left: 23px;
}
.sub-left li img{
height: 60px;
width: 60px;
margin-left: -10px;
margin-right: 100px;
margin-top: 20px;
}
.sub-left li a{
font-size: 16px;
color: #333333;
text-decoration: none;
transition: all .2s linear 0s;
}
.left-change{
position: absolute;
top: 97px;
left: -1267%;
width: 2560px;
height: 0;
background: #fff;
margin-left: -55px;
box-shadow: 0 1px 5px #aaa;
text-align: center;
font-size: 16px;
color: #333;
/* line-height: 1; */
overflow: hidden;
transition: height .3s;
z-index: 99;
}
.left-change ul{
width: 1226px;
height: 100%;
background-color: #fff;
margin-left: 669px;
}
.left-change li{
float: left;
width: 160px;
height: 238px;
margin-left: 42px;
}
.left-change li::before{
position: absolute;
top: 26px;
right: 164px;
width: 1px;
height: 100px;
content: "";
background: rgb(225, 225, 225);
margin: 0 26px;
}
.left-change1::before{
visibility: hidden;
}
.left-change p{
height: 21px;
}
.left-change i{
font-style: normal;
font-size: 12px;
color: #ff6700;
}
.left-change1{
margin-left: 50px;
}
.left-change ul li img{
display: block;
width: 160px;
height: 110px;
}
.sub-left li:hover>a{
color: #ff6700;
}
.sub-left li:hover>.left-change{
height: 238px;
}
.sub-right{
position: absolute;
width: 374px;
height: 100px;
line-height: 100px;
right: -6%;
/* text-align: right; */
}
.search{
display: inline-block;
width: 245px;
height: 50px;
margin-right: -4px;
border: 1px solid #e0e0e0;
border-right: none;
color: rgb(117, 117, 117);
/* vertical-align:top； */
}
button{
position: absolute;
display: inline-block;
width: 52px;
height: 52px;
margin-right: 50px;
top: 25px;
right: 26px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
font-family: 'icomoon';
transition: all .2s linear 0s;
/* vertical-align:top； */
}
button:hover{
color: white;
background-color: #ff6700;
}
/* 轮播图 */
.m1{
height: 460px;
}
.lbt{
position: relative;
width: 100%;
height: 100%;
background-image: url(/images/轮播图1.webp);
background-size: 1226px 460px;
background-repeat: no-repeat;
animation:10s movie infinite;
}
@keyframes movie {
0%{background-image: url(/images/轮播图1.webp)}
25%{background-image: url(/images/轮播图2.jpg)}
50%{background-image: url(/images/轮播图1.webp)}
75%{background-image: url(/images/轮播图2.jpg)}
100%{background-image: url(/images/轮播图1.webp)}
}
.button-right{
position: absolute;
right: 1px;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
z-index: 10;
/* outline: none; */
}
.button-right i{
position: absolute;
display: block;
font-style: normal;
left: -14px;
}
.button-left{
position: absolute;
left: 234px;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
z-index: 10;
}
.button-right,
.button-left{
font-family: 'icomoon';
font-size: 55px;
color: rgb(216, 216, 217);
background-color: transparent;
line-height: 69px;
cursor: pointer;
text-align: center;
}
.button-right:hover,
.button-left:hover{
color: #fff;
background-color: rgb(124,124,126);
}
.hdm{
position: absolute;
width: 234px;
height: 100%;
background: rgba(105, 101, 101, .6);
}
.hdm ul{
margin-top: 20px;
}
.hdm li{
width: 100%;
height: 42px;
line-height: 42px;
}
.hdm .hdm-left{
background: rgba(105, 101, 101, 0);
}
.hdm li a{
color: #ffffff;
font-size: 14px;
text-decoration: none;
margin-left: 21px;
}
.hdm i{
float: right;
font-style: normal;
font-weight: 900;
color: #e0e0e0;
margin-right: 20px;
}
.hdm-list{
position: absolute;
top: 0px;
left: 289px;
width: 0px;/* 992px */
height: 460px;
background: #fff;
margin-left: -55px;
box-shadow: 0 1px 4px #aaa;
text-align: center;
/* font-size: 16px;
color: #333;
line-height: 1; */
overflow: hidden;
transition: height .3s;
z-index: 20;
}
.hdm-list ul{
float: left;
margin-top: 0;
}
.hdm-list li{
width: 247px;
height: 76px;
line-height: 76px;
background-color: #fff;
}
.color-change{
font-size: 12px;
color: #000;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all .2s;
}
.hdm-list img{
float: left;
width: 40px;
height: 40px;
margin: 17px 14px 0 54px;
}
.hdm li:hover>.hdm-left{
background-color: rgb(255,103,0);
}
.hdm li:hover>.hdm-list{
width: 992px;
}
.hdm-list li:hover>.color-change{
color: #ff6700;
}
/* 促销商品区 */
.m2{
height: 170px;
margin-top: 20px;
margin-bottom: 25px;
}
.sp-div{
float: left;
width: 316px;
height: 170px;
background-color: red;
margin-left: 14px;
}
.sp-div img{
width: 100%;
}
.sp-first{
width: 234px;
background-color: #5F5750;
margin-left: 0;
}
.sp-last{
transition: box-shadow .3s linear 0s;
}
.sp-last:hover{
box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
}
.sp-first li{
float: left;
position: relative;
width: 70px;
height: 82px;
margin: 0 3px;
/* background-color: red; */
}
.sp-first li a{
display: block;
padding-top: 18px;
text-overflow: ellipsis;
color: #fff;
opacity: .7;
font-size: 10px;
text-align: center;
transition: opacity 0.5s linear 0s;
}
.sp-first li a:hover{
opacity: 1;
}
.sp-first li img{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
}
.sp-first li::before{
top: 0px;
left: 6px;
width: 64px;
height: 1px;
}
.sp-first li::after{
top: 6px;
/* left: 0; */
width: 1px;
height: 70px;
}
.sp-first li::after,
.sp-first li::before{
position: absolute;
content: "";
background: #665e57;
}
/* 商品区 */
.m{
width: 100%;
height: 2380px;
background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
overflow: hidden;
}
.m3{
height: 120px;
margin-top: 30px;
margin-bottom: 20px;
}
.m3 img{
height: 100%;
}
.phone h2{
font-size: 22px;
font-weight: 200;
color: #333;
margin: 15px 0;
}
.phone-left{
float: left;
width: 234px;
height: 614px;
}
.phone-left img{
height: 100%;
width: 100%;
transition: all .2s linear 0s;
}
.phone-right{
float: right;
/* width: 992px; */
height: 614px;
text-align: center;
}
.right1{
width: 992px;
}
.right2{
width: 1226px;
}
.phone-right div{
float: left;
width: 234px;
height: 300px;
background-color: #FFFFFF;
margin-left: 14px;
margin-bottom: 14px;
transition: all .3s linear 0s;
}
.phone-right div:hover,
.phone-left img:hover{
transform: translateY(-4px);
box-shadow: -5px 7px 23px 4px rgb(0,0,0,30%);
}
.phone-right img{
width: 160px;
height: 160px;
margin-top: 35px;
}
.phone-right h3{
margin: 0 10px 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 14px;
font-weight: 400;
color: #333;
}
.phone-right p{
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
color: #b0b0b0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.phone-right i{
font-style: normal;
font-size: 14px;
color: #ff6700;
/* margin: 10px 0px 10px 14px; */
}
.phone{
height: 614px;
margin-bottom: 60px;
}
.phone-right .left-move{
margin-left: 0px;
}
.phone-right .left-move img{
width: 100%;
height: 100%;
margin-top: 0;
}
.phone-right del{
color: #b0b0b0;
font-size: 14px;
}
.phone-right .small-box{
position: relative;
z-index: 1;
float: left;
width: 234px;
height: 143px;
margin-left: 14px;
margin-bottom: 14px;
background: #fff;
}
.small-box i{
display: block;
margin: 0 125px 0 0;
}
.small-box h3{
display: block;
margin: -10px 110px 5px 30px;
font-size: 14px;
font-weight: 400;
}
.small-box img{
/* display: inline-block; */
float: right;
position: absolute;
width: 80px;
height: 80px;
}
.small-box a{
display: inline-block;
margin: 61px -16px 0px -20px;
}
.small-box p{
display: block;
margin: 0 88px 0 0;
}
.small-box h2{
font-family: 'icomoon';
float: right;
position: absolute;
font-size: 48px;
color: #ff6700;
margin: 46px 0px 0px 151px;
}
.kong{
height: 1px;
}
/* 踝部区 */
.mm{
height: 472px;
}
.m4{
height: 80px;
border-bottom: 1px solid #e0e0e0;
}
.mm ul{
padding: 27px 0;
}
.mm ul li a{
float: left;
width: 19.7%;
height: 25px;
border-left: 1px solid #e0e0e0;
font-size: 16px;
line-height: 25px;
text-align: center;
color: #979797;
font-weight: 400;
transition: all .25s ;
}
.mm ul li a:hover{
color: #ff6700;
}
.mm ul li i{
font-family: 'icomoon';
font-style: normal;
font-size: 24px;
}
#border-out{
border-left: 0px;
}
.m5{
height: 312.5px;
padding: 40px 0;
}
.footer-dl{
float: left;
width: 160px;
}
#footer-dl{
margin-left: 160px;
}
.footer-dl dt{
margin: -1px 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
}
.footer-dl dd a{
color: #757575;
font-size: 12px;
transition: all .3s;
}
.footer-dl dd a:hover{
color: #ff6700;
}
.phone-number{
float: right;
width: 251px;
border-left: 1px solid #e0e0e0;
text-align: center;
color: #616161;
}
.phone-number i{
font-style: normal;
font-size: 22px;
line-height: 1;
color: #ff6700;
margin: 0 0 5px 0;
}
.phone-number p{
margin: 0 0 5px 0;
font-size: 12px;
color: #616161;
}
.phone-number a{
display: inline-block;
font-family: 'icomoon';
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
background: #fff;
color: #ff6700;
border: 1px solid #ff6700;
transition: all .4s;
}
.phone-number a em{
font-style: normal;
font-size: 13px;
}
.phone-number a:hover{
color: #fff;
background-color: #ff6700;
}
/* 底部区 */
.mmm{
height: 210px;/* 204px */
padding: 30px 0;
font-size: 12px;
background: #fafafa;
}
.m6{
position: relative;
height: 157px;
color: #b0b0b0;
padding-left: 77px;
font-size: 12px;
}
.bottom-logo{
width: 56px;
height: 56px;
margin-right: 20px;
background: url(/images/logo.png) no-repeat;
background-size: 56px;
position: absolute;
top: 0;
left: 0;
}
.bottom-font{
color: #b0b0b0;
padding-left: 4px;
font-size: 12px;
}
.bottom-img{
height: 28px;
margin: 4px 0 15px;
padding-left: 5px;
}
.bottom-img img{
width: auto;
height: 28px;
margin-left: 0;
}
.bottom-change{
color: #757575;
transition: all .2s;
}
.bottom-change:hover{
color: #ff6700;
}
/* 功能区 */
.set{
position: fixed;
right: 0;
bottom: 40px;
text-align: center;
z-index: 99;
}
.set1,
.set2{
position: relative;
margin-top: -1px;
background-color: #fff;
border: 1px solid #f5f5f5;
width: 25px;
height: 40px;
/* text-align: center; */
font-family: 'icomoon';
}
.set2{
margin-top: 14px;
}
.set1 a,
.set2 a{
position: absolute;
bottom: -2px;
left: -2px;
width: 30px;
height: 30px;
color: #757575;
transition: opacity .3s;
}
.set1 :hover,
.set2 :hover{
color: #ff6700;
}
.set-1{
display: block;
width: 100px;
height: 100px;
margin: 6px auto;
/* visibility: hidden; */
}
.set-2{
display: block;
width: 82px;
margin: 14px auto 0;
color: #757575;
text-align: center;
}
.set-2max{
width: 56px;
font-size: 14px;
margin-top: 0;
}
#set-{
position: absolute;
left: -138px;
top: 0;
padding: 14px;
background: #fff;
border: 1px solid #f5f5f5;
transition: opacity .3s;
/* transform: translateZ(0); */
/* opacity: 0; */
visibility: hidden;
z-index: 99;
}
#set-change{
position: absolute;
left: -84px;
top: 0;
padding: 9px;
background: #fff;
border: 1px solid #f5f5f5;
transition: opacity .3s;
/* transform: translateZ(0); */
/* opacity: 0; */
visibility: hidden;
z-index: 99;
}
.right-triango{
position: absolute;
height: 0;
width: 0;
border: 8px solid #fff;
border-right: 0;
border-top-color: transparent;
border-bottom-color: transparent;
top: 11px;
right: -6px;
z-index: 100;
visibility: hidden;
}
.top-triango{
z-index: 100;
position: absolute;
height: 0;
width: 0;
border: 8px solid white;
border-top: 0;
border-left-color: transparent;
border-right-color: transparent;
top: 32px;
right: 12px;
visibility: hidden;
}
.set1:hover>#set-,
.set1:hover>#set-change,
.set2:hover>#set-change{
visibility: visible;
}
.last{
clear: both;
margin: 30px auto 0;
width: 100%;
height: 19px;
background: url(/images/last.png) no-repeat center 0;
}因为博主是新人，所以代码可能不太规范，望大佬们海涵。新手同志们最好是先自己敲一遍，熟练一下套路。有文件需求的同学，点赞关注后私信给我哟