此网页为静态网页 未使用JavaScript 使用了弹性盒子（flex）来布局 使用了SCSS（后有CSS）方法不唯一 仅供参考 [类名和注释均为随便起的，可能不太规范 仅供参考]。

HTML部分

<!DOCTYPE html>
<html lang="zh-CH">
<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>一加手机官网 -OnePlus 9系列，总有故事 被影像看见。</title><!-- title图标 --><link rel="icon" href="https://image01.oneplus.cn/shop/202003/19/677/7fa57f35c179bad9cc9f18e2dd9b1d40.ico?v=20200219" type="image/x-icon"/><!-- icon图标 --><link rel="stylesheet" href="http://at.alicdn.com/t/font_2475652_d2fwu36alp.css"><script src="http://at.alicdn.com/t/font_2475652_d2fwu36alp.js"></script><!-- 本地css --><link rel="stylesheet" href="./css/index.min.css">
</head>
<body><!-- 顶部导航开始 --><div class="header"><div class="nav"><!-- logo部分开始 --><div class="nav-left"><a href="#"><i class="iconfont icon-yijia"></i><span>ONEPLUS</span></a></div><!-- logo部分结束 --><div class="nav-center"><ul class="h-nav-item"><li class="item-content"><a href="#">手机<span>New</span></a><div class="hidden-item-phone"><ul class="hidden"><li class="hidden-item"><a href="#"><span class="new">New</span><img src="./img/hidden1.jpg" alt=""><p>OnePlus 9 Pro 5G</p></a></li><li class="hidden-item"><a href="#"><span class="new">New</span><img src="./img/hidden2.jpg" alt=""><p>OnePlus 9 5G</p></a></li><li class="hidden-item"><a href="#"><img src="./img/hidden3.jpg" alt=""><P>OnePlus 8T</P></a></li><li class="hidden-item"><a href="#"><img src="./img/hidden4.jpg" alt=""><P>OnePlus 8 Pro</P></a></li><li class="hidden-item"><a href="#"><img src="./img/hidden5.jpg" alt=""><p>OnePlus 8</p></a></li></ul></div></li><li class="item-content"><a href="#">OnePlus Watch<span>New</span></a></li><li class="item-content"><a href="#">配件</a><div class="hidden-item-phone"><ul class="hidden"><li class="hidden-item"><a href="#"><span class="new">New</span><img src="./img/hidden6.jpg" alt=""><p>50W 无线充电器</p></a></li><li class="hidden-item"><a href="#"><img src="./img/hidden7.jpg" alt=""><P>OnePlus Buds Z</P></a></li><li class="hidden-item"><a href="#"><img src="./img/hidden8.jpg" alt=""><P>OnePlus Buds</P></a></li><li class="hidden-item"><a href="#"><img src="./img/hidden9.jpg" alt=""><p>城市旅行者背包</p></a></li></ul></div></li><li class="item-content"><a href="#">商城</a></li><li class="item-content"><a href="#">品牌</a></li><li class="item-content"><a href="#">服务</a></li><li class="item-content"><a href="#">论坛</a></li></ul></div><div class="nav-right"><div href="#" class="nav-right-left"><i class="iconfont icon-yonghu"></i><!-- 隐藏用户部分开始 --><div class="hidden-user"><a href="#"><ul class="hidden-item"><li>订单</li><li>账户</li><li>推荐有礼</li><li><span> 登录</span></li></ul></a></div><!-- 隐藏用户部分结束 --></div><div href="#" class="nav-right-right"><i class="iconfont icon-gouwudaizi-"></i><!-- 隐藏购物部分开始 --><div class="hidden-gouwudai"><div class="hidden-text"><p>还差 ￥ 99.00 免邮</p></div><div class="goods"><div class="goods-box"><i class="iconfont icon-gouwudaizi-"></i><p>您的购物车里没有商品！</p></div></div><div class="box-bottom-text"><div class="text-border-box"><div class="text-border"><p>购物车</p></div></div></div></div><!-- 隐藏购物部分结束 --></div></div></div></div><!-- 顶部导航结束 --><!-- 图片内容开始 --><div class="section"><img src="./img/banner1.jpg" alt=""><div class="item-des"><p class="font-headline">OnePlus 9R 5G</p><p class="font-subheading-t">硬核伙伴 实力集结</p><p class="font-subheading-b">4 月 15 日 14:00 线上发布</p><a href="#" class="item-more-top">了解详情</a></div></div><div class="section"><img src="./img/banner2.jpg" alt=""><div class="item-des"><p class="font-subheading-t">总有故事 被影像看见</p><p class="font-headline">OnePlus 9Pro 5G</p><p class="font-subheading-b">购机享两年官方质保服务。</p><p class="price">¥ 4999 起</p><a href="#" class="item-more-bottom">立即购买</a><div class="learn-more"><a href="#"><span>了解产品</span><i class="iconfont icon-dayu"></i></a></div></div></div><div class="section"><img src="./img/banner3.jpg" alt=""><div class="item-des"><p class="font-subheading-t">总有故事 被影像看见</p><p class="font-headline">OnePlus 9 5G</p><p class="font-subheading-b">购机享两年官方质保服务。</p><p class="price">¥ 3799 起</p><a href="#" class="item-more-bottom">立即购买</a><div class="learn-more"><a href="#"><span>了解产品</span><i class="iconfont icon-dayu"></i></a></div></div></div><div class="section"><img src="./img/banner4.jpg" alt=""><div class="item-des"><p class="font-subheading-t">带上去表现</p><p class="font-headline">OnePlus Watch</p><p class="font-subheading-b">手工抛光打磨 | 至长 14 天续航 | 110+ 运动模式  | 300+ 城市 <br> 地铁公交卡</p><p class="price">¥ 999 起</p><a href="#" class="item-more-bottom">立即预定</a><div class="learn-more"><a href="#"><span>了解产品</span><i class="iconfont icon-dayu"></i></a></div></div></div>
<!-- 图片内容结束 --><!-- 底部图片开始 -->
<div class="footer-item"><div class="footer-goods"><img src="./img/item1.png" alt=""><div class="know-more"><p class="details-t">站着躺着都闪充</p><p class="details-c">Warp 50 无线超级闪充充电器</p><a href="#" class="details-more"><span class="already">立即购买</span><i class="iconfont icon-dayu"></i></a></div></div><div class="footer-goods"><img src="./img/item2.png" alt=""><div class="know-more"><p class="details-t">一加城市旅行者背包</p><p class="details-c">献给 OnePlus 7 周年的礼物</p><a href="#" class="details-more"><span class="already">前往了解</span><i class="iconfont icon-dayu"></i></a></div></div><div class="footer-goods"><img src="./img/item3.jpg" alt=""><div class="know-more"><p class="details-t white">OnePlus Buds Z 无线耳机</p><p class="details-c white">乐享不停</p><a href="#" class="details-more white"><span class="already white">立即购买</span><i class="iconfont icon-dayu white"></i></a></div></div><div class="footer-goods"><img src="./img/item4.jpg" alt=""><div class="know-more"><p class="details-t">零售店体验与购买</p><!-- <p class="details-c">Warp 50 无线超级闪充充电器</p> --><a href="#" class="details-more"><span class="already">了解更多</span><i class="iconfont icon-dayu"></i></a></div></div>
</div>
<!-- 底部图片结束 --><!-- 底部版心开始 -->
<div class="image-txt2-component"><div class="cmp__imgtxt-list2"><!-- 内版心 --><ul class="row"><li class="cmp__imgtxt-list2-li"><a href="#"><i class="iconfont icon-qitian"></i><br><span>七天无理由退货</span></a></li><li class="cmp__imgtxt-list2-li"><a href="#"><i class="iconfont icon-15tian"></i><br><span>15天退货保障</span></a></li><li class="cmp__imgtxt-list2-li"><a href="#"><i class="iconfont icon-tian"></i><br><span>30天换货保障</span></a></li><li class="cmp__imgtxt-list2-li"><a href="#"><i class="iconfont icon-liwu"></i><br><span>69元全场包邮</span></a></li></ul></div>
</div>
<!-- 底部版心结束 --><!-- 底部导航开始 --><div class="footer-nav"><div class="container-text"><div class="footer-list"><dl class="list"><dt class="nav-trigger">一加产品</dt><dd class="nav-list-slide"><a href="#">OnePlus 9 Pro 5G</a></dd><dd class="nav-list-slide"><a href="#">OnePlus 9 5G</a></dd><dd class="nav-list-slide"><a href="#">OnePlus 8T</a></dd><dd class="nav-list-slide"><a href="#">OnePlus 8 Pro</a></dd><dd class="nav-list-slide"><a href="#">OnePlus 8</a></dd><dd class="nav-list-slide"><a href="#">OnePlus 7T</a></dd></dl><dl class="list"><dt class="nav-trigger">配件</dt><dd class="nav-list-slide"><a href="#">50W 无线充电器</a></dd><dd class="nav-list-slide"><a href="#">OnePlus Watch</a></dd><dd class="nav-list-slide"><a href="#">耳机</a></dd><dd class="nav-list-slide"><a href="#">壳/膜</a></dd><dd class="nav-list-slide"><a href="#">适配器/数据线</a></dd><dd class="nav-list-slide"><a href="#">套装</a></dd><dd class="nav-list-slide"><a href="#">生活馆</a></dd></dl><dl class="list"><dt class="nav-trigger">关于一加</dt><dd class="nav-list-slide"><a href="#">了解一加</a></dd><dd class="nav-list-slide"><a href="#">加入一加</a></dd><dd class="nav-list-slide"><a href="#">可持续发展</a></dd><dd class="nav-list-slide"><a href="#">ColorOS</a></dd><dd class="nav-list-slide"><a href="#">HydrogenOS</a></dd><dd class="nav-list-slide"><a href="#">云服务</a></dd><dd class="nav-list-slide"><a href="#">预置应用公示</a></dd></dl><dl class="list"><dt class="nav-trigger">服务支持</dt><dd class="nav-list-slide"><a href="#">购买帮助</a></dd><dd class="nav-list-slide"><a href="#">购买保险</a></dd><dd class="nav-list-slide"><a href="#">用户手册</a></dd><dd class="nav-list-slide"><a href="#">寄修服务</a></dd><dd class="nav-list-slide"><a href="#">服务中心</a></dd><dd class="nav-list-slide"><a href="#">联系我们</a></dd></dl></div><div class="footer-list-bottom"><div class="retailer-entry-font-body">更多选购方式，请<a href="#"> 查找零售店 </a></div><div class="customer-support"><div class="btn-container"><a href="#"><i class="iconfont icon-tonghua"></i><span>400-888-111</span></a><a href="#"><i class="iconfont icon-duanxin"></i><span>在线客服</span></a></div><span class="one-tel-time">周一至周日  9:00 - 22:00</span><span class="div-line">|</span><a href="#" class="social-media"><i class="iconfont icon-weixin"></i><i class="iconfont icon-weibo"></i><img class="erweima" src="./img/erweima.jpg" alt=""></a></div></div></div></div>
<!-- 底部导航结束 --><!-- 底部其他开始 -->
<div class="other-footer"><div class="other-footer-container"><div class="other-footer-top"><div class="top-left"><a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibiaoti-"></use></svg><span>中国大陆 ( 简体中文 / CNY )</span></a></div><div class="top-right"><ul class="footer-list"><li><a href="#">隐私政策<span class="line">|</span></a></li><li><a href="#">用户协议<span class="line">|</span></a></li><li><a href="#">竞赛规则<span class="line">|</span></a></li><li><a href="#">知识产权政策<span class="line line-s">|</span></a></li><li><a href="#">安全问题反馈<span class="line line-s">|</span></a></li><li><a href="#">站点地图</a></li></ul></div></div><div class="other-footer-bottom"><div class="bottom-left"><span class="no-wrap">粤ICP备<a href="#">13080605</a>号</span><span class="in-line">|</span><span class="no-wrap">备案主体编号:</span><span class="no-wrap">44201910955995</span><br><a href="#"><img src="./img/footer-police.png" alt=""><span>粤公网安备 44030402001407号</span></a></div><div class="bottom-right"><a href="#"><img src="./img/营业执照.png" alt=""></a><a href="#"><img src="./img/可信网站.png" alt=""></a></div></div></div>
</div>
<!-- 底部其他结束 -->
</body>
</html>

