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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/22590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[C][数据结构][时间空间复杂度]详细讲解

目录 0.铺垫1.时间复杂度 -- 衡量算法的运行快慢1.是什么&#xff1f;2.大O的渐进表示法 2.空间复杂度 - 衡量算法所需要的额外空间3.常见复杂度对比 0.铺垫 时间是累计的空间是不累计的&#xff0c;可以重复利用 1.时间复杂度 – 衡量算法的运行快慢 1.是什么&#xff1f; …

Python R用法:深度探索与实用技巧

Python R用法&#xff1a;深度探索与实用技巧 在Python的广袤生态系统中&#xff0c;R语言的功能和特性通过某些库得以复现和扩展&#xff0c;使得数据分析师和科学家能够在同一个平台上无缝切换。本文将分四个方面、五个方面、六个方面和七个方面&#xff0c;深入剖析Python中…

15.2 测试-网格测试、基准测试与测试覆盖率

1. 网格测试 函数或方法的输出因收到的输入而异&#xff0c;如果为每个输入专门编写一个测试用例&#xff0c;将导致大量的重复代码。 不妨将输入的各种组合存放在网格之中&#xff0c;只编写一个测试用例即完成对所有输入的测试&#xff0c;比如象下面这样&#xff1a; va…

大模型卷出新高度|暴雨AI服务器M8878助解算力之困

当今世界&#xff0c;作为新一轮科技革命和产业革命的重要驱动力&#xff0c;AI已经成为“兵家必争之地”。我国也在政府报告中首次将“人工智能”行动纳入国家战略&#xff0c;开启了以人工智能为核心的数字经济高质量发展的新时代。 当今世界&#xff0c;作为新一轮科技革命…

盘点:中国智能物流装备头部企业的“业务地盘”,谁还不为自己护食?

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 随着中国市场对智能物流装备需求的不断增长&#xff0c;各大物流装备企业纷纷加大投入&#xff0c;拓展业务&#xff0c;形成各自的重点业务行业。以下是几家主要企业在智能物流装备领…

AI 正在攻克难题——赋予计算机嗅觉

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Nginx GeoIP 使用指南-宝塔识别ip屏蔽地区

Nginx 的 GeoIP 模块允许根据访问者的 IP 地址识别其地理位置,并根据地理位置执行特定操作。本文档将详细展示如何配置和使用 Nginx 的 GeoIP 模块,包括基本配置、访问控制、基于地理位置的重定向等。 1. 安装 GeoIP 模块 首先,需要确保 Nginx 安装了 GeoIP 模块。如果未安…

VUE3 学习笔记(13):VUE3 下的Element-Plus基本使用

UI是页面的门面&#xff0c;一个好的UI自然令人赏心悦目&#xff1b;国人团队开发的ElementUI在众多UI中较为常见&#xff0c;因此通过介绍它的使用让大家更好的了解第三方UI的使用。 安装 Npm install element-plus --save 或 Cnpm install element-plus --save 配置 全局配置…

Windows CMD对MySQL进行基本操作的常用命令

目录 前言1. 数据库操作2. 表操作3. 记录操作4. 备份与恢复数据库 前言 对于基本的命令行以及优化推荐阅读&#xff1a; 数据库中增删改常用语法语句&#xff08;全&#xff09;Mysql优化高级篇&#xff08;全&#xff09;命令行登录Mysql的详细讲解 启动MySQL服务&#xff1…

多线程知识-13

为什么应该在循环中检查等待条件 为了实现多线程的同步和协调&#xff0c;通常使用等待和唤醒机制。在等待和唤醒机制中&#xff0c;等待条件是指一个线程等待某个条件的满足&#xff0c;当条件满足时&#xff0c;线程被唤醒继续执行。 在循环中检查等待条件的目的是为了避免虚…

关于nginx的配置参数

关于nginx的配置参数 nginx参考配置参数 #宝塔服务器PHP项目配置文件 server {listen 80;server_name 服务器公网地址;index index.php index.html index.htm default.php default.htm default.html;root /root/peopledata/front/dist/;#CERT-APPLY-CHECK--START# 用于SSL证书…

Binary Ninja 4.0.5336 (macOS, Linux, Windows) - 逆向平台

Binary Ninja 4.0.5336 (macOS, Linux, Windows) - 逆向平台 请访问原文链接&#xff1a;https://sysin.org/blog/binary-ninja/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org Binary Ninja A New Type of Reversing Platfo…

【TB作品】msp430g2553单片机,智能台灯,依据亮度调节小灯亮度,IIC oled,PWM亮度

功能 msp430g2553单片机&#xff0c;读取gy-30的光照强度&#xff0c;oled显示光照强度&#xff0c;依据光照强度调节小灯亮度。 硬件 gy-30 0.96寸 iic oled //gy-30 //SCL--P1.4 //SDA--P1.5 //VCC--3.3V //GND--GND //ADDR--GND//oled //SCL--P2.0 //SDA--P2.1 //VCC--…

MATLAB算法实战应用案例精讲-【数模应用】内容效度(附R语言代码实现)

目录 前言 几个高频面试题目 不同类型的效度对比 一、效度定义 二、结构效度 三、结构效度延伸

如何零基础自学软件测试

自学软件测试需要掌握以下技能&#xff1a; 一、基础技能 掌握编程语言&#xff1a;软件测试的基础是编程&#xff0c;因此需要掌握至少一种编程语言&#xff0c;如Python、Java等。这是测试用例编写、自动化脚本编写、测试报告编写等的基础。了解测试理论&#xff1a;包括软…

Nginx--安装SSL证书(支持https)的方法

原文网址&#xff1a;Nginx--安装SSL证书(支持https)的方法_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Nginx如何安装SSL证书。 1.上传证书 1.在Nginx的配置文件目录下创建存放证书的目录 cd /etc/nginx/ #进入Nginx默认配置文件目录。请根据实际配置调整。 mkdir cert #…

机器学习算法 —— 逻辑回归

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 目录 逻辑回归逻辑回归的介绍逻辑回归的优点逻辑回归的缺点逻辑回归的应用 实践演示库函数导入模型训练模型参数查看数据和模型可视化模型预测 …

11_JavaWeb监听器

文章目录 监听器1.监听器的分类2.application域监听器案例 监听器 概念&#xff1a;后端要发生一些事情的时候&#xff0c;自动触发一些代码的执行&#xff1b; 1.监听器的分类 web中定义八个监听器接口作为监听器的规范,这八个接口按照不同的标准可以形成不同的分类 按监听的…

下载ubuntu22.04

建议使用&#xff1a;清华源镜像 官网下载比较慢Ubuntu 22.04.4 LTS (Jammy Jellyfish) 打开清华源向下翻 然后找到22.04 下载完成&#xff1a;

C++的线性回归模型

线性回归模型是数理统计中的一种回归分析方法&#xff0c;其核心思想是通过建立一个线性方程来描述因变量与自变量之间的关系。这种关系可以表示为y wx e&#xff0c;其中y是因变量&#xff0c;x是自变量&#xff0c;w是回归系数向量&#xff0c;e是误差项&#xff0c;服从均…