HTML+CSS 苹果官网首页

最新推荐文章于 2024-08-27 16:35:39 发布
最新推荐文章于 2024-08-27 16:35:39 发布
阅读量155 收藏 3
点赞数 2
分类专栏： 静态网页响应式设计前端模板  文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YN2000609/article/details/141561400
版权

效果展示：

完整源码：

HTML部分：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <div class="header-main">
        <广告>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div class="nav-main">
        <a href="" class="logo"></a>
        <a href="" class="nav-item">Mac</a>
        <a href="" class="nav-item">iPad</a>
        <a href="" class="nav-item">iPhone</a>
        <a href="" class="nav-item">Watch</a>
        <a href="" class="nav-item">Music</a>
        <a href="" class="nav-item">技术支持</a>
        <div class="search"></div>
        <div class="shop-bag"></div>
      </div>
      <div class="nav-mobile">
        <input type="checkbox" name="" id="menu-check" value="" style="display: none;"/>
        <label href="" class="mobile-list" for="menu-check">
          <div class="line"></div>
          <div class="line"></div>
        </label>
        <a href="" class="logo"></a>
        <a href="" class="shop-bag"></a>
        <div class="menu">
          <div class="searchInput">
            <span class="icon"></span>
            <span type="" name="" id="" value="" class="input" />搜索 apple.com.cn</span>
          </div>
          <div class="menulist">
            <a href="" class="menu-item">Mac</a>
            <a href="" class="menu-item">iPad</a>
            <a href="" class="menu-item">iPhone</a>
            <a href="" class="menu-item">Watch</a>
            <a href="" class="menu-item">Music</a>
            <a href="" class="menu-item">技术支持</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 广告 -->
    <div class="ad">
      <div class="buylink"><a href="https://www.apple.com.cn/shop">在线选购</a></div>
      <div class="ad-text">，享受免费送货、Specialist 专家支持、免息分期等服务。</div>
    </div>
    <!-- 推荐产品 -->
    <div class="goods" id="iPhone12">
      <div class="goods-name">iPhone 12</div>
      <div class="goods-advantage">升维大提速</div>
      <div class="price-introduction">
        <div>RMB 229/月或 RMB 5499 起，</div>
        <div class="introduce">还可折抵换购<span class="shangbiao">1</span></div>
      </div>
      <div class="buy-link">
        <a class="buy-link-text" href="https://www.apple.com.cn/iphone-12/">进一步了解</a>
        <a href="https://www.apple.com.cn/iphone-12/">
          <div class="jiantou"></div>
        </a>
        <a class="buy-link-text" href="https://www.apple.com.cn/shop/buy-iphone/iphone-12">购买</a>
        <a href="https://www.apple.com.cn/shop/buy-iphone/iphone-12">
          <div class="jiantou"></div>
        </a>
      </div>
    </div>
    <div class="goods" id="iphone12-pro">
      <div class="goods-name">iPhone 12</div>
      <div class="goods-advantage">升维大提速</div>
      <div class="price-introduction">
        <div>RMB 229/月或 RMB 5499 起，</div>
        <div class="introduce">还可折抵换购<span class="shangbiao">1</span></div>
      </div>
      <div class="buy-link">
        <a class="buy-link-text" href="https://www.apple.com.cn/iphone-12/">进一步了解</a>
        <a href="https://www.apple.com.cn/iphone-12/">
          <div class="jiantou"></div>
        </a>
        <a class="buy-link-text" href="https://www.apple.com.cn/shop/buy-iphone/iphone-12">购买</a>
        <a href="https://www.apple.com.cn/shop/buy-iphone/iphone-12">
          <div class="jiantou"></div>
        </a>
      </div>
    </div>
    <div class="goods" id="hero_ipad_pro">
      <div class="goods-name">iPhone 12</div>
      <div class="goods-advantage">由Apple M1 芯片强势驱动</div>
      <div class="buy-link">
        <a class="buy-link-text" href="https://www.apple.com.cn/iphone-12/">进一步了解</a>
        <a href="https://www.apple.com.cn/iphone-12/">
          <div class="jiantou"></div>
        </a>
        <a class="buy-link-text" href="https://www.apple.com.cn/shop/buy-iphone/iphone-12">购买</a>
        <a href="https://www.apple.com.cn/shop/buy-iphone/iphone-12">
          <div class="jiantou"></div>
        </a>
      </div>
    </div>
    <!-- 产品分类 -->
    <div class="goods-classify">
      <div class="classify-content">
        <div class="classify-item" id="promo_imac">
          <div class="classify-item-title"></div>
          <div class="classify-item-content"></div>
          <div class="classify-item-link"></div>
        </div>
      </div>
      <div class="classify-content">
        <div class="classify-item" id="promo_watch">
          <div class="classify-item-title"></div>
          <div class="classify-item-content"></div>
          <div class="classify-item-link"></div>
        </div>
      </div>
      <div class="classify-content">
        <div class="classify-item" id="promo_spatial">
          <div class="classify-item-title"></div>
          <div class="classify-item-content"></div>
          <div class="classify-item-link"></div>
        </div>
      </div>
      <div class="classify-content">
        <div class="classify-item" id="promo_airtag">
          <div class="classify-item-title"></div>
          <div class="classify-item-content"></div>
          <div class="classify-item-link"></div>
        </div>
      </div>
      <div class="classify-content">
        <div class="classify-item" id="tile_ios15">
          <div class="classify-item-title"></div>
          <div class="classify-item-content"></div>
          <div class="classify-item-link"></div>
        </div>
      </div>
      <div class="classify-content">
        <div class="classify-item" id="promo_ipados">
          <div class="classify-item-title"></div>
          <div class="classify-item-content"></div>
          <div class="classify-item-link"></div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS部分：


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC",
  "Helvetica Neue","Helvetica","Arial",sans-serif;
  padding-top: 84px;
}

