当前位置: 首页 > news >正文

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

相关文章:

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

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…...

MySQL(四) - SQL优化

一、SQL执行流程 MySQL是客户端-服务器的模式。一条SQL的执行流程如下&#xff1a; 在执行过程中&#xff0c;主要有三类角色&#xff1a;客户端、服务器、存储引擎。 大致可以分为三层&#xff1a; 第一层&#xff1a;客户端连接到服务器&#xff0c;构造SQL并发送给服务器…...

用 DataGridView 控件显示数据

使用DataGridView&#xff0c;可以很方便显示数据。 1.为解决方案添加数据集XSD&#xff0c;用作为项目数据源。 2.拖DataGridView控件到WinForms上。 3.在DataGridView控件的任务处&#xff0c;选择数据源。 4.选好数据源后&#xff0c;VS自动添加DataSet、BindingSourse和T…...

VisualSVN Server/TortoiseSVN更改端口号

文章目录 概述VisualSVN Server端更改端口号TortoiseSVN客户端更改远程仓库地址 概述 Subversion&#xff08;SVN&#xff09;是常用的版本管理系统之一。部署在服务器上的SVN Server端通常会在端口号80&#xff0c;或者端口号443上提供服务。其中80是HTTP访问方式的默认端口。…...

如何解决研发数据传输层面安全可控、可追溯的共性需求?

研发数据在企业内部跨网文件交换&#xff0c;是相对较为普遍而频繁的文件流转需求&#xff0c;基于国家法律法规要求及自身安全管理需要&#xff0c;许多企业进行内部网络隔离。不同企业隔离方案各不相同&#xff0c;比如银行内部将网络隔离为生产网、办公网、DMZ区&#xff0c…...

表 ,索引的 degree 检查, trim(degree) default INSTANCES

检查degree >1 的 select substr(owner,1,15) Owner , ltrim(degree) Degree, ltrim(instances) Instances, count(*) "Num Tables" , Parallel from dba_tables where ( trim(degree) > 1 ) and table_name not like ET$% group by owner, degree , ins…...

Git - Rebase命令介绍

Git rebase 是版本控制系统 Git 中一个功能强大、使用广泛的命令。它用于将一个分支中的改动整合到另一个分支中。rebase与merge不同&#xff0c; merge会创建一个新的提交&#xff0c;而rebase则是将一系列提交移动或合并到一个新的基础提交中。下面是详细解释&#xff1a; G…...

JavaScript 从入门到精通Object(对象)

文章目录 对象文本和属性方括号计算属性 属性值简写属性名称限制属性存在性测试&#xff0c;“in” 操作符“for…in” 循环像对象一样排序 总结✅任务你好&#xff0c;对象检查空对象对象属性求和将数值属性值都乘以 2 对象引用和复制通过引用来比较克隆与合并&#xff0c;Obj…...

Postgresql中json和jsonb类型区别

在我们的业务开发中&#xff0c;可能会因为特殊【历史&#xff0c;偷懒&#xff0c;防止表连接】经常会有JSON或者JSONArray类的数据存储到某列中&#xff0c;这个时候再PG数据库中有两种数据格式可以直接一对多或者一对一的映射对象。所以我们也可能会经常用到这类格式数据&am…...

太强了,使用 C# 开发的开源内网穿透工具

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…...

leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、二叉树的遍历、 对称二叉树等的介绍

文章目录 前言一、单值二叉树二、相同的树三、二叉树的前序遍历四、二叉树的中序遍历五、二叉树的后序遍历六、另一棵树的子树七、二叉树的遍历八、 对称二叉树总结 前言 leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、…...

Spring (38)Spring Cloud

Spring Cloud是一系列框架的集合&#xff0c;它利用Spring Boot的开发便利性&#xff0c;简化了分布式系统&#xff08;如配置管理、服务发现、断路器、路由、微代理、事件总线、全局锁、决策竞选、分布式会话等&#xff09;的开发。Spring Cloud为开发人员提供了在分布式系统中…...

MySQL之数据库相关操作学习笔记(一)

数据库相关操作 数据库表创建 定义逻辑库、数据表 DML 添加修改删除查询 DCL 用户权限事务 DDL 逻辑库数据表视图索引 DCL (Data Control Language) 示例 DCL&#xff08;数据控制语言&#xff09;主要用于控制数据库用户的访问权限和管理事务。DCL 主要包含两类语句&…...

【Node】node的Events模块(事件模块)的介绍和使用

文章目录 简言EventsPassing arguments and this to listeners 向监听器传递参数Asynchronous vs. synchronous 异步和同步Handling events only once 只一次处理事件Error events 错误事件Capture rejections of promises 捕捉拒绝承诺的情况Class: EventEmitter 事件类Event:…...

C#中字节数组(byte[])末尾继续添加字节的示例

方法一&#xff1a;使用List 使用List可以很容易地在末尾添加字节&#xff0c;然后如果需要&#xff0c;可以将其转换回byte[]。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Lin…...

Socket编程学习笔记之TCP与UDP

Socket&#xff1a; Socket是什么呢&#xff1f; 是一套用于不同主机间通讯的API&#xff0c;是应用层与TCP/IP协议族通信的中间软件抽象层。 是一组接口。在设计模式中&#xff0c;Socket其实就是一个门面模式&#xff0c;它把复杂的TCP/IP协议族隐藏在Socket接口后面&#…...

JavaScript第九讲BOM编程的练习题

前言 上一节有BOM的讲解&#xff0c;有需要的码客们可以去看一下 以下是一个结合了上述BOM&#xff08;Browser Object Model&#xff09;相关内容的练习题及其源代码示例&#xff1a; 练习题&#xff1a; 编写一个JavaScript脚本&#xff0c;该脚本应该执行以下操作&#…...

JavaScript 中创建函数的多种方式

在 JavaScript 中&#xff0c;可以通过多种方式创建函数。每种方式都有其特定的用途、优点和缺点&#xff0c;以及适用的使用场景。以下是几种常见的创建函数的方式及其详细说明。 1. 函数声明&#xff08;Function Declaration&#xff09; 示例 function add(a, b) {retur…...

对称二叉树[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个二叉树的根节点root&#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xf…...

判断GIF类型并使用ImageDecoder解析GIF图

一、判断是否为GIF图片类型 在JavaScript中&#xff0c;判断用户上传的文件是否为GIF文件类型时&#xff0c;通常可以通过检查文件的type属性或文件的拓展名来判断&#xff0c;但是由于文件拓展名可以轻易被用户修改&#xff0c;type属性是由浏览器根据文件拓展名猜测得出的&a…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...