SCSS部分

*{margin: 0;padding: 0;
}
ul{list-style: none;
}
a{text-decoration: none;
}
html{font-family: "MYingHei W5","Roman-55","Microsoft Yahei",sans-serif;
}
// 顶部导航开始
.header{width: 100%;height: 60px;position: relative;top: 0;left: 0;.nav{display: flex;justify-content: space-between;.nav-left{width: 168px;height: 60px;a{display: block;color: #f50514;.iconfont{font-size: 34px;font-weight: 600;line-height: 60px;margin-left: 15px;vertical-align: -3px;}span{font-size: 20px;font-weight: 600;margin-left: -4px;}}}.nav-center{width: 700px;height: 60px;.h-nav-item{display: flex;justify-content: space-evenly;line-height: 60px;.item-content{box-sizing: border-box;&:hover{border-bottom: 2px solid #f50514;height: 60px;}&:hover .hidden-item-phone{display: block;z-index: 3;}a{display: block;font-size: 14px;color: #000;span{display: inline-block;transform: scale(.7);font-size: 14px;border: 2px solid #000;border-radius: 6px;line-height: 1;padding: 1px 2px;}}.hidden-item-phone{width: 100%;height: 388px;background-color: #fff;position: absolute;top: 60px;left: 0;border-top: 1px solid #999;display: none;.hidden{width: 1200px;height: 388px;margin: 0 auto;display: flex;justify-content: space-evenly;align-items: center;.hidden-item{width: 240px;height: 268px;&:hover p{color: #f50514;}a{display: block;text-align: center;position: relative;.new{position: absolute;top: 6px;left: 170px;transform: scale(.6);z-index: 6;}img{width: 190px;height: 210px;}p{font-size: 14px;color: #000;line-height: 10px;}}}}}}}}.nav-right{width: 120px;height: 60px;display: flex;.nav-right-left{display: block;width: 60px;height: 60px;text-align: center;box-sizing: border-box;&:hover{border-bottom: 2px solid #f50514;}&:hover .hidden-user{display: block;}.icon-yonghu{width: 100%;height: 100%;font-size: 26px;line-height: 60px;color: #000;font-weight: 600;}// 隐藏用户部分开始.hidden-user{position: relative;top: 0px;right: 200px;width: 320px;height: 260px;background-color: #fff;box-shadow: 0px 0px 2px #aaa;display: none;z-index: 8;.hidden-item{width: 320px;height: 200px;padding-top: 20px;box-sizing: border-box;li{display: block;height: 50px;text-align: left;margin: 0px 20px;border-bottom: 1px solid #bfbfbf;box-sizing: border-box;color: #828282;font-size: 14px;line-height: 50px;&:hover{color: #000;}span{display: inline;width: 28px;height: 37px;float: right;color: #09c;&:hover{border-bottom: 1px solid #09c;}}}}}// 隐藏用户部分结束}.nav-right-right{display: block;width: 60px;height: 60px;text-align: center;box-sizing: border-box;&:hover{border-bottom: 2px solid #f50514;}&:hover .hidden-gouwudai{display: block;}.icon-gouwudaizi-{width: 100%;height: 100%;font-size: 26px;line-height: 60px;color: #000;font-weight: 600;}}// 隐藏购物部分开始.hidden-gouwudai{position: absolute;top: 60px;right: 0px;width: 400px;height: 361px;background-color: #fff;box-shadow: 0px 0px 2px #aaa;display: none;z-index: 10;.hidden-text{width: 400px;height: 66px;background-color: #fff;padding: 0 20px;box-sizing: border-box;p{color: #000;font-size: 14px;text-align: left;line-height: 56px;border-bottom: 4px solid #e0e0e0;}}.goods{width: 400px;height: 116px;padding: 40px 20px;border-bottom: 1px solid #e0e0e0;.goods-box{width: 360px;height: 114px;.icon-gouwudaizi-{font-size: 86px;color: #e0e0e0;}p{margin-top: 16px;color: #aaa;}}}}.box-bottom-text{width: 400px;height: 110px;padding: 20px;.text-border-box{position: relative;width: 360px;height: 40px;background-color: #fff;margin: 10px 0px;border: 1px solid #000;z-index: 1;&:hover .text-border{width: 360px;background-color: #000}.text-border{width: 0px;height: 40px;line-height: 0px;transition:width .7s linear;&:hover p{color: #fff;}p{position: absolute;top: 20px;left: 180px;z-index: 4;color: #000;margin-left: -10px;transition:color .7s linear ;}}}} }}
}
// 隐藏购物部分结束// 顶部导航结束// 图片内容开始
.section{position: relative;height: 680px;margin-bottom: 10px;img{height: 100%;width: 100%;object-fit: cover;}.item-des{position: absolute;top: 50%;left: 20%;transform: translateY(-50%);color: #fff;.font-headline{font-size: 48px;}.font-subheading-t{margin-top: 10px;font-size: 20px;}.font-subheading-b{margin: 6px auto 40px;font-size: 20px;}.price{font-size: 24px;margin:20px 0 18px;}.item-more-top,.item-more-bottom{display: block;width: 64px;height: 40px;background-color: #f50514;padding: 0 20px;color: #fff;font-size: 16px;line-height: 40px;border-radius: 5px;}.learn-more{a{display: block;font-size: 16px;color: #fff;margin-top: 18px;&:hover .icon-dayu{display: inline-block;opacity: .5;transform: translateX(8px);}span{color: #fff;&:hover{border-bottom: 2px solid #828282;opacity: .5;}}.icon-dayu{font-size: 16px;color: #fff;transition: all .6s;}}}}
}
// 图片内容结束// 底部图片开始
.footer-item{padding: 20px;display: flex;flex-wrap: wrap;height: 1020px;align-content: space-between;justify-content: space-between;.footer-goods{width: calc(50% - 10px);height: 500px;position: relative;img{width: 100%;height: 100%;object-fit: cover;}.know-more{width: 620px;position: absolute;top: 0;left: 50%;color: #000;margin-top: 30px;transform: translateX(-50%);.details-t{font-size: 30px;text-align: center;margin-bottom: 10px;}.details-c{font-size: 20px;text-align: center;margin-bottom: 10px;}.white{color: #fff;}.details-more{display: block;text-align: center;color: #000;&:hover .icon-dayu{display: inline-block;transform: translateX(5px);}&:hover span{transform: translateX(-5px);display: inline-block;border-bottom: 2px solid #828282;opacity: .6;}.already{transition: all .6s;}.icon-dayu{opacity: .8;transition: all .6s;}}}}
}
// 底部图片结束// 底部版心开始
.image-txt2-component{width: 1903px;height: 177px;border-bottom: 1px solid #666;.cmp__imgtxt-list2{padding: 40px 20px 0;// 内版心.row{width: 1200px;height: 137px;margin: 0 auto;display: flex;.cmp__imgtxt-list2-li{width: 200px;height: 97px;margin: 0 50px;padding: 0 0 40px;a{display: block;text-align: center;.iconfont{font-size: 40px;color: #000;line-height: 97px;}span{font-size: 16px;color: #000;}}}}}
}
// 底部版心结束// 底部导航开始
.footer-nav{margin-top: 5px;width: 1903px;height: 390px;.container-text{width: 1200px;height: 390px;margin: 0 auto;.footer-list{width: 1200px;height: 310px;padding: 20px 15px 20px 0;box-sizing: border-box;display: flex;.list{width: 237px;height: 300px;.nav-trigger{padding: 0 20px;margin: 20px 0 10px;font-size: 16px;color: #000;}.nav-list-slide{margin:0 20px;a{display: block;color: #fff;margin-bottom: 8px;font-size: 16px;color: #828282;&:hover{color: #000;}}}}.list2{width: 237px;height: 340px;}.list3{width: 237px;height: 340px;}.list4{width: 237px;height: 300px;}}.footer-list-bottom{width: 1200px;height: 80px;padding: 20px;box-sizing: border-box;display: flex;justify-content: space-between;.retailer-entry-font-body{width: 190px;height: 40px;font-size: 14px;color: #000;line-height: 40px;a{font-size: 14px;color: #09c;}}.customer-support{width: 620px;height: 40px;display: flex;position: relative;.btn-container{width: 298px;height: 40px;margin-left: 16px;line-height: 40px;a{.iconfont{font-size: 40px;color: #09c;vertical-align: -8px;margin-right: 5px;}.icon-duanxin{font-size: 30px;}span{font-size: 18px;color: #09c;margin-right: 10px;}}}.one-tel-time{width: 156px;height: 21px;margin: 0 14px 0 4px;line-height: 44px;font-size: 14px;}.div-line{font-size: 14px;color: #828282;position: absolute;top: 10px;left: 486px;}.social-media{display: block;width: 110px;height: 40px;margin-left: 15px;display: flex;justify-content: space-between;.iconfont{font-size: 30px;margin: 0 5px;line-height: 40px;color: #828282;&:hover{color: #000;}}.erweima{width: 120px;height: 120px;position: absolute;top: -130px;left: 450px;display: none;}.icon-weixin:hover~.erweima{display: block;}}}}}
}
// 底部导航结束// 底部其他开始
.other-footer{width: 1903px;height: 150px;border-top: 1px solid #828282;.other-footer-container{width: 1200px;height: 150px;margin: 0 auto;.other-footer-top{width: 1160px;height: 64px;margin: 0 20px;display: flex;justify-content: space-between;.top-left{width: 240px;height: 24px;padding: 20px 0;.icon {width: 24px;height: 24px;margin-right: 6px;vertical-align: -7px;}span{font-size: 16px;color: #000;}}.top-right{width: 600px;height: 64px;margin-left: 20px;.footer-list{display: flex;justify-content: space-around;a{display: inline-block;font-size: 12px;color: #000;line-height: 64px;position: relative;.line{position: absolute;top: 0;left: 70px;color: #828282;}.line-s{position: absolute;top: 0;left: 92px;}}}}}.other-footer-bottom{width: 1160px;height: 46px;margin: 20px;display: flex;justify-content: space-between;.bottom-left{width: 330px;height: 46px;color: #999;.no-wrap{font-size: 12px; a{&:hover{color: #000;}}}.in-line{font-size: 12px;color: #999;}a{color: #999;span{font-size: 12px;color: #999;&:hover{color: #000;}}}}.bottom-right{width: 180px;height: 46px;display: flex;justify-content: space-between;align-items: center;a{display: block;img{width: 83px;height: 30px;}}}}}
}
// 底部其他结束

CSS 部分

* {margin: 0;padding: 0;
}ul {list-style: none;
}a {text-decoration: none;
}html {font-family: "MYingHei W5","Roman-55","Microsoft Yahei",sans-serif;
}.header {width: 100%;height: 60px;position: relative;top: 0;left: 0;
}.header .nav {display: flex;justify-content: space-between;
}.header .nav .nav-left {width: 168px;height: 60px;
}.header .nav .nav-left a {display: block;color: #f50514;
}.header .nav .nav-left a .iconfont {font-size: 34px;font-weight: 600;line-height: 60px;margin-left: 15px;vertical-align: -3px;
}.header .nav .nav-left a span {font-size: 20px;font-weight: 600;margin-left: -4px;
}.header .nav .nav-center {width: 700px;height: 60px;
}.header .nav .nav-center .h-nav-item {display: flex;justify-content: space-evenly;line-height: 60px;
}.header .nav .nav-center .h-nav-item .item-content {box-sizing: border-box;
}.header .nav .nav-center .h-nav-item .item-content:hover {border-bottom: 2px solid #f50514;height: 60px;
}.header .nav .nav-center .h-nav-item .item-content:hover .hidden-item-phone {display: block;z-index: 3;
}.header .nav .nav-center .h-nav-item .item-content a {display: block;font-size: 14px;color: #000;
}.header .nav .nav-center .h-nav-item .item-content a span {display: inline-block;transform: scale(0.7);font-size: 14px;border: 2px solid #000;border-radius: 6px;line-height: 1;padding: 1px 2px;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone {width: 100%;height: 388px;background-color: #fff;position: absolute;top: 60px;left: 0;border-top: 1px solid #999;display: none;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden {width: 1200px;height: 388px;margin: 0 auto;display: flex;justify-content: space-evenly;align-items: center;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden .hidden-item {width: 240px;height: 268px;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden .hidden-item:hover p {color: #f50514;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden .hidden-item a {display: block;text-align: center;position: relative;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden .hidden-item a .new {position: absolute;top: 6px;left: 170px;transform: scale(0.6);z-index: 6;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden .hidden-item a img {width: 190px;height: 210px;
}.header .nav .nav-center .h-nav-item .item-content .hidden-item-phone .hidden .hidden-item a p {font-size: 14px;color: #000;line-height: 10px;
}.header .nav .nav-right {width: 120px;height: 60px;display: flex;
}.header .nav .nav-right .nav-right-left {display: block;width: 60px;height: 60px;text-align: center;box-sizing: border-box;
}.header .nav .nav-right .nav-right-left:hover {border-bottom: 2px solid #f50514;
}.header .nav .nav-right .nav-right-left:hover .hidden-user {display: block;
}.header .nav .nav-right .nav-right-left .icon-yonghu {width: 100%;height: 100%;font-size: 26px;line-height: 60px;color: #000;font-weight: 600;
}.header .nav .nav-right .nav-right-left .hidden-user {position: relative;top: 0px;right: 200px;width: 320px;height: 260px;background-color: #fff;box-shadow: 0px 0px 2px #aaa;display: none;z-index: 8;
}.header .nav .nav-right .nav-right-left .hidden-user .hidden-item {width: 320px;height: 200px;padding-top: 20px;box-sizing: border-box;
}.header .nav .nav-right .nav-right-left .hidden-user .hidden-item li {display: block;height: 50px;text-align: left;margin: 0px 20px;border-bottom: 1px solid #bfbfbf;box-sizing: border-box;color: #828282;font-size: 14px;line-height: 50px;
}.header .nav .nav-right .nav-right-left .hidden-user .hidden-item li:hover {color: #000;
}.header .nav .nav-right .nav-right-left .hidden-user .hidden-item li span {display: inline;width: 28px;height: 37px;float: right;color: #09c;
}.header .nav .nav-right .nav-right-left .hidden-user .hidden-item li span:hover {border-bottom: 1px solid #09c;
}.header .nav .nav-right .nav-right-right {display: block;width: 60px;height: 60px;text-align: center;box-sizing: border-box;
}.header .nav .nav-right .nav-right-right:hover {border-bottom: 2px solid #f50514;
}.header .nav .nav-right .nav-right-right:hover .hidden-gouwudai {display: block;
}.header .nav .nav-right .nav-right-right .icon-gouwudaizi- {width: 100%;height: 100%;font-size: 26px;line-height: 60px;color: #000;font-weight: 600;
}.header .nav .nav-right .hidden-gouwudai {position: absolute;top: 60px;right: 0px;width: 400px;height: 361px;background-color: #fff;box-shadow: 0px 0px 2px #aaa;display: none;z-index: 10;
}.header .nav .nav-right .hidden-gouwudai .hidden-text {width: 400px;height: 66px;background-color: #fff;padding: 0 20px;box-sizing: border-box;
}.header .nav .nav-right .hidden-gouwudai .hidden-text p {color: #000;font-size: 14px;text-align: left;line-height: 56px;border-bottom: 4px solid #e0e0e0;
}.header .nav .nav-right .hidden-gouwudai .goods {width: 400px;height: 116px;padding: 40px 20px;border-bottom: 1px solid #e0e0e0;
}.header .nav .nav-right .hidden-gouwudai .goods .goods-box {width: 360px;height: 114px;
}.header .nav .nav-right .hidden-gouwudai .goods .goods-box .icon-gouwudaizi- {font-size: 86px;color: #e0e0e0;
}.header .nav .nav-right .hidden-gouwudai .goods .goods-box p {margin-top: 16px;color: #aaa;
}.header .nav .nav-right .box-bottom-text {width: 400px;height: 110px;padding: 20px;
}.header .nav .nav-right .box-bottom-text .text-border-box {position: relative;width: 360px;height: 40px;background-color: #fff;margin: 10px 0px;border: 1px solid #000;z-index: 1;
}.header .nav .nav-right .box-bottom-text .text-border-box:hover .text-border {width: 360px;background-color: #000;
}.header .nav .nav-right .box-bottom-text .text-border-box .text-border {width: 0px;height: 40px;line-height: 0px;transition: width .7s linear;
}.header .nav .nav-right .box-bottom-text .text-border-box .text-border:hover p {color: #fff;
}.header .nav .nav-right .box-bottom-text .text-border-box .text-border p {position: absolute;top: 20px;left: 180px;z-index: 4;color: #000;margin-left: -10px;transition: color .7s linear;
}.section {position: relative;height: 680px;margin-bottom: 10px;
}.section img {height: 100%;width: 100%;object-fit: cover;
}.section .item-des {position: absolute;top: 50%;left: 20%;transform: translateY(-50%);color: #fff;
}.section .item-des .font-headline {font-size: 48px;
}.section .item-des .font-subheading-t {margin-top: 10px;font-size: 20px;
}.section .item-des .font-subheading-b {margin: 6px auto 40px;font-size: 20px;
}.section .item-des .price {font-size: 24px;margin: 20px 0 18px;
}.section .item-des .item-more-top, .section .item-des .item-more-bottom {display: block;width: 64px;height: 40px;background-color: #f50514;padding: 0 20px;color: #fff;font-size: 16px;line-height: 40px;border-radius: 5px;
}.section .item-des .learn-more a {display: block;font-size: 16px;color: #fff;margin-top: 18px;
}.section .item-des .learn-more a:hover .icon-dayu {display: inline-block;opacity: .5;transform: translateX(8px);
}.section .item-des .learn-more a span {color: #fff;
}.section .item-des .learn-more a span:hover {border-bottom: 2px solid #828282;opacity: .5;
}.section .item-des .learn-more a .icon-dayu {font-size: 16px;color: #fff;transition: all .6s;
}.footer-item {padding: 20px;display: flex;flex-wrap: wrap;height: 1020px;align-content: space-between;justify-content: space-between;
}.footer-item .footer-goods {width: calc(50% - 10px);height: 500px;position: relative;
}.footer-item .footer-goods img {width: 100%;height: 100%;object-fit: cover;
}.footer-item .footer-goods .know-more {width: 620px;position: absolute;top: 0;left: 50%;color: #000;margin-top: 30px;transform: translateX(-50%);
}.footer-item .footer-goods .know-more .details-t {font-size: 30px;text-align: center;margin-bottom: 10px;
}.footer-item .footer-goods .know-more .details-c {font-size: 20px;text-align: center;margin-bottom: 10px;
}.footer-item .footer-goods .know-more .white {color: #fff;
}.footer-item .footer-goods .know-more .details-more {display: block;text-align: center;color: #000;
}.footer-item .footer-goods .know-more .details-more:hover .icon-dayu {display: inline-block;transform: translateX(5px);
}.footer-item .footer-goods .know-more .details-more:hover span {transform: translateX(-5px);display: inline-block;border-bottom: 2px solid #828282;opacity: .6;
}.footer-item .footer-goods .know-more .details-more .already {transition: all .6s;
}.footer-item .footer-goods .know-more .details-more .icon-dayu {opacity: .8;transition: all .6s;
}.image-txt2-component {width: 1903px;height: 177px;border-bottom: 1px solid #666;
}.image-txt2-component .cmp__imgtxt-list2 {padding: 40px 20px 0;
}.image-txt2-component .cmp__imgtxt-list2 .row {width: 1200px;height: 137px;margin: 0 auto;display: flex;
}.image-txt2-component .cmp__imgtxt-list2 .row .cmp__imgtxt-list2-li {width: 200px;height: 97px;margin: 0 50px;padding: 0 0 40px;
}.image-txt2-component .cmp__imgtxt-list2 .row .cmp__imgtxt-list2-li a {display: block;text-align: center;
}.image-txt2-component .cmp__imgtxt-list2 .row .cmp__imgtxt-list2-li a .iconfont {font-size: 40px;color: #000;line-height: 97px;
}.image-txt2-component .cmp__imgtxt-list2 .row .cmp__imgtxt-list2-li a span {font-size: 16px;color: #000;
}.footer-nav {margin-top: 5px;width: 1903px;height: 390px;
}.footer-nav .container-text {width: 1200px;height: 390px;margin: 0 auto;
}.footer-nav .container-text .footer-list {width: 1200px;height: 310px;padding: 20px 15px 20px 0;box-sizing: border-box;display: flex;
}.footer-nav .container-text .footer-list .list {width: 237px;height: 300px;
}.footer-nav .container-text .footer-list .list .nav-trigger {padding: 0 20px;margin: 20px 0 10px;font-size: 16px;color: #000;
}.footer-nav .container-text .footer-list .list .nav-list-slide {margin: 0 20px;
}.footer-nav .container-text .footer-list .list .nav-list-slide a {display: block;color: #fff;margin-bottom: 8px;font-size: 16px;color: #828282;
}.footer-nav .container-text .footer-list .list .nav-list-slide a:hover {color: #000;
}.footer-nav .container-text .footer-list .list2 {width: 237px;height: 340px;
}.footer-nav .container-text .footer-list .list3 {width: 237px;height: 340px;
}.footer-nav .container-text .footer-list .list4 {width: 237px;height: 300px;
}.footer-nav .container-text .footer-list-bottom {width: 1200px;height: 80px;padding: 20px;box-sizing: border-box;display: flex;justify-content: space-between;
}.footer-nav .container-text .footer-list-bottom .retailer-entry-font-body {width: 190px;height: 40px;font-size: 14px;color: #000;line-height: 40px;
}.footer-nav .container-text .footer-list-bottom .retailer-entry-font-body a {font-size: 14px;color: #09c;
}.footer-nav .container-text .footer-list-bottom .customer-support {width: 620px;height: 40px;display: flex;position: relative;
}.footer-nav .container-text .footer-list-bottom .customer-support .btn-container {width: 298px;height: 40px;margin-left: 16px;line-height: 40px;
}.footer-nav .container-text .footer-list-bottom .customer-support .btn-container a .iconfont {font-size: 40px;color: #09c;vertical-align: -8px;margin-right: 5px;
}.footer-nav .container-text .footer-list-bottom .customer-support .btn-container a .icon-duanxin {font-size: 30px;
}.footer-nav .container-text .footer-list-bottom .customer-support .btn-container a span {font-size: 18px;color: #09c;margin-right: 10px;
}.footer-nav .container-text .footer-list-bottom .customer-support .one-tel-time {width: 156px;height: 21px;margin: 0 14px 0 4px;line-height: 44px;font-size: 14px;
}.footer-nav .container-text .footer-list-bottom .customer-support .div-line {font-size: 14px;color: #828282;position: absolute;top: 10px;left: 486px;
}.footer-nav .container-text .footer-list-bottom .customer-support .social-media {display: block;width: 110px;height: 40px;margin-left: 15px;display: flex;justify-content: space-between;
}.footer-nav .container-text .footer-list-bottom .customer-support .social-media .iconfont {font-size: 30px;margin: 0 5px;line-height: 40px;color: #828282;
}.footer-nav .container-text .footer-list-bottom .customer-support .social-media .iconfont:hover {color: #000;
}.footer-nav .container-text .footer-list-bottom .customer-support .social-media .erweima {width: 120px;height: 120px;position: absolute;top: -130px;left: 450px;display: none;
}.footer-nav .container-text .footer-list-bottom .customer-support .social-media .icon-weixin:hover ~ .erweima {display: block;
}.other-footer {width: 1903px;height: 150px;border-top: 1px solid #828282;
}.other-footer .other-footer-container {width: 1200px;height: 150px;margin: 0 auto;
}.other-footer .other-footer-container .other-footer-top {width: 1160px;height: 64px;margin: 0 20px;display: flex;justify-content: space-between;
}.other-footer .other-footer-container .other-footer-top .top-left {width: 240px;height: 24px;padding: 20px 0;
}.other-footer .other-footer-container .other-footer-top .top-left .icon {width: 24px;height: 24px;margin-right: 6px;vertical-align: -7px;
}.other-footer .other-footer-container .other-footer-top .top-left span {font-size: 16px;color: #000;
}.other-footer .other-footer-container .other-footer-top .top-right {width: 600px;height: 64px;margin-left: 20px;
}.other-footer .other-footer-container .other-footer-top .top-right .footer-list {display: flex;justify-content: space-around;
}.other-footer .other-footer-container .other-footer-top .top-right .footer-list a {display: inline-block;font-size: 12px;color: #000;line-height: 64px;position: relative;
}.other-footer .other-footer-container .other-footer-top .top-right .footer-list a .line {position: absolute;top: 0;left: 70px;color: #828282;
}.other-footer .other-footer-container .other-footer-top .top-right .footer-list a .line-s {position: absolute;top: 0;left: 92px;
}.other-footer .other-footer-container .other-footer-bottom {width: 1160px;height: 46px;margin: 20px;display: flex;justify-content: space-between;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left {width: 330px;height: 46px;color: #999;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left .no-wrap {font-size: 12px;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left .no-wrap a:hover {color: #000;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left .in-line {font-size: 12px;color: #999;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left a {color: #999;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left a span {font-size: 12px;color: #999;
}.other-footer .other-footer-container .other-footer-bottom .bottom-left a span:hover {color: #000;
}.other-footer .other-footer-container .other-footer-bottom .bottom-right {width: 180px;height: 46px;display: flex;justify-content: space-between;align-items: center;
}.other-footer .other-footer-container .other-footer-bottom .bottom-right a {display: block;
}.other-footer .other-footer-container .other-footer-bottom .bottom-right a img {width: 83px;height: 30px;
}

结束

小彩蛋：所有代码加起来等于2021٩(๑❛ᴗ❛๑)۶

一加官网 一加官网首页 OnePlus相关推荐

  1. 基于 GoogleMap 离线 API 源码在内网中加载卫星地图的方法

    1. 概述 我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线加载. 另外,也为大 ...

  2. weigm怎么下载_彩七官网下载地址|官网

    游戏介绍 彩七官网下载地址|官网 是一款非常火爆的盒游戏,这款游戏非常受欢迎,因为它的玩法非常的丰富,在彩七官网下载地址|官网你可以自由建造任何事物,你可以打造一个属于你自己的世界,这不仅仅是一款沙盒 ...

  3. jquery官网(jquery下载官网)

    官网在哪里 官网 官方论坛 如何学习jquery 新手想要学习jQuery,可以从书籍和教程两个方面来学习. 你在公司是怎么用jquery的? 在公司使用jQuery插件,使用方法有如下几个步骤: 一 ...

  4. python怎么处理中英文符号网名_英文带符号的网名_英文网名带符号加中文

    导读:小编根据大家的需要整理了一份关于<英文带符号的网名_英文网名带符号加中文>的内容,具体内容: 很多人喜欢用一些带符号的英文作为自己的个性网名,下面请欣赏小编为大家整理的英文带符号的网 ...

  5. 苹果cmsv10仿韩剧TV网电脑加手机高端模板免费下载

    苹果cmsv10仿韩剧TV网电脑加手机高端模板免费下载主题介绍: 模板名称:苹果cmsv10仿韩剧TV网电脑加手机高端模板免费下载 模板程序:苹果cmsv10 模板类型:自适应 模板颜色:白色 模板来 ...

  6. 百度网盘和官网下载并安装windows版本的Redis

    这里提供的百度网盘和官网两种下载方式 点击这里:百度网盘和官网下载并安装windows版本的Redis 感谢分享

  7. cnki登录显示服务器或网络异常,知网查重官网为什么无法登录?

    知网查重官网为什么无法登录? 发布时间:2021-01-27 17:23:34, 作者: 论文检测入口 , 来源:www.cnkix.com 我国我国知网查重官网为什么无法登录?我们该如何查重? 一. ...

  8. 官宣！这款网红产品低代码平台可以终身免费使用！！！

    官宣!这款网红产品低代码平台可以终身免费使用!!! 利用低代码开发平台,企业无需依赖大量的手动编程或用户培训,通过托拉拽配置式操作即可快速构建出能同时在PC和移动端运行的应用或者系统,省事又高效.低代 ...

  9. 硕果累累|善网*益加壹特训营公益媒体账号突破1000个

    近年来,自媒体用其平民化.自由性.多样性.互动性等特性迅速成为网民热捧的传播平台,微信公众号.今日头条.抖音等一系列自媒体平台也借此"东风"迅速崛起.各平台的用户量更是达亿级以上, ...

最新文章

  1. Vue给Element UI的el-popconfirm绑定按钮事件
  2. Android程序为什么没有退出设计?
  3. truncate table
  4. 技改之路：从单块应用到微服务，我的血泪总结--转
  5. 手把手教你Android Studio的安装与配置
  6. 利用设计模式替代项目中的if else（转）
  7. javascript 一些小常用的技巧
  8. “砸7000万，这样的黑锅我们也不背。” 华人银行家的反击
  9. java并发初探ReentrantWriteReadLock
  10. 移动架构-迭代器模式
  11. ubuntu下rar文件解压后文件名乱码的解决方案
  12. 316 Remove Duplicate Letters 去除重复字母
  13. 一个完整的person类
  14. c语言中rm无法删除文件夹,rm：无法删除'-rf'：没有这样的文件或目录
  15. Chromium OS Autotest 客户端测试
  16. selenium 模拟浏览器刷新
  17. 看完东野小说 乱写写（含微量剧透）
  18. 好男人都死到哪去了？
  19. 关于esp32蓝牙模块的使用——esp32学习笔记
  20. HDU6760 Math is Simple 数学变形+莫比乌斯反演

热门文章

  1. token过期?页面如何实现无感刷新?
  2. 腾讯：企鹅帝国的风雨路
  3. pandas库，读取excel表格函数的改动
  4. java如何解析带时区的日期,java – Joda时间解析一个带时区的日期,并保留该时区...
  5. dsp定点运算基本方法
  6. 2022四川最新建筑八大员（土建）模拟考试题库及答案
  7. 数学/物理知识在软件/算法中应用(1)，数学知识应用
  8. HTML+CSS+JS-旋转地球
  9. ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST
  10. ECOLOGY取消多语言