/* 头部 */
.header{
  min-width: 330px;
  width: 100%;
  background-color: #444444;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.header-main{
  width: 100%;
  max-width: 976px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 12px;
  color: #a8a8aa;
}

/* 导航栏 */
.nav{
  width: 100%;
  background-color: rgba(0,0,0,0.92);
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 10;
}

.nav-main{
  width: 100%;
  max-width: 1000px;
  height: 44px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-main a{
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 100;
  text-decoration: none;
  opacity: 0.8;
}
.nav-main a:hover{
  opacity: 1;
  color: #FFFFFF;
}
.logo{
  width: 44px;
  height: 44px;
  background-image: url(../../image/apple/apple-image.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;  
  opacity: 0.8;
  z-index: 10;
}
.logo:hover{
  opacity: 1;
}
.search{
  width: 18px;
  height: 44px;
  background-image: url(../../image/apple/search-image.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 18px auto;
  background-position: 0px -44px;
}
.search:hover{
  background-size: 18px auto;
  background-position: 0px 0px;
}
.shop-bag{
  width: 44px;
  height: 44px;
  background-image: url(../../image/apple/bag_image.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
}
.shop-bag:hover{
  opacity: 1;
}
/* 手机导航 */
.nav-mobile{
  min-width: 330px;
  width: 100%;
  height: 44px;
  display: none;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;

}
.mobile-list{
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.mobile-list .line{
  width: 15px;
  height: 1px;
  background-color: #FFFFFF; 
  opacity: 0.6;
  transition: all 0.5s;
}
.mobile-list:hover .line{
  opacity: 1;
}
#menu-check:checked~.mobile-list .line:first-child{
  transform: rotate(45deg) translateY(5px);
}
#menu-check:checked~.mobile-list .line:last-child{
  transform: rotate(-45deg) translateY(-4px);
}
#menu-check:checked~.shop-bag{
  background: none;
}
.mobile-list .line:first-child{
  margin-bottom: 5px;
}


.menu{
  min-width: 330px;
  width: 100vw;
  height: 0vh;
  position: fixed;
  left: 0;
  top: 40px;
  background-color: #000000;
  padding: 48px 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden; 
}
.searchInput{
  max-width: 580px;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  background-color: rgba(110, 110, 115,0.3);
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.searchInput .icon{
  width: 30px;
  height: 36px;
  background-image: url(../../image/apple/search-image.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 18px auto;
  background-position: 0px -44px;
  margin-top: -7px;
}
.searchInput .input{
  display: inline-block;
  height: 30px;
  background-color: transparent;
  border: none;
  flex: 1;
  font-size: 17px;
  color: rgb(110, 110, 115);
  line-height: 30px;
}
.menulist{
  max-width: 580px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 60px;
  position: relative;
}
.menulist::before{
  position: absolute;
  content: "快速链接";
  left: 0;
  top: 30px;
  color: #FFFFFF;
  font-size: 12px;
  opacity: 0.4;
}
.menulist a{
  text-decoration: none;
}
.menu-item{
  width: 100%;
  height: 44px;
  padding: 13px 0;
  font-size: 17px;
  color: #FFFFFF;
  font-weight: 400;
  opacity: 0.8;
  border-bottom: 1px solid #424245;
}
.menu-item:last-child{
  border-bottom: none;
}

#menu-check:checked~.menu{
  display: flex;
  /* 动画名:swiperdown,时间:0.6s,执行1次,停留在最后效果 */
  animation: swiperdown 0.6s 1 forwards;
}
@keyframes swiperdown{
  from{
    height: 0;
  }
  to{
    height: 100vh;
  }
}

/* 广告 */
.ad{
  min-width: 330px;
  width: 100%;
  height: 44px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #00008B;
  font-size: 12px;
  background-color: rgb(245, 245, 247);
}
.buylink a{
  text-decoration: none;
  color: rgb(0, 102, 204);
}
.buylink:hover{
  text-decoration: underline;
}
.ad-text{
  color: rgb(29, 29, 31);
}

/* 商品 */
.goods{
  min-width: 330px;
  width: 100%;
  height: 580px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fbfbfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.goods-name{
  font-size: 53px;
  font-weight: bold;
  margin-top: 50px;
}
.goods-advantage{
  margin-top: 6px;
  font-size: 25px;
}
.price-introduction{
  font-size: 16px;
  margin-top: 15px;
  opacity: 0.6;
  text-align: center;
}
.introduce{
  margin-left: calc(50% - 60px);
  width: 120px;
  margin-top: 3px;
}
.shangbiao{
  font-size: 8px;
  float: right;
  top: 0;
  left: 0;
}
.buy-link{
  padding: 5px;
  width: 220px;
  margin-top: 20px;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
}
.buy-link a{
  font-size: 18px;
  text-decoration: none;
  color: #0066cc;
}
.buy-link .buy-link-text:hover{
  text-decoration: underline;
}
.jiantou{
  width: 10px;
  height: 10px;
  transform:  translateX(-15px) translateY(8px) rotate(45deg);
  border-top: 2px solid #0066cc;
  border-right: 2px solid #0066cc;
}
#iPhone12{
  background-image: url(../../image/apple/iphone_12.jpg);
}
#iphone12-pro{
  background-image: url(../../image/apple/iphone_12_pro.jpg);
  background-color: #000000;
  color: #FFFFFF;
}
#hero_ipad_pro{
  background-image: url(../../image/apple/hero_ipad_pro.jpg);
  background-color: #000000;
  color: #FFFFFF;
}

@media all and (max-width:760px){
  .nav-mobile{
    display: flex;
  }
  .nav-main{
    display: none;
  }
  .goods-name{
    font-size: 33px;
    font-weight: bold;
  }
  .goods-advantage{
    font-size: 16px;
  }
  .price-introduction{
    font-size: 12px;
  }
  .introduce{
    margin-left: calc(50% - 50px);
  }
  .shangbiao{
    font-size: 5px;
    padding-right: calc(50% - 25px);
  }
  .buy-link{
    width: 160px;
    margin-top: 10px;
  }
  .buy-link a{
    font-size: 14px;
  }
  .jiantou{
    width: 8px;
    height: 8px;
    transform:  translateX(-8px) translateY(6px) rotate(45deg);
    border-top: 1.5px solid #0066cc;
    border-right: 1.5px solid #0066cc;
  }
  #iPhone12{
    height: 500px;
    background-image: url(../../image/apple/iphone_12_2.jpg);
  }
  #iphone12-pro{
    height: 500px;
    background-image: url(../../image/apple/iphone_12_pro2.jpg);
    background-color: #000000;
    color: #FFFFFF;
  }
  #hero_ipad_pro{
    height: 500px;
    background-image: url(../../image/apple/hero_ipad_pro2.jpg);
    
  }
}
/* 产品分类 */
.goods-classify{
  min-width: 330px;
  width: 100%;
  display: flex;
  /* justify-content: space-evenly; */
  flex-wrap: wrap;
  overflow: hidden;
}
.classify-content{
  width: 50%;
  padding: 0 10px;
  margin-bottom: 10px;
}
.classify-item{
  width: 100%;
  height: 580px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} 

