Web大学生网页作业成品——VIVO介绍网页设计与实现(HTML+CSS)（1个页面）

最新推荐文章于 2024-11-10 22:45:39 发布
最新推荐文章于 2024-11-10 22:45:39 发布
阅读量375 收藏 2
点赞数 5
分类专栏： 学生HTML个人网页作业作品 html网页设计与制作 静态网页 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42283461/article/details/141673142
版权

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

文章目录

一、作品介绍 🔥

🏷️本套采用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、看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙3、源码获取公众号，点点下方公众号进行获取吧! 网页搜索编号:E0047

爱码网页
关注
专栏目录
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
Java课程设计：基于Javaweb的手机商城网站（内附源码）
2401_84040513的博客
04-02 869
本项目为手机商城网站，实现了用户端和管理员、商家端。实现了注册登录功能；实现了对商品的选购功能；用户可以把对应商品加入购物车；用户在购买商品后自动生成订单；用户修改自己收货地址；用户修改自己个人信息；对商品进行分类显示；实现了登录注册功能；实现了对用户的管理；实现了对手机的分类管理；实现了对手机商品的管理；实现了对手机商品订单的管理；
vivo页面
熊小露的博客
04-09 3091
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0; li
JavaWeb：实现购物商城（课程设计完整版）
热门推荐
m0_63512120的博客
02-19 4万+
基于javaweb实现的网上购物商城，实现了一些基础功能，供大家参考学习，也可以当做课程设计，在文章结尾附有源代码和素材让大家使用。原创作品，大家可以在评论区指出问题哟，我们共同学习！
步步高vivo官网幻灯片代码
12-12
步步高vivo官网幻灯片代码 http://www.datouwang.com/jiaoben/325.html
模仿vivo官网html+css.zip
07-17
在本项目中，“模仿vivo官网html+css.zip”是一个包含HTML和CSS代码的压缩包，目的是为了构建一个类似于vivo官方网站的页面。这个项目主要关注于前端开发，特别是HTML和CSS这两门核心技术，用于创建网页结构和样式。...
vivo前端项目，使用HTML+css+javaScript
10-27
在本项目中，"vivo前端项目，使用HTML+css+javaScript" 是一个典型的Web前端开发案例，主要涵盖了三个核心的技术栈：HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript。这些技术是...
vivo X70 Pro+机型解锁bl工具+root详细图文教程
06-28
本文将详细介绍如何安全、有效地进行vivo X70 Pro+的BL解锁以及Root过程，以帮助有需求的用户实现这一目标。 一、解锁Bootloader（BL） 1. **理解Bootloader**：Bootloader是手机启动时运行的第一段程序，它负责...
HTML5，CSS静态网站
02-07
HTML5和CSS是现代网页开发中的核心技术，它们用于构建和设计具有丰富交互性的静态和动态网站。本项目是一个基于HTML5和CSS的静态网站实例，适用于初学者进行学习和实践。 首先，HTML5（HyperText Markup Language第...
vivo电商平台项目
secretccy
10-16 1703
vivo商城 项目简介 本项目是参照vivo商城的PC端，实现了其中的部分功能 项目共分为5个页面，登录、注册、首页、商品详情、购物车 用户可以选择游客模式对商品进行浏览，或者登录平台将商品加入购物车，生成订单等操作 技术实现 使用了jQuery 使用到了cookie缓存技术 使用Ajax技术进行前后端的交互 数据库采用了mysql 后台采用了php技术进行对数据库的逻辑操作 核心代码 l...
仿照Vivo商城的移动端页面
12-27
vivo商城的页面，使用vue前端框架写的，运行需要装npm，在工程目录下使用命令 npm run dev来运行
基于HTML5+CSS+JS的仿VIVO商城项目
m0_69747364的博客
05-17 464
想要网页模板的朋友 可以在我的资源里面下载哦
CSS练习--vivo
weixin_42139212的博客
10-13 560
顶部两行导航设置绝对定位，并设置z-index最大。 都给ul设置flex布局 display: flex; justify-content: space-between; <div class="header"> <div class="header-top"> <ul class="header-top-left"&gt...
前端大学期末课程设计——商城网页（vivo官网，也可以改为其他品牌商城网页）
2201_75747675的博客
07-13 217
前端开发基础——HTML+CSS+JS 前端大学期末课程设计——商城网页（vivo官网，也可以包括其他品牌商城网页）
仿VIVO官网
qq_54408683的博客
08-29 804
使用了动态效果，鼠标悬停移出不显示移入显示，移入放大等。
前端 Flex 布局语法详解
最新发布
ning的博客
11-10 702
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 928
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
仿照Vivo官网实现前端页面交互效果实现导航栏html+css+js代码
06-09
好的，以下是实现一个类似于Vivo官网的导航栏的 HTML + CSS + JS 代码： HTML： ```html <a href="#" class="navbar-logo">Vivo <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

爱码网页

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

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

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

打赏作者

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

抵扣说明：

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

余额充值