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

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


一、作品介绍

🏷️本套采用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.想要获取本文源码,点击前往吧

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-05 22:04:07       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-05 22:04:07       100 阅读
  3. 在Django里面运行非项目文件

    2024-06-05 22:04:07       82 阅读
  4. Python语言-面向对象

    2024-06-05 22:04:07       91 阅读

热门阅读

  1. 数仓建模—指标体系分类分级和评价管理

    2024-06-05 22:04:07       26 阅读
  2. Linux Centos内网环境中安装mysql5.7详细安装过程

    2024-06-05 22:04:07       27 阅读
  3. Unable to parse response body for Response{requestLine=PUT

    2024-06-05 22:04:07       20 阅读
  4. jenkins快速入门

    2024-06-05 22:04:07       34 阅读
  5. Elasticsearch安装与配置:快速搭建本地环境

    2024-06-05 22:04:07       31 阅读
  6. 神经网络应用场景——语音识别

    2024-06-05 22:04:07       26 阅读
  7. 神经网络应用场景——自动驾驶

    2024-06-05 22:04:07       27 阅读
  8. 提高MongoDB效率九大优化方式

    2024-06-05 22:04:07       31 阅读
  9. git环境代码版本控制

    2024-06-05 22:04:07       33 阅读