#promo_imac{
  background-image: url(../../image/apple/promo_imac.jpg);
}
#promo_watch{
  background-image: url(../../image/apple/promo_watch.jpg);
}
#promo_spatial{
  background-image: url(../../image/apple/promo_spatial.jpg);
}
#promo_airtag{
  background-image: url(../../image/apple/promo_airtag.jpg);
}
#tile_ios15{
  background-image: url(../../image/apple/tile_ios15.jpg);
}
#promo_ipados{
  background-image: url(../../image/apple/promo_ipados.jpg);
}


@media all and (max-width:1050px) {
  .goods{
    height: 650px;
  }
  #promo_imac{
    background-image: url(../../image/apple/promo_imac2.jpg);
  }
  #promo_watch{
    background-image: url(../../image/apple/promo_watch2.jpg);
  }
}
@media all and (max-width:645px) {
  .classify-content{
    width: 100%;
  }
}

🌟 综上，效果实现了, 后续有什么想要的欢迎大家留言，也可以加喔微信, 18634371151,欢迎~

🌟 往期精彩，可以关注博主看左侧专栏，一定有你需要的！！！

🌟 关注耀南.，探索更多精彩的动画效果！🚀

耀南.
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS
张时贰的博客
12-28 3862
WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS 文章目录WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS一、前言二、图片资源三、主要代码四、网页效果五、说明 一、前言 凌晨兴起写的，修改了好多，有一丢丢乱，但是界面效果在。 静态页面，没有后端数据，只是单一的HTML。 二、图片资源 这里用了一些iconfont-阿里巴巴矢量图标库，使用了如下几个矢量图。使用教程参考我的另一篇。(矢量图使用CSS样式导入图标，比直接导入img效果更好) 1.即使好礼苹果.jpg
仿Apple官网首页 HTML+CSS+JS
张时贰的博客
04-09 9737
WEB前端开发实践 仿Apple官网首页 HTML+CSS+JS 一、前言 静态页面，没有后端数据，只是单一的HTML 自写的APPLE、小米源码，严禁盗用 二、图片资源 这里用了一些iconfont-阿里巴巴矢量图标库，使用了如下几个矢量图。使用教程参考我的另一篇iconfont-阿里巴巴矢量图标库使用。(矢量图使用CSS样式导入图标，比直接导入img效果更好) 1.即使好礼苹果.jpg 2.iPone 13 Pro.jpg 3.iPhone 13.jpg 4.好礼1.jpg 5.好礼2.
html+css网页制作苹果官网首页
qq_42431718的博客
08-19 290
html+css网页制作 苹果官网首页 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
Web：仿苹果官网首页HTML和CSS
jasmyn518的博客
01-03 2892
根据官网首页仿的，效果图就不贴出来了。 HTML部分具体代码： <!DOCTYPE html> <html> <head> <title>Apple</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div id="all"> <div id="nav">
运用HTML+CSS+JS简单制作苹果官网首页
l13501058595的博客
12-11 7580
一周总结 上次例会所留任务是用上HTML+CSS+JS做一个网页。内容自定。 我想的是做一个苹果官网首页的网页。 大概是这样的：苹果官网首页 我所做的和它相差不多 不同主要表现在这几个方面: 1.点击进入网页，添加了宣传片的视频，并以苹果的logo作为背景填充 2.动画方面我加入了苹果logo的横向动态。 3.页面最下方加入了JS选项卡 参考苹果的各机型 遇到的问题 1.导航栏居中的问题：开始以为...
HTML+CSS实现拼多多官网首页
weixin_54138158的博客
03-28 7686
网页头部、主体以及尾部的截图
大二Web课程设计 HTML+CSS制作苹果商城网站 Apple商城 8个页面
网页设计与制作 | HTML+CSS+JS
09-28 306
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
html+css+js基础问答
qq_43751465的博客
08-26 5164
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
苹果官网html简单代码,苹果官网CSS3应用案例分析
weixin_42529366的博客
06-09 2216
苹果官网CSS3应用案例分析【原创】?? ? ??今天苹果在WWDC2012发布了全新Macbook Pro，迫不及待去官网围观，一睹笔记本芳容，结果哈喇子掉一地...【买不起，却各种浮想联翩，骚年的节操掉了一地...】 苹果不仅硬件设备做到了极致，官网也做的精炼之极。? ?? ?见到不同寻常的地方就习惯性点击键盘F12，窥视代码构造...? ?? ?本文详细介绍CSS3实现图片底边弧形阴影效果：...
小米有品官网:纯HTML+CSS代码
qq_52619560的博客
01-28 3509
纯HTML+css编写的小米有品官网,图片均采用网络地址.
苹果官网页面仿写（纯html+css)
04-09
仿写苹果官网，纯html+css,零基础学了三天小成果，使用hbuilder软件
Apple官网html+css实现.zip
05-13
用的是纯css html做的一个小项目，总共1000行代码左右，并且用媒体查询写了PC端和M端即手机端和电脑端的官网，用谷歌浏览器打开，右击鼠标点一下检查，然后调一下屏幕的像素大小，该文件当像素在700以下时时手机端，...
HTML.rar_html 首页_html+css+js
09-24
在这个仿苹果主页的HTML文件中，开发者会精确地使用这些标签来布局和组织页面内容，模仿苹果官网的结构和样式。 CSS则是用于表现HTML或XML（包括如SVG、MathML等各种XML方言）文档的样式语言。它允许我们将样式规则...
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 312
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
HTML中自定义属性并通过JS获取属性值
最新发布
2301_79858914的博客
08-27 189
是的，HTML可以自定义属性。自定义属性的语法是使用data-前缀，后面跟上自定义的属性名。例如：
HTML DOM 对象
lly202406的博客
08-23 372
HTML DOM对象是JavaScript与HTML文档交互的桥梁。通过DOM，开发者可以轻松地访问和操作页面元素，实现动态内容和交互功能。掌握DOM是前端开发的重要技能之一。
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
2301_78945238的博客
08-23 447
HTML静态网页成品作业(HTML+CSS+JS)——体育足球介绍设计制作(3个页面)
简单实现进度条效果（vue2）
weixin_43811753的博客
08-20 522
如果用echarts或者其他图表来写个进度条有点大材小用，所以直接简单html、js写一下就可以；以下代码基于vue2，部分代码来自国内直连。
用html和css仿作苹果网站
05-29
很抱歉，我作为一个AI语言模型，无法提供实时的网页编写和展示功能。但是我可以给你一些指导建议： 1. 首先，你需要了解苹果网站的设计风格和布局方式，可以从苹果官网进行参考。 2. 接着，你需要熟悉HTML和CSS的基本语法和概念，掌握网页布局、样式设置、响应式设计等技术。 3. 然后，你可以使用文本编辑器或者专业的网页设计工具（如Adobe Dreamweaver）来创建网页文件和样式表，按照苹果网站的设计风格进行布局和样式设置。 4. 最后，你需要进行调试和优化，确保网页在不同浏览器和设备上的兼容性和可访问性。 总之，仿制苹果网站需要一定的技术基础和实践经验，需要耐心和细心的设计和调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

耀南.

你的鼓励将是我最最最最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值