一加官网一加官网首页 OnePlus

最新推荐文章于 2023-08-24 17:24:25 发布

Mr._Dang

最新推荐文章于 2023-08-24 17:24:25 发布

阅读量1.3k

点赞数 3

分类专栏：静态网页文章标签： html5 css3

本文链接：https://blog.csdn.net/m0_55832273/article/details/115616299

版权

静态网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

此网页为静态网页未使用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٩(๑❛ᴗ❛๑)۶

Mr._Dang

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
一加官网一加官网首页 OnePlus

此网页为静态网页未使用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"&gt.
复制链接

扫一扫