【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单(7页面附效果及源码)

news2025/7/12 17:48:28

品牌主题宏宝莱网页制作

  • 🥤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黄大大】网站,有很多主题优质网页源码。

以上有问题可以随时交流学习,一起进步!

有任何不懂的和意见都可以评论区留言,也可私信,博主都会认真回复哟!

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

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

相关文章

机器学习之交叉熵

交叉熵&#xff08;Cross-Entropy&#xff09;是机器学习中用于衡量预测分布与真实分布之间差异的一种损失函数&#xff0c;特别是在分类任务中非常常见。它源于信息论&#xff0c;反映了两个概率分布之间的距离。 交叉熵的数学定义 对于分类任务&#xff0c;假设我们有&#…

0001.基于springmvc简易酒店管理系统后台

一.系统架构 springmvcjsplayuimysql 二.功能特性 简单易学习&#xff0c;虽然版本比较老但是部署方便&#xff0c;tomcat环境即可启用&#xff1b;代码简洁&#xff0c;前后端代码提供可统一学习&#xff1b;祝愿您能成尽快为一位合格的程序员&#xff0c;愿世界没有BUG; …

无限次使用 cursor pro

github地址 cursor-vip 使用方式 在 MacOS/Linux 中&#xff0c;请打开终端&#xff1b; 在 Windows 中&#xff0c;请打开 Git Bash。 然后执行以下命令来安装&#xff1a; 部分电脑可能会误报毒&#xff0c;需要关闭杀毒软件/电脑管家/安全防护再进行 方式1&#xff1a;通过…

AI 语言模型产业的投资困境与发展困境分析

https://benn.substack.com/p/do-ai-companies-work 巨额投资与成本困境 大型语言模型&#xff08;LLM&#xff09;的开发成本惊人。根据报道&#xff0c;OpenAI 正在筹集 65 亿美元资金&#xff0c;每年约消耗 70 亿美元用于研究、开发新的 AI 服务和扩充团队。Anthropic 预计…

tryhackme——Pre Security(安检前)-Offensive Security(进攻性安全)

这里我用的edge的插件闪击翻译。这里我英语不好&#xff0c;所以用这个可以顺便学习下英语。 任务一&#xff1a;What is Offensive Security?&#xff08;什么是进攻性安全?&#xff09; 很简单啊&#xff0c;通过阅读&#xff0c;知道以下哪个选项更能代表您模拟黑客操作…

[论文阅读] |智能体长期记忆与反思

写在前面&#xff1a;10月份的时候&#xff0c;联发科天玑9400发布&#xff0c;搭载这款旗舰 5G 智能体 AI 芯片的荣耀MagicOS9.0实现了一句话让手机自动操作美团点咖啡。很快商场实体店里便能看到很多品牌手机已经升级为智能体语音助手。下一步&#xff0c;这些智能体或许便能…

CQRS Design Pattern in Microservices - CQRS模式

原文链接 CQRS Design Pattern in Microservices - GeeksforGeeks 【文章看起来像是AI写的。。。 &#x1f602;&#x1f602;&#x1f602;】 简介 实现步骤 1&#xff0c;识别有界上下文&#xff1a;&#xff08;Identify Bounded Contexts:&#xff09; 2&#xff0c;命…

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(二)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(二) 你好,我是拉依达。 感谢所有阅读关注我的同学支持,目前博客累计阅读 27w,关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析(持续更新)-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位,感谢大家支持。 《拉…

RPC远程服务调用详解和gRPC简介

RPC (Remote Procedure Call)是远程过程调用&#xff0c;比如说现在有两台服务器A, B&#xff0c;一个在A服务器上的应用想要调用B服务器上的应用提供的某个&#xff0c;由于不在两个方法不在一个内存空间&#xff0c;不能直接调用&#xff0c;需要通过网络表达调用的语义和传达…

计算机网络知识点全梳理(三.TCP知识点总结)

