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个页面)
🎉不定期分享源码，关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS，未使用Javacsript代码，共有1个页面。 二、作品演示 三、代…...
MySQL(四) - SQL优化
一、SQL执行流程 MySQL是客户端-服务器的模式。一条SQL的执行流程如下： 在执行过程中，主要有三类角色：客户端、服务器、存储引擎。 大致可以分为三层： 第一层：客户端连接到服务器，构造SQL并发送给服务器…...
用 DataGridView 控件显示数据
使用DataGridView，可以很方便显示数据。 1.为解决方案添加数据集XSD，用作为项目数据源。 2.拖DataGridView控件到WinForms上。 3.在DataGridView控件的任务处，选择数据源。 4.选好数据源后，VS自动添加DataSet、BindingSourse和T…...
VisualSVN Server/TortoiseSVN更改端口号
文章目录 概述VisualSVN Server端更改端口号TortoiseSVN客户端更改远程仓库地址 概述 Subversion（SVN）是常用的版本管理系统之一。部署在服务器上的SVN Server端通常会在端口号80，或者端口号443上提供服务。其中80是HTTP访问方式的默认端口。…...
如何解决研发数据传输层面安全可控、可追溯的共性需求？
研发数据在企业内部跨网文件交换，是相对较为普遍而频繁的文件流转需求，基于国家法律法规要求及自身安全管理需要，许多企业进行内部网络隔离。不同企业隔离方案各不相同，比如银行内部将网络隔离为生产网、办公网、DMZ区，…...
 default INSTANCES)
