HTML静态网页成品作业(HTML+CSS+JS)—— 美食企业曹氏鸭脖介绍网页(4个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现 图片轮播切换,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曹氏鸭脖</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav>
        <div class="nav">
            <div class="logo">
                <img src="img/logo1.png" alt="">
            </div>
            <ul>
                <li><a href="index.html" class="on">首页</a></li>
                <li><a href="pp.html">关于品牌</a></li>
                <li><a href="stores.html">店铺展示</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
            <div class="logo-2">
                <img src="img/logo2.png" alt="">
            </div>
        </div>
    </nav>
    <div class="banner">
        <div class="tu">
            <img src="img/banner6.png" alt="">
        </div>
    </div>
    <div class="about">
        <div class="tu">
            <img src="img/about.png" alt="">
        </div>
        <div class="tu-2">
            <img src="img/tu.png" alt="">
            <p>湖南曹氏鸭脖餐饮管理有限公司成立于2016年,是一家专业从事卤味食品经营和加盟培训的新型餐饮管理公司,旗下有“曹氏鸭脖”
                “曹司令”两大品牌,企业从经营卤菜的小摊开始逐步走向公司系统化经营,致力成为中国影响力的新派卤味餐饮管理企业。我们秉承规
                范管理,标准服务,合作共赢的经营理令,引进了大批优秀人才,组建了精干务实的管理团队,同时联手国内知名战略合作伙伴,通过运
                用先进的市场管理手段,整合各种优势资源,全面创造互利共赢的发展格局。多年来,我们以稳定良好的产品品质,优质的服务质量及良
                好的品牌形象,深受广大消费者喜爱,我们执忱欢迎五湖四海的朋友前来总部和各培训服务中心实地考察,品尝我们的美食!如果你执爱
                卤味事业,如果您想小本投资并成功创业,那么请您拨打加盟热线:400-618-3450,我们将以最大的热情期待您的来电!</p>
        </div>
    </div>
    <div class="banner-2">

        <img src="img/banner7.png" alt="">
    </div>
    <div class="banner-3">
        <img src="img/banner1.png" alt="">
        <img src="img/banner5.png" alt="">
        <img src="img/banner3.png" alt="">
        <img src="img/banner4.png" alt="">
        <img src="img/banner5.png" alt="">
    </div>
    <div class="product">
        <h2><span>产品</span>中心</h2>
        <p>PRODUCT CENTER</p>
        <div class="tu">
            <img src="img/caipin1.png" alt="">
            <img src="img/caipin2.png" alt="">
            <img src="img/caipin3.png" alt="">
            <img src="img/caipin4.png" alt="">
        </div>
        <h3>
			<span><</span>
			<span>></span>
		</h3>
    </div>
    <footer>
        <img src="img/footer.png" alt="">
        <div class="tx">
            <h2>曹氏鸭脖</h2>
            <h2>400-618-3450 <span>(点击拨打)</span></h2>
            <div class="tab">
                <a href="pp.html">关于品牌</a>
                <a href="stores.html">店铺展示</a>
                <a href="contact.html">联系我们</a>
            </div>
            <div class="cop">Copyright2022湖南曹氏鸭脖餐饮管理有限公司 版权所有 湘ICP备16019844-251LA统计 技术支持:鱼竹科技 站点地图</div>
        </div>
    </footer>
	
	<script src="./js/script.js"></script>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SylixOS下UDP组播测试程序

SylixOS下UDP组播测试 测试效果截图如下: udp组播发送测试程序。 /********************************************************************************************************* ** ** 中国软件开源组织 ** ** …

即插即用!CVD:第一个生成具有相机控制的多视图一致视频方案!(斯坦福港中文)

论文链接&#xff1a;https://arxiv.org/abs/2405.17414 项目链接&#xff1a;https://collaborativevideodiffusion.github.io/ 最近对视频生成的研究取得了巨大进展&#xff0c;使得可以从文本提示或图像生成高质量的视频。在视频生成过程中添加控制是未来的重要目标&#x…

算法:模拟题目练习

目录 题目一&#xff1a;替换所有的问号 题目二&#xff1a;提莫攻击 题目三&#xff1a;N字形变换 题目四&#xff1a;外观数列 题目五&#xff1a;数青蛙 首先先解释一下模拟算法是什么&#xff0c;其实模拟算法就是题目让我们干什么我们就干什么&#xff0c;思路比较简…

【数据库设计】宠物商店管理系统

目录 &#x1f30a;1 问题的提出 &#x1f30a;2 需求分析 &#x1f30d;2.1 系统目的 &#x1f30d;2.2 用户需求 &#x1f33b;2.2.1 我国宠物行业作为新兴市场&#xff0c;潜力巨大 &#x1f33b;2.2.2 我国宠物产品消费规模逐年增大 &#x1f33b;2.2.3 我国宠物主选…

YOLOv5改进 | Head | 将yolov5的检测头替换为ASFF_Detect

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 在目标检测中&#xff0c;为了解决尺度变化的问题&#xff0c;通常采用金字塔特征表示。然而&#xff0c;对于基于特征金字塔的单次检测器来…

凡尔码来访登记卡助力来访安全

来访登记制度是指为了加强对来访人员的管理和安全控制&#xff0c;确保组织内部秩序和安全的一项制度。通过来访登记制度&#xff0c;可以对来访人员的身份进行核实&#xff0c;了解来访目的&#xff0c;并采取相应的安全措施&#xff0c;为组织内部的工作和人员安全提供保障。…

Sass实战运用,如何利用好Sass

Sass&#xff08;Syntactically Awesome Stylesheets&#xff09;是一种CSS预处理器&#xff0c;它提供了许多强大的功能&#xff0c;如变量、嵌套规则、混合&#xff08;Mixins&#xff09;、函数等&#xff0c;使得CSS的编写更加高效、灵活和易于维护。以下是关于Sass实战运用…

Go基础编程 - 05 - 数组与切片

目录 1. 数组2. 切片2.1. slice 声明、初始化2.2. slice 操作2.3. append() 追加切片、扩容2.4. 字符串和切片 3. Copy4. Array、Slice 内存布局 上一篇&#xff1a;基本类型、常量和变量 1. 数组 数组是同一种类型固定长度的序列&#xff08;有长度、类型构成&#xff09;。…

Postgres 正在吞噬数据库世界

Postgres 正在吞噬数据库世界 作者&#xff1a;Ruohang Feng&#xff08;Vonng&#xff09;|微信| Medium | 2024-03-04 标签&#xff1a; PostgreSQL生态系统 PostgreSQL 不仅仅是一个简单的关系型数据库&#xff0c;它还是一个数据管理框架&#xff0c;具有席卷整个数据库领…

基于WPF技术的换热站智能监控系统04--实现左侧历史曲线

1、区域划分 左侧分5行&#xff0c;第一行信息标题&#xff0c;第二行历史曲线 2、安装livecharts图表控件 3、引入图表控件命名空间 4、使用控件 5、运行效果 走过路过不要错过&#xff0c;点赞关注收藏又圈粉&#xff0c;共同致富&#xff0c;为财务自由作出贡献

IP地址乱成一团?用Shell一键搞定!

在日常的运维工作中&#xff0c;我们经常需要对各种数据进行处理和分析&#xff0c;其中包括对IP地址的管理和排序。排序后的IP地址列表可以帮助我们更好地进行日志分析、网络流量监控和故障排除。 本文将模拟一个运维场景&#xff0c;展示如何对IP地址进行排序&#xff0c;并探…

Mongodb使用$pop删除数组中的元素

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第67篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

编译和连接

目录1. 翻译环境和运行环境2. 翻译环境:预编译编译汇编链接1. 翻译环境和运行环境 在ANSI C 的任何一种实现中&#xff0c;存在两个不同环境。 (1) 翻译环境&#xff0c;在这种环境中源代码被转换为可执行的机器指令(二进制指令)。 (2) 执行环境&#xff0c;它用于实际执行的代…

PostgreSQL 多表连接不同维度聚合统计查询

摘要:在本文中,你将学习到如何使用 PostgreSQL 完全外连接,从两个或多个表中聚合维度统计数据。 文章目录 一、常用的连接类型图示二、数据库表设计示例三、连接查询示例1. inner join 内连接(不能满足维度统计需求)2. full join 完全外连接(满足维度统计需求)一、常用的…

Golang免杀-分离式加载器(传参)AES加密

目录 enc.go 生成: dec.go --执行dec.go...--上线 cs生成个c语言的shellcode. enc.go go run .\enc.go shellcode 生成: --key为公钥. --code为AES加密后的数据, ----此脚本每次运行key和code都会变化. package mainimport ("bytes""crypto/aes"&…

java1.8运行arthas-boot.jar运行报错解决

报错内容 输入java -jar arthas-boot.jar&#xff0c;后报错。 [INFO] JAVA_HOME: D:\developing\jdk\jre1.8 [INFO] arthas-boot version: 3.7.2 [INFO] Can not find java process. Try to run jps command lists the instrumented Java HotSpot VMs on the target system.…

Spring Boot集成antlr实现词法和语法分析

1.什么是antlr&#xff1f; Antlr4 是一款强大的语法生成器工具&#xff0c;可用于读取、处理、执行和翻译结构化的文本或二进制文件。基本上是当前 Java 语言中使用最为广泛的语法生成器工具。Twitter搜索使用ANTLR进行语法分析&#xff0c;每天处理超过20亿次查询&#xff1…

20240612在飞凌的OK3588-C开发板的linux系统下测试以太网

20240612在飞凌的OK3588-C开发板的linux系统下测试以太网 2024/6/12 17:56 欢迎您入坑飞凌的OK3588-C开发板&#xff0c;使用飞凌的预编译的固件&#xff1a;OK3588-linuxfs-img.tar.bz2 Z:\rockdev\update.img tar jxvf OK3588-linuxfs-img.tar.bz2 首先&#xff0c;刷Android…

自己用pip下载好模块啦,但是在pycharm里面不显示?

问题&#xff1a; 今天在cmd里面用pip命令安装第三方模块&#xff0c;最后用pip list 命令发现已经成功安装&#xff0c;但是在pycharm里面用该模块的时候&#xff0c;还是爆红&#xff0c;显示没有该库 。 解决方法&#xff1a; 第一种&#xff08;项目刚创建&#xff09;&am…

虚拟声卡实现音频回环

虚拟声卡实现音频回环 一、电脑扬声器播放声音路由到麦克风1. Voicemeeters安装设置2. 音频设备选择 二、回声模拟 一、电脑扬声器播放声音路由到麦克风 1. Voicemeeters安装设置 2. 音频设备选择 以腾讯会议为例 二、回声模拟 选中物理输入设备“Stereo Input 1”和物理输出设…