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

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

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

文章目录

一、作品介绍

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

崽子爱码
关注
  • 11
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
模仿vivo官网html+css.zip
07-17
模仿vivo官网html+css 包含登录注册和官网 模仿vivo官网html+css
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
195. Web前端网页制作 购物商城网页设计实例 大学生期末大作业 html+css+js
A240307的博客
05-12 1060
购物商城网页设计实例，应用html+css+js： Div、导航栏、选项卡、下拉菜单、图片轮翻效果、视频、悬浮菜单、注册页面、登录页面、搜索等。适用于大学生网页课程作业设计、商城网页制作等，供大家参考。
vivo页面
熊小露的博客
04-09 2964
&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
基于HTML5+CSS+JS的仿VIVO商城项目
m0_69747364的博客
05-17 385
想要网页模板的朋友 可以在我的资源里面下载哦
微信小程序-高仿vivo商城
Dreawer微信小程序联盟
12-18 2719
说明 最近微信小程序也是挺火的了，看了微信官方文档语法和vue.js有点相似，正好学过vue 也用vue写过一个商城项目，就尝试用小程序写个商城，一般来说你学过vue.js写个小程序那是很简单的，小程序和vue.js无非就是路由跳转、传参、传数据。 如果你想学vue.js可以来看看我用vue.js写的一个商城项目 地址在这里 运行需要安装微信开发者工具，在开发者工具中打开该项目则可预览
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
课程作业基于CSS+HTML的个人静态网页源码.zip
10-12
课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态网页源码.zip课程作业基于CSS+HTML的个人静态...
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip
04-17
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip 95分以上必过项目，下载即用，无需修改。小白也可实战。包括字体、背景颜色和内边距等。它还为各个区域设置了特定的背景颜色。 一个基本的网页...
静态网页 221html+css个模板 (120)
06-07
静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页 221html+css个模板 (120)静态网页...
静态网页 221html+css个模板 (1)
06-06
静态网页 221html+css个模板 (1)静态网页 221html+css个模板 (1)静态网页 221html+css个模板 (1)静态网页 221html+css个模板 (1)静态网页 221html+css个模板 (1)静态网页 221html+css个模板 (1)静态网页 221html+css...
HTML网页制作——HTML+CSS+JavaScript仿小米手机网站 html静态在线购物商城网页制作
qq_524614081的博客
01-06 418
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
仿VIVO官网
qq_54408683的博客
08-29 699
使用了动态效果，鼠标悬停移出不显示移入显示，移入放大等。
【简单html静态网页代码】 基于HTML仿oppo手机商城电商项目的设计与实现6个页面
而风不止
12-19 1492
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
Html——小米商城网页实战（二）
weixin_42511413的博客
10-22 3229
接上篇博文内容，完成小米商城首页的简单h5实战。 首先总结一下整个首页中htm+css可能涉及的知识点：首先使用最多的就是定位（position），我们要懂得相对定位和绝对定位的区别（近期会针对该元素总结一篇博文），其次另一个需要注意的就是元素的隐藏与悬停显示，需要通过visibility来设置。除此之外，可能还会涉及元素的选择器:nth-child()属性。做出的效果图如下（可能宽高上与原网页有细微差别）： 本文先展示相关的css设置，最后展示html代码。 一、导航栏（nav-bar） nav-bar.
-[html网页制作]-基于HTML仿oppo手机商城电商项目的设计与实现6个页面
qq3200628753的博客
12-24 38
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。...
HTML+CSS大作业：购物商城网页设计与实现——手机主题网站
最新发布
dreamweaver网页设计
06-05 410
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
CSS实操一，实现商城购物模块（实战知识点。最基础css+div实现）
qq_55006020的博客
06-28 164
图片地址请自行更换本地的地址。
静态网页设计html+css+js
11-30
静态网页设计是一种基于HTML、CSS和JS的网页设计方法。HTML（超文本标记语言）用于创建网页的结构和内容，CSS（层叠样式表）用于美化和布局网页的元素，而JS（JavaScript）用于添加交互和动态效果。 在静态网页设计中，首先需要使用HTML编写网页的结构和内容。通过使用HTML的标签和属性，可以创建标题、段落、链接、图像等元素，并为它们添加适当的样式和功能。 接下来，使用CSS来美化和布局网页的元素。通过为HTML元素添加各种样式和属性，可以改变字体、颜色、背景、边框等外观。CSS还可以使用盒模型和浮动等技术进行布局，使得网页在不同设备上呈现出理想的效果。 最后，使用JS来添加交互和动态效果。通过编写JavaScript代码，可以实现按钮点击、表单验证、轮播图、动画效果等功能。JS还可以通过与HTML和CSS的结合，实现网页的动态更新和内容交互。 总的来说，静态网页设计利用HTML、CSS和JS三种技术实现了网页的结构、外观和交互效果。通过合理应用这些技术，可以设计出吸引人的、功能完备的静态网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

崽子爱码

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

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

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

打赏作者

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

抵扣说明：

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

余额充值