目录 TCP基本概念 为什么需要TCP 什么是TCP 什么是TCP链接 如何唯一确定一个 TCP 连接 TCP三次握手 握手流程 为什么是三次握手&#xff0c;而不是两次、四次 为什么客户端和服务端的初始序列号 ISN 不同 既然 IP 层会分片&#xff0c;为什么 TCP 层还需要 MSS TCP四…

PDFMathTranslate,PDF多语言翻译,批量处理,学术论文,双语对照(WIN/MAC)

分享一个非常实用的PDF文档翻译项目——PDFMathTranslate。作为一个经常逛GitHub的开发者&#xff0c;我总喜欢翻看各种项目附带的论文&#xff0c;虽然大多时候是瞎研究&#xff0c;但却乐在其中。该项目能够完美保留公式、图表、目录和注释&#xff0c;对于需要阅读外文文献的…

前端成长之路:CSS元素显示模式

元素显示模式 网页中的标签非常的多&#xff0c;在不同的地方会使用到不同类型的标签&#xff0c;了解这些标签的特点可以更好的布局我们的网页。 元素显示模式就是元素&#xff08;标签&#xff09;按照什么方式进行显示&#xff0c;比如&#xff1a;div标签会自己独占一行&a…

如何在 Ubuntu 22.04 上使用 vnStat 监控网络流量

简介 vnStat是一个免费的、开源的、基于控制台的Linux操作系统网络流量监控工具。通过vnStat&#xff0c;你可以在不同的时间段监控网络统计数据。它简单、轻量级&#xff0c;并且消耗的系统资源很小。vnStat允许你按小时、日、月、周和日生成网络流量数据。本教程将向你展示如…

解决pip下载慢

使用pip下载大量安装包&#xff0c;下载速度太慢了 1、问题现象 pip安装包速度太慢 2、解决方案 配置国内源 vi /root/.config/pip/pip.conf[global] timeout 6000 index-url https://mirrors.aliyun.com/pypi/simple/ trusted-host mirrors.aliyun.com

RabbitMQ中的Publish-Subscribe模式

在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信和解耦系统的关键组件。RabbitMQ 是一个功能强大且广泛使用的开源消息代理&#xff0c;支持多种消息传递模式。其中&#xff0c;Publish/Subscribe&#xff08;发布/订阅&#xff0…

专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。

考研落幕&#xff0c;本人本中游211&#xff0c;如愿以偿考入浙江大学&#xff0c;专业课842信号系统与数字电路140&#xff0c;总分410&#xff0c;和考前多次模考预期差距不大&#xff08;建议大家平时做好定期模考测试&#xff0c;直接从实战分数中&#xff0c;找到复习的脉…

Unity类银河战士恶魔城学习总结(P178 Archer s arrow 弓箭手的箭)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节制作了一个弓箭手的箭 Arrow_Controller.cs 1.OnTriggerEnter2D方法 功能&#xff1a;检测箭矢与其他对象的碰撞。逻辑&#xff1…

后端接受前端传递数组进行批量删除

问题描述&#xff1a;当我们需要做批量删除功能的时候&#xff0c;我们循环单次删除的接口也能进行批量删除&#xff0c;但要删除100条数据就要调用100次接口&#xff0c;或者执行100次sql&#xff0c;这样系统开销是比较大的&#xff0c;那么我们直接采用接收的数组格式数据sq…

ByteCTF2024

wp参考&#xff1a; 2024 ByteCTF wp 2024 ByteCTF WP- Nepnep ByteCTF 2024 writeup by Arr3stY0u 五冠王&#xff01;ByteCTF 2024 初赛WriteUp By W&M ByteCTF 2024 By W&M - W&M Team ByteCTF Re WP - 吾爱破解 - 52pojie.cn 2024 ByteCTF - BediveRe_R…

Envoy 服务发现原理大揭秘与核心要点概述

1 Envoy动态配置介绍 动态资源&#xff0c;是指由envoy通过xDS协议发现所需要的各项配置的机制&#xff0c;相关的配置信息保存 于称之为管理服务器&#xff08;Management Server &#xff09;的主机上&#xff0c;经由xDS API向外暴露&#xff1b;下面是一个 纯动态资源的基…