【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单(7页面附效果及源码)
品牌主题宏宝莱网页制作
- 🥤1、写在前面
- 🍧2、涉及知识
- 🌳3、网页效果
- 完整效果(7页):
- 代码目录结构:
- page1、首页
- page2、衍生品
- page3、包装设计
- page4、视频介绍
- page5、留言板
- page6、联系我们
- page7、详情页(三层页面)
- 🌈4、网页源码
- 4.1 html
- 4.2 CSS
- 4.3 源码获取
- 品牌宏宝莱网页源码及介绍链接
- 🐋5、作者寄语
🥤1、写在前面
品牌主题网站网页 一共7个页面
- 网页使用html+css制作
- 页面可以相互跳转 包含图文、菜单列表页面、视频页面、表单页面
- 含一级、二级、详细三层页面等
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他内容
- html静态网页 设计感页面 布局简单 原创html网页设计 适合当作业使用
静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计,常用的网页设计软件有Dreamwea ver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如家乡、美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。
🍧2、涉及知识
品牌主题网页宏宝莱,视频页面网页,品牌主题设计网页制作css+div,品牌网页制作与设计,7页网页制作含视频元素,静态页面html网页 。html品牌主题网页,美食宏宝莱主题网页制作,品牌主题网页html
🌳3、网页效果
完整效果(7页):
代码目录结构:
page1、首页
page2、衍生品
page3、包装设计
page4、视频介绍
page5、留言板
page6、联系我们
page7、详情页(三层页面)
🌈4、网页源码
4.1 html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>网页制作</title><link rel="stylesheet" href="css/style.css">
</head><body><div class="hong"><div class="hong-tou"><div class="caidan"><div class="logo"><img height="60px" src="images/logo.png" alt=""></div><ul><a href="index.html"><li class="visited">首页</li></a><a href="yansheng.html"><li>衍生品</li></a><a href="baozhuang.html"><li>包装设计</li></a><a href="shipin.html"><li>视频介绍</li></a><a href="liuyan.html"><li>留言板</li></a><a href="lianxi.html"><li>联系我们</li></a></ul></div><div class="banner"></div></div><div class="hong-wei"><div class="allwei"><div class="weileft"><h2>宏宝莱责任有限公司出品</h2><p>html网页制作</p></div><div class="weimid"><img height="100px" src="images/logo.png" alt=""></div><div class="weiright"><p>联系地址:北京市海淀区国家高新科技园-03幢25楼</p><p>邮箱:123456789@qq.com</p><p>电话:1322226666</p><p>微博留言:hongbaolai.weibo.com</p></div></div></div></div>
</body></html>
4.2 CSS
* {padding: 0;margin: 0;
}body, html {width: 100%;height: 100%;font-size: 13px;
}.hong {width: 100%;height: 100%;overflow-x: hidden;
}.hong-tou {width: 100%;height: auto;margin: 0 auto;
}.caidan {width: 1000px;height: 60px;padding: 5px 0;margin: 0 auto;border-bottom: 1px solid #eee;
}.logo {width: 300px;height: 60px;float: left;
}
4.3 源码获取
源码直通车点击下面链接:
品牌宏宝莱网页源码及介绍链接
🐋5、作者寄语
如果觉得我这篇博客对您有帮助,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!
更多主题及完整源码 尽在【IT黄大大】网站,有很多主题优质网页源码。
以上有问题可以随时交流学习,一起进步!
有任何不懂的和意见都可以评论区留言,也可私信,博主都会认真回复哟!
相关文章:
【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单(7页面附效果及源码)
品牌主题宏宝莱网页制作 🥤1、写在前面🍧2、涉及知识🌳3、网页效果完整效果(7页):代码目录结构:page1、首页page2、衍生品page3、包装设计page4、视频介绍page5、留言板page6、联系我们page7、详情页(三层页…...
Java的栈与队列以及代码实现
Java栈和队列 栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组实现)用队列实现栈用栈来实现队列总结 栈的概念(Stack) 栈是常见的线性数据结构&…...
华为HarmonyOS NEXT 原生应用开发:鸿蒙中组件的组件状态管理、组件通信 组件状态管理小案例(好友录)!
文章目录 组件状态管理一、State装饰器1. State装饰器的特点2. State装饰器的使用 二、Prop装饰器(父子单向通信)1. Prop装饰器的特点2. Prop装饰器的使用示例 三、Link装饰器(父子双向通信)1. Link装饰器的特点3. Link使用示例 四…...
LeetCode:150. 逆波兰表达式求值
跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:150. 逆波兰表达式求值 给你一个字符串数组 tokens ,表示一个根据 逆波兰表示法 表示的算术表…...
LLM模型的generate和chat函数区别
在 Hugging Face 的 transformers 库中,GPT(Generative Pre-trained Transformer)类的模型有两个常用的生成文本的方法:generate 和 chat。这两个方法在使用上有一些区别。通常公司发布的 LLM 模型会有一个基础版本,还…...
Vulhub:Fastjson[漏洞复现]
1.2.24-rce(CVE-2017-18349-Fastjson反序列化) 对于 Fastjson 来说,该漏洞的主要问题在于其1.2.24版本中autotype特性允许任意类的反序列化,因此攻击者通过type指定自定义类并实例化,在特定条件下调用这些类的公共方法。如果一个不受信任的 J…...
C++学习日记---第19天
笔记复习 1.继承 在C中,我们通过函数来实现代码的复用,防止重复造轮子,但是使用函数也有一个缺点1,就是当函数被定义完成之后,它的功能也就确定了,无法被修改,这时候我们引入继承。 C中的继承…...
opencv-python的简单练习
题目1.读取一张彩色图像并将其转换为灰度图。 import cv2 # 读取图片文件 img cv2.imread(./1.png)# 将原图灰度化 img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)# 输出图片 cv2.imshow(img,img) cv2.imshow(img_g,img_gray) # 进行阻塞 cv2.waitKey(0) 题目2:…...
生活小妙招之UE CaptureRT改
需求,四个不同的相机拍摄结果同屏分屏显示 一般的想法是四个Capture拍四张RT,然后最后在面片/UI上组合。这样的开销是创建4张RT,材质中采样4次RT。 以更省的角度,想要对以上流程做优化,4个相机拍摄是必须的ÿ…...
源码编译jdk11 超详细教程 openjdk11
关于源代码 当前的openJDK的源代码已经被发布到了github上了,所以我们可以直接从github上下载到。 OpenJDK11u源码托管地址:https://github.com/openjdk/jdk11u 带后缀U的地址,或者发行的jdk包,表示当前版本下的持续跟新版。而…...
lightRAG 论文阅读笔记
论文原文 https://arxiv.org/pdf/2410.05779v1 这里我先说一下自己的感受,这篇论文整体看下来,没有太多惊艳的地方。核心就是利用知识图谱,通过模型对文档抽取实体和关系。 然后基于此来构建查询。核心问题还是在解决知识之间的连接问题。 论…...
计算机网络-数据链路层
以太⽹的帧格式 源地址和⽬的地址是指⽹卡的硬件地址(也叫MAC地址), ⻓度是48位,是在⽹卡出⼚时固化的; • IP地址描述的是路途总体的 起点 和 终点; • MAC地址描述的是路途上的每⼀个区间的起点和终点;、 举个例子: 帧协议类型字段有三种值,分别对应IP、ARP、RARP...
ES6 混合 ES5学习记录
基础 数组 let arr [数据1,数据2,...数组n] 使用数组 数组名[索引] 数组长度 arr.length 操作数组 arr.push() 尾部添加一个,返回新长度 arr.unshift() 头部添加一个,返回新长度 arr.pop() 删除最后一个,并返回该元素的值 shift 删除第一个单元…...
Electron electron-builder.yml 配置 (自定义包名,用户自定义安装目录...)
electron-builder.yml 配置 # 唯一的应用程序标识符,用于操作系统级别的识别 appId: com.electron.app# 应用程序的名称,显示在用户界面上 productName: 我的应用# 定义构建资源目录,放置图标、证书等资源文件 directories:buildResources: …...
Python运维自动化之字典Dict
字典Dict(哈希表) Dict即Dictionary,也称为mapping。 Python中,字典由任意个元素构成的集合,每一个元素称为Item,也称为Entry。这个Item是由(key, value)组成的二元组。 字典是可变的、无序的、key不重复的key-value键值对集合。…...
开展新闻营销分为策划期、实施期、优化期三个重要阶段
也许有人会问:什么是新闻营销呢?这是一个在当今商业营销领域备受关注的概念。在信息爆炸的时代,企业都在绞尽脑汁寻找各种有效的营销方式来提升自己的品牌知名度、产品销量等,新闻营销便是其中一种重要的手段。 我们可以将“新闻营…...
解决 Git 默认不区分文件名大小写的问题
不得不说 Git 默认不区分文件名大小写真是一个大坑,由于之前的项目目录比较乱,项目下的文件夹命名都不规范,这两天一直在整理,然后今天从服务器将项目重新 clone 下来后发现,之前将所有文件名首字母改成大写的改动全部…...
Qt网络通信、线程之间通信详解
一、 网络通信协议主要包括TCP和UDP,但更常用和可靠的是TCP协议。TCP是一种面向连接的、可靠的、面向流的传输协议,特别适合用于连续数据传输。在Qt中,网络通信主要通过QTcpSocket类和QTcpServer类来实现。 QTcpSocket类用于建立TCP客户端和…...
java泛型
定义类、接口、方法时,同时声明了一个或者多个类型变量(如:<E>) 称为泛型类、泛型接口,泛型方法、它们统称为泛型。 作用:泛型提供了在编译阶段约束所能操作的数据类型,并自动进行检…...
C++入门(1)
一、第一个C程序 #include <iostream> using namespace std; int main() {cout << "hello world" << endl; return 0; } 1. main函数 main 函数是程序的入口,C 的程序不管有多少行代码,都是从 main 函数开始执行的&am…...
在Linux的嵌入式开发中,如何确定要操作的帧缓冲设备是第几个实例?即是fb0还是fb1还是fb2...
方法汇总 在实际编写程序时,要确定操作的帧缓冲设备(如 /dev/fb0、/dev/fb1 等),通常需要结合系统环境和硬件配置。以下是一些常见的方法,帮助你确定需要打开的帧缓冲设备实例: 1. 检查系统设备文件 查看…...
JS 中请求队列与锁的巧妙结合
一、引言 在 JavaScript 开发中,尤其是在涉及到异步操作和对共享资源的并发访问时,有效地控制请求顺序和资源访问权限至关重要。例如,在多个网络请求同时针对一个有限制访问频率的 API 或者多个异步任务竞争同一个文件写入权限的场景下&#…...
注意力机制+时空特征融合!组合模型集成学习预测!LSTM-Attention-Adaboost多变量时序预测
注意力机制时空特征融合!组合模型集成学习预测!LSTM-Attention-Adaboost多变量时序预测 目录 注意力机制时空特征融合!组合模型集成学习预测!LSTM-Attention-Adaboost多变量时序预测效果一览基本介绍程序设计参考资料 效果一览 基…...
Prefix Decoder /Causal Decoder/Encoder-Decoder的区别
Prefix Decoder 定义:Prefix Decoder,也称为非因果解码器,属于Decoder only结构。输入部分使用双向注意力,输出部分使用单向注意力。在生成新的输出时,会考虑到所有之前生成的输出。 特点:Prefix Decoder在…...
《智能体开发实战(高阶)》四、系统化的日志周报智能体开发计划
智能体扩展与完善规划 为了将前几个章节的智能体逐步扩展为支持整个公司团队使用的高效工具,以下是分阶段的完善与扩写规划。每个阶段旨在提升功能覆盖范围、处理能力和用户体验,并为企业提供实际价值。 阶段一:基础功能完善 目标:巩固现有功能,提升健壮性和适用性。 支…...
多线程编程杂谈(上)
问题 线程执行的过程中可以强制退出吗? 主动退出?被动退出? 问题抽象示例 需要解决的问题 g_run 全局变量需要保护吗? 如何编码使得线程中每行代码的执行可被 g_run 控制? 线程代码在被 g_run 控制并 "强制退…...
二五(Vue2-01)、创建实例、插值表达式、响应式、Vue指令、
1. Vue 概念及创建实例 <body><!-- 创建Vue实例,初始化渲染1. 准备容器 (Vue所管理的范围)2. 引包 (开发版本包 / 生产版本包) 官网3. 创建实例4. 添加配置项 > 完成渲染 --><div id"app"><h1>{{msg}}</h1><a href&…...
P8772 求和 P8716 回文日期
文章目录 [蓝桥杯 2022 省 A] 求和[蓝桥杯 2020 省 AB2] 回文日期 [蓝桥杯 2022 省 A] 求和 题目描述 给定 n n n 个整数 a 1 , a 2 , ⋯ , a n a_{1}, a_{2}, \cdots, a_{n} a1,a2,⋯,an, 求它们两两相乘再相加的和,即 S a 1 ⋅ a 2 a 1 ⋅ a 3 ⋯ a…...
Burp Suite(2)2024.1.1Burp Suite专业版激活(保姆级教程)
声明: 本文所使用的专业版BP在我的博客资源里面,需要的师傅可以自行下载。 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内…...
基于注意力的几何感知的深度学习对接模型 GAABind - 评测
GAABind 作者是苏州大学的生物基础与医学院, 期刊是 Briefings in Bioinformatics, 2024, 25(1), 1–14。GAABind 是一个基于注意力的几何感知蛋白-小分子结合模式与亲和力预测模型,可以捕捉小分子和蛋白的几何、拓扑结构特征以及相互作用。使用 PDBBind2020 和 CASF2016 作…...
Python中的优化函数2:cvxpy包
文章目录 介绍使用步骤示例1示例2官方文档 介绍 它是一个基于 Python 的凸优化建模工具,专门用于定义和求解 凸优化问题(Convex Optimization Problems)。CVXPY 提供了一种直观的方式来表达优化问题,并通过高效的求解器来解决这些…...
【Linux】结构化命令
结构化命令structured command:允许脚本根据条件跳过部分命令,改变执行流程。 1、if-then语句 格式1: if command then commands fi 格式2: if command; then commands fi 运行if之后的command命令,如果它的退出状态码…...
3-机器人视觉-机器人抓取与操作
文章目录 3机器人视觉目录 1. 传感器和标定摄像头模型Intrinsic MatrixExtrinsic Matrix 标定内参标定手眼标定和外参标定 力传感器&其它传感器其它传感器 2. 神经网络和图像处理2D特征处理常见架构 训练流程推理流程部署流程2D 图像任务3D Point Cloud FeaturePointNet Ap…...
LINUX——shell编程
Shell 简介 Shell 是一个 C 语言编写的脚本语言,它是用户与 Linux 的桥梁,用户输入命令交给 Shell 处理, Shell 将相应的操作传递给内核(Kernel),内核把处理的结果输出给用户。 下面是流程示意图ÿ…...
12.11函数 结构体 多文件编译
1.脑图 定义一个数组,用来存放从终端输入的5个学生的信息【学生的信息包含学生的姓名、年纪、性别、成绩】 1>封装函数 录入5个学生信息 2>封装函数 显示学生信息 3>封装函数 删除第几个学生信息,删除后调用显示学生信息函数 显示 4> 封…...
【go语言】reflect包与类型推断
reflect 包的核心概念 Go 中的反射涉及两个核心概念: Type:表示一个类型的结构体,reflect.Type 是类型的描述。Value:表示一个值的结构体,reflect.Value 是一个具体值的包装。 反射让我们能够动态地访问对象的类型和…...
docker启动一个helloworld(公司内网服务器)
这里写目录标题 容易遇到的问题:1、docker连接问题 我来介绍几种启动 Docker Hello World 的方法: 最简单的方式: docker run hello-world这会自动下载并运行官方的 hello-world 镜像。 使用 Nginx 作为 Hello World: docker…...
【瑞萨RA0E1开发板评测报告】IIC OLED 测试
【瑞萨RA0E1开发板评测报告】IIC OLED 测试 基于前面关于瑞萨 e studio 开发软件的使用,以及工程测试基础,本文进一步探索实现硬件 IIC OLED 的文字和图片显示。 1 背景 简单介绍 IIC 通信协议、OLED 显示原理、SS1306 驱动 IC 等。 IIC 通信协议 I…...
全球叉车市场 2023 - 2032 年发展趋势:自动化、电商与电动叉车的崛起
全球叉车市场到2032年将达到955.1亿美元,年复合增长率为7.49% | Astute Analytica 全球叉车市场正迎来显著增长,市场估值预计将从2023年的498.6亿美元增长至2032年的955.1亿美元,预测期内年复合增长率(CAGR)为7.49%。这…...
Kafka系列教程 - Kafka 生产者 -2
1. 生产者简介 不管是把 Kafka 作为消息队列系统、还是数据存储平台,总是需要一个可以向 Kafka 写入数据的生产者和一个可以从 Kafka 读取数据的消费者,或者是一个兼具两种角色的应用程序。 使用 Kafka 的场景很多,诉求也各有不同ÿ…...
【专题】2024年中国新能源汽车用车研究报告汇总PDF洞察(附原数据表)
原文链接: https://tecdat.cn/?p38564 本年度,国家及地方政府持续发力,推出诸多政策组合拳,全力推动汽车产业向更高质量转型升级,积极鼓励消费升级,并大力推行以旧换新等惠民生、促发展举措。尤为引人注目…...
将带注释的Word文档改造成点击注释引用即可弹窗显示注释的HTML文档
阅读中国古籍电子书的时候,往往有很多注释。在正文和注释之间来回滚动页面是一件挺麻烦的事,比较方便的做法是将它编辑成通过点击注释引用即将注释弹出显示在引用所在位置的HTML文档,然后利用HTML文档制作成PDF或者epub文件,就比较…...
【Android开发】安装Android Studio(2023.1.1)
下载安装包 Android Studio2023.1.1百度云盘下载,提取码:6666https://pan.baidu.com/s/1vNJezi7aDOP0poPADcBZZg?pwd6666 安装Android Studio 2023.1.1 双击下载好的安装包 弹出界面点击下一步 继续点击【Next】 更改安装路径后继续点击【Next】 点…...
SQLite Truncate Table
SQLite Truncate Table SQLite 是一种轻量级的数据库管理系统,广泛用于各种应用程序中。在数据库管理中,有时候需要快速删除表中的所有数据,这时就可以使用 TRUNCATE TABLE 命令。然而,SQLite 与其他数据库管理系统(如…...
港科夜闻 | 香港科大与荷兰代尔夫特理工大学(TU Delft)建立合作伙伴关系,推动艺术科技教育与研究...
关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大与荷兰代尔夫特理工大学(TU Delft)建立合作伙伴关系,推动艺术科技教育与研究。2024年12月6日,合作伙伴计划正式启动,双方期望透过合作加强艺术科技知识交流,借此推…...
谈一谈大数据流式处理,以Spark Streaming为例详细论述
Spark Streaming是构建在Spark上的实时流计算框架,可以进行实时流数据处理。Spark是一个类似于MapReduce的分布式计算框架,其核心是弹性分布式数据集,可以在快速在内存中对数据集进行多次迭代,以支持复杂的数据挖掘算法和图形计算…...
RabbitMQ实现消息发送接收——实战篇(路由模式)
本篇博文将带领大家一起学习rabbitMQ如何进行消息发送接收,我也是在写项目的时候边学边写,有不足的地方希望在评论区留下你的建议,我们一起讨论学习呀~ 需求背景 先说一下我的项目需求背景,社区之间可以进行物资借用,…...
Docker Desktop占用空间问题解决
Windows安装Docker Desktop,没过多久就会发现C盘空间满了,很大可能是Docker Desktop的文件占用了空间,可以通过以下步骤解决: 步骤一:执行清理命令 docker system prune清理磁盘,删除关闭的容器、无用的数…...
系统性能优化
一、概述 性能优化的目标:是提高系统或应用程序的响应时间、吞吐量、cpu、内存、磁盘IO、网络、流量、JVM、Tomcat、DB等方面的性能指标。 性能优化需要有一些技巧:对于整个产品或项目而言,比如可以从前端优化、后端优化、架构优化、高并发…...
golang操作sqlite3加速本地结构化数据查询
目录 摘要Sqlite3SQLite 命令SQLite 语法SQLite 数据类型列亲和类型——优先选择机制 SQLite 创建数据库SQLite 附加数据库SQLite 分离数据库 SQLite 创建表SQLite 删除表 SQLite Insert 语句SQLite Select 语句SQLite 运算符SQLite 算术运算符SQLite 比较运算符SQLite 逻辑运算…...