🎉
不定期分享源码，关注不丢失哦
文章目录
一、作品介绍
🏷️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。
二、作品演示
三、代码目录
四、网站代码
HTML部分代码
c
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="header">
<div class="w">
<div class="hl">
<a href="">品牌</a>
<a href="">Funtouch OS</a>
<a href="">体验店</a>
<a href="">政企业务</a>
<a href="">社区</a>
</div>
<div class="hr">
<a href="">购物车</a>
<a href="">注册</a>
<span>|</span>
<a href="">登录</a>
</div>
</div>
</div>
<div class="banner">
<div class="w1">
<img src="./images/vivo.png" class="logo" alt="">
<div>
<a href="">iQOO专区</a>
<a href="">NEX专区</a>
<a href="">X系列</a>
<a href="">Z系列</a>
<a href="">Y系列</a>
<a href="">U系列</a>
<a href="">商城</a>
<a href="">服务</a>
</div>
<img src="./images/search.png" class="search" alt="">
</div>
<img src="./images/banner.jpg" alt="" class="banner_img">
<div class="w2">
<img src="./images/vivo-banner-title1-big.png" alt="">
<img src="./images/vivo-banner-title2-big.png" alt="">
<img src="./images/vivo-banner-title3-big.png" alt="">
<div class="j">
<a href="">立即前往</a>
<span></span>
</div>
</div>
<div class="w3">
<div class="w31"></div>
<div class="w31"></div>
<div class="w31"></div>
</div>
</div>
<div class="content">
<div class="w">
<div class="content1">
<div class="content11">
<div>NEX旗舰版</div>
<a href="">了解详情</a>
</div>
<img src="./images/vivo-promos-1.jpg" alt="">
</div>
<div class="content1">
<div class="content11 white">
<div>玩家眼中iQOO什么样？</div>
<a href="">立即围观</a>
</div>
<img src="./images/vivo-promos-2.jpg" alt="">
</div>
<div class="content1">
<div class="content11">
<div>Z1青春版</div>
<a href="">了解详情</a>
</div>
<img src="./images/vivo-promos-3.jpg" alt="">
</div>
<div class="content1">
<div class="content11 white">
<div>iQOO新品晒单</div>
<a href="">旗舰新品等你拿</a>
</div>
<img src="./images/vivo-promos-4.jpg" alt="">
</div>
</div>
</div>
<div class="footer">
<div class="w1">
<div class="footer1">
<h3>热门链接</h3>
<ul>
<li><a href="">NEX双屏版</a></li>
<li><a href="">X23</a></li>
<li><a href="">Z3</a></li>
<li><a href="">vivo摄影</a></li>
<li><a href="">查找手机</a></li>
<li><a href="">常见问题</a></li>
</ul>
</div>
<div class="footer1">
<h3>在线购买</h3>
<ul>
<li><a href="">官方商城</a></li>
<li><a href="">选购手机</a></li>
<li><a href="">选购配件</a></li>
<li><a href="">政企服务</a></li>
<li><a href="">以旧换新</a></li>
<li><a href="">服务保障</a></li>
</ul>
</div>
<div class="footer1">
<h3>服务支持</h3>
<ul>
<li><a href="">服务首页</a></li>
<li><a href="">服务网点查询</a></li>
<li><a href="">真伪查询</a></li>
<li><a href="">服务政策</a></li>
<li><a href="">预约维修</a></li>
<li><a href="">维修配件价格</a></li>
</ul>
</div>
<div class="footer1">
<h3>vivo社区</h3>
<ul>
<li><a href="">社区首页</a></li>
<li><a href="">摄影专区</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">兴趣部落</a></li>
<li><a href="">新手课堂</a></li>
<li><a href="">社区规则</a></li>
</ul>
</div>
<div class="footer1">
<h3>关于vivo</h3>
<ul>
<li><a href="">vivo简介</a></li>
<li><a href="">工作机会</a></li>
<li><a href="">新闻资讯</a></li>
<li><a href="">采购平台</a></li>
<li><a href="">开发者平台</a></li>
</ul>
</div>
<div class="footer2">
<div class="tit">
<img src="./images/留言.png" alt="">
在线客服
</div>
<div class="lx">
400-678-9688
</div>
<div class="lxtext">
24小时全国服务热线
</div>
</div>
</div>
<div class="w2">
<div class="">
Copyright ©2011-2019 广东步步高电子工业有限公司版权所有 保留一切权力|<a href="">隐私政策</a>|<a href="">法律声明</a>|粤B2-20080267|粤ICP备05100288号<img src="./images/gssw-icon.png" alt="">
</div>
<div class="links">
<a href="">关于vivo</a>
<a href="">©中国</a>
</div>
</div>
</div>
</body>
</html>五、源码获取
🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