HTML静态网页成品作业(HTML+CSS)——VIVO介绍网页(1个页面)

🎉不定期分享源码，关注不丢失哦

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- HTML部分代码
五、源码获取

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!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.想要获取本文源码，点击前往吧

相关阅读:
NOIP 模拟赛长寿花题解
 C语言——指针进阶（2）
springboot实验课程辅助管理系统毕业设计-附源码191113
mysql数据库无法连接：解决MySQL数据库无法连接的方法
 什么是webSocket?
go defer简介
 springcloud9:openFeign
SpringBoot-配置-YAML-properties-2
ubuntu安装pbc以及cpabe环境
 RTMP协议解析
原文地址：https://blog.csdn.net/weixin_42283461/article/details/139339443