表 ，索引的 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不同， merge会创建一个新的提交，而rebase则是将一系列提交移动或合并到一个新的基础提交中。下面是详细解释： G…...
JavaScript 从入门到精通Object（对象）
文章目录 对象文本和属性方括号计算属性 属性值简写属性名称限制属性存在性测试，“in” 操作符“for…in” 循环像对象一样排序 总结✅任务你好，对象检查空对象对象属性求和将数值属性值都乘以 2 对象引用和复制通过引用来比较克隆与合并，Obj…...
Postgresql中json和jsonb类型区别
在我们的业务开发中，可能会因为特殊【历史，偷懒，防止表连接】经常会有JSON或者JSONArray类的数据存储到某列中，这个时候再PG数据库中有两种数据格式可以直接一对多或者一对一的映射对象。所以我们也可能会经常用到这类格式数据&am…...
太强了，使用 C# 开发的开源内网穿透工具
🏆作者：科技、互联网行业优质创作者 🏆专注领域：.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 🏆欢迎关注我（Net数字智慧化基地），里面…...
leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、二叉树的遍历、 对称二叉树等的介绍
文章目录 前言一、单值二叉树二、相同的树三、二叉树的前序遍历四、二叉树的中序遍历五、二叉树的后序遍历六、另一棵树的子树七、二叉树的遍历八、 对称二叉树总结 前言 leetcode及牛客网二叉树相关题、单值二叉树、相同的树、二叉树的前序、中序、后序遍历、另一棵树的子树、…...
Spring （38）Spring Cloud
Spring Cloud是一系列框架的集合，它利用Spring Boot的开发便利性，简化了分布式系统（如配置管理、服务发现、断路器、路由、微代理、事件总线、全局锁、决策竞选、分布式会话等）的开发。Spring Cloud为开发人员提供了在分布式系统中…...
MySQL之数据库相关操作学习笔记（一）
数据库相关操作 数据库表创建 定义逻辑库、数据表 DML 添加修改删除查询 DCL 用户权限事务 DDL 逻辑库数据表视图索引 DCL (Data Control Language) 示例 DCL（数据控制语言）主要用于控制数据库用户的访问权限和管理事务。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[])末尾继续添加字节的示例
方法一：使用List 使用List可以很容易地在末尾添加字节，然后如果需要，可以将其转换回byte[]。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Lin…...
Socket编程学习笔记之TCP与UDP
Socket： Socket是什么呢？ 是一套用于不同主机间通讯的API，是应用层与TCP/IP协议族通信的中间软件抽象层。 是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面&#…...
JavaScript第九讲BOM编程的练习题
前言 上一节有BOM的讲解，有需要的码客们可以去看一下 以下是一个结合了上述BOM（Browser Object Model）相关内容的练习题及其源代码示例： 练习题： 编写一个JavaScript脚本，该脚本应该执行以下操作&#…...
JavaScript 中创建函数的多种方式
在 JavaScript 中，可以通过多种方式创建函数。每种方式都有其特定的用途、优点和缺点，以及适用的使用场景。以下是几种常见的创建函数的方式及其详细说明。 1. 函数声明（Function Declaration） 示例 function add(a, b) {retur…...
对称二叉树[简单]
优质博文：IT-BLOG-CN 一、题目 给你一个二叉树的根节点root， 检查它是否轴对称。 示例 1： 输入：root [1,2,2,3,4,4,3] 输出：true 示例 2： 输入：root [1,2,2,null,3,null,3] 输出…...
判断GIF类型并使用ImageDecoder解析GIF图
一、判断是否为GIF图片类型 在JavaScript中，判断用户上传的文件是否为GIF文件类型时，通常可以通过检查文件的type属性或文件的拓展名来判断，但是由于文件拓展名可以轻易被用户修改，type属性是由浏览器根据文件拓展名猜测得出的&a…...
续航提升40%？EnergyStarX让Windows 11设备电量焦虑成为历史
续航提升40%？EnergyStarX让Windows 11设备电量焦虑成为历史 【免费下载链接】EnergyStarX 🔋 Improve your Windows 11 devices battery life. A WinUI 3 GUI for https://github.com/imbushuo/EnergyStar. 项目地址: https://gitcode.com/gh_mirrors/…...
药物研发新思路：共价对接工具AutoDock4实战指南（附避坑技巧）
药物研发新思路：共价对接工具AutoDock4实战指南（附避坑技巧） 在当今药物研发领域，共价抑制剂因其独特的作用机制和显著的治疗优势正受到前所未有的关注。与传统非共价药物相比，这类分子能与靶蛋白形成稳定的共价键&…...
XiaoMusic：让小爱音箱突破音乐限制的开源解决方案
XiaoMusic：让小爱音箱突破音乐限制的开源解决方案 【免费下载链接】xiaomusic 使用小爱音箱播放音乐，音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否遇到过这样的困扰：想听的歌曲在各大…...
Peroxidase-conjugated AffiniPure Goat Anti-Human IgG：高酶活，低背景，精准定量人源抗体
在现代生命科学研究中，抗体是实现特定分子识别和信号检测的核心工具。其中，二抗作为连接一抗与检测系统的重要桥梁，其特异性和灵敏度直接影响实验结果的准确性与可靠性。Peroxidase-conjugated AffiniPure Goat Anti-Human IgG, Fcγ Fragmen…...
ANSYS CFX 自定义函数实战：数据导入与变量创建全流程
1. ANSYS CFX自定义函数入门指南 第一次接触CFX自定义函数时，我也被那一堆参数和选项搞得晕头转向。但实际用下来发现，这玩意儿就像给计算流体力学(CFD)分析装了个"外挂"，能让你在标准功能之外实现各种个性化需求。简单来说&#x…...
从用户视角优化：让QGC地面站的盘旋半径显示更直观的3个实用技巧
从用户视角优化：让QGC地面站的盘旋半径显示更直观的3个实用技巧 在无人机飞行任务规划中，盘旋半径的准确显示直接关系到飞行安全和任务执行效率。QGroundControl（QGC）作为业界领先的开源地面站软件，其功能强大但某些细…...
动态间隙精准诊断：NHJX-13 型底盘间隙仪机动车底盘安全检测全方案
动态间隙精准诊断：NHJX-13 型底盘间隙仪机动车底盘安全检测全方案在机动车安全环保检测体系中，底盘间隙仪是诊断车辆转向机构、悬挂系统、传动部件间隙状况的核心设备，尤其对大中型客车、重中型货车等营运车辆，其性能直接决定底盘…...
实战指南 — 基于TCGA数据的差异表达分析全流程与可视化呈现
1. TCGA数据获取与准备 第一次接触TCGA数据库时，我被它庞大的数据量震撼到了。作为癌症基因组图谱计划，TCGA收录了33种癌症类型、超过2万例患者的基因组数据。对于肝癌(LIHC)研究来说，这里简直就是一座金矿。 进入TCGA官网后，你会…...
Ubuntu纯键盘操作全攻略：从入门到精通（附常用快捷键速查表）
Ubuntu纯键盘操作全指南：释放效率革命的终极手册 在数字工作流中，每一次伸手去摸鼠标都意味着思维的中断和效率的流失。Ubuntu作为最受欢迎的Linux发行版之一，其键盘操作体系之丰富远超多数用户的想象——从简单的窗口切换到底层系统调试&…...
【ACCELERATED GSTREAMER PERFORMANCE GUIDE】Choosing Between videoconvert and nvvidconv for Optimal Vid
1. 理解videoconvert与nvvidconv的核心差异 第一次接触GStreamer视频处理时，很多人都会困惑到底该用videoconvert还是nvvidconv。这个问题就像选择交通工具：你是要经济实惠的公交车（CPU处理），还是要速度更快的出租车&a…...