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

news2024/10/5 17:20:49

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

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

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

相关文章

称重显示模块 Modbus RTU 通信

目录 一、智能称重数字显示器模块(带通信)1、称重传感器接线说明称重显示模块称重传感器USB 转 TTL 2、校准传感器&#xff08;标定&#xff1a;零点标定、满度标定&#xff09; 二、Modbus RTU 协议1、Modbus RTU 数据帧2、数据帧格式请求帧响应帧 三、上位机电脑与称重显示模…

使用神卓互联来访问单位内部web【内网穿透神器】

在现代工作环境中&#xff0c;有时我们需要从外部访问单位内部的 web 资源&#xff0c;而神卓互联这款内网穿透神器就能完美地满足这一需求。 使用神卓互联来访问单位内部 web 其实并不复杂&#xff0c;以下是大致的使用步骤和配置方法。 首先&#xff0c;我们需要在单位内部的…

基于Unet++在kaggle—2018dsb数据集上实现图像分割

目录 1. 作者介绍2. 理论知识介绍2.1 Unet模型介绍 3. 实验过程3.1 数据集介绍3.2 代码实现3.3 结果 4. 参考链接 1. 作者介绍 郭冠群&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2023级研究生 研究方向&#xff1a;机器视觉与人工智能 电子邮件&#xff…

【电机】开环控制系统和闭环控制系统

1 什么是控制系统 控制系统是指由控制主体、控制客体和控制媒体组成的具有自身目标和功能的管理系统。也可以理解为&#xff1a;为了使控制对象达到预期的稳定状态。例如一个水箱的温度控制&#xff0c;可以通过控制加热设备输出的功率进而来改变水温达到目标温度&#xff0c;…

Linux发邮件的工具推荐有哪些?如何配置?

Linux发邮件的功能怎么样&#xff1f;Linux系统如何设置服务器&#xff1f; 在Linux操作系统中&#xff0c;有多种工具可供选择用来发送电子邮件&#xff0c;每种工具都有其独特的特点和适用场景。AokSend将介绍几种常用的Linux发邮件工具&#xff0c;并分析它们的优缺点和适用…

接口自动化测试的全面解析与实战指南!

&#x1f680; 【引言】&#x1f680; 接口自动化测试&#xff0c;作为现代软件开发生命周期中的关键一环&#xff0c;扮演着“质量守门员”的角色。它不仅关乎提升开发速度&#xff0c;更在于确保每一次更新都能可靠地满足用户期待。接下来&#xff0c;我们将踏上一场深入浅出…

Redis分布式锁的实现、优化与Redlock算法探讨

Redis分布式锁最简单的实现 要实现分布式锁,首先需要Redis具备“互斥”能力,这可以通过SETNX命令实现。SETNX表示SET if Not Exists,即如果key不存在,才会设置它的值,否则什么也不做。利用这一点,不同客户端就能实现互斥,从而实现一个分布式锁。 举例: 客户端1申请加…

RH850---注意问题积累--1

硬件规格(引脚分配&#xff0c;内存映射&#xff0c;外设功能规格、电气特性、时序图)和操作说明 注意:有关使用的详细信息&#xff0c;请参阅应用说明 ---------外围函数。。。 1:存储指令完成与后续同步指令的一代 当控制寄存器被存储指令更新时&#xff0c;从存储的执行开始…

在网站建设时,如何选择适合自己的网站模版

可以根据以下几个地方选择适合的网站模板 1.公司的核心业务 根据公司的业务内容来确定网站展示的内容之一&#xff0c;不同的业务内容可以有不同的展示方式&#xff0c;以此来确定网站的展示风格之一&#xff0c;公司肯定是要有明确的业务内容&#xff0c;并且能够在网站…

[C#]winform使用onnxruntime部署LYT-Net轻量级低光图像增强算法

【训练源码】 https://github.com/albrateanu/LYT-Net 【参考源码】 https://github.com/hpc203/Low-Light-Image-Enhancement-onnxrun 【算法介绍】 一、研究动机 1.研究目标 研究的目标是提出一种轻量级的基于YUV Transformer 的网络&#xff08;LYT-Net&#xff09;&…

neo4j-官网学习

1、cypher 代码学习文档 https://neo4j.com/docs/cypher-cheat-sheet/5/auradb-enterprise 2、APOC函数包安装&#xff08;desktop&#xff09; 直接点击就可以安装&#xff0c;安装完之后重启一下&#xff0c;Cypher查询中使用CALL apoc.help(‘apoc’)来检查APOC插件是否已…

Java技术驱动的工程项目管理系统源码:工程管理的数字化解决方案

工程项目管理系统是一款基于Java技术的专业工程管理软件&#xff0c;它采用了Spring Cloud、Spring Boot、Mybatis、Vue和ElementUI等前沿技术&#xff0c;通过前后端分离架构构建了一个功能全面的工程项目管理系统。 随着公司的发展&#xff0c;工程管理的需求日益增长&#x…

图像处理与视觉感知复习--彩色图像处理

文章目录 三原色原理及其两种应用常用彩色模型及其应用领域各种颜色模型的转换彩色图像处理 三原色原理及其两种应用 三基色原理 自然界中绝大多数的颜色都可看作是由红、绿、蓝三种颜色组合而成&#xff1b;自然界中的绝大多数的颜色都可以分解成红、绿、蓝这三种颜色。这即…

渗透测试模拟实战-tomexam网络考试系统

渗透测试&#xff0c;也称为“pentest”或“道德黑客”&#xff0c;是一种模拟攻击的网络安全评估方法&#xff0c;旨在识别和利用系统中的安全漏洞。这种测试通常由专业的安全专家执行&#xff0c;他们使用各种技术和工具来尝试突破系统的防御&#xff0c;如网络、应用程序、主…

【PyQt5】简要介绍

文章目录 一、PyQt5的简介、安装、配置1.1 简介1.2 安装与配置1.3 QtDesigner1.3.1 基础操作 二、PyQt5的基本控件&#xff08;Widget Box&#xff09;2.1 基类&#xff08;QWidget&#xff09;2.1.1 QWidget 2.2 Button类&#xff08;属于QtWidgets&#xff1a;QPushButton&am…

轮到国产游戏统治Steam榜单

6月10日晚8点&#xff0c;《黑神话:悟空》实体版正式开启全款预售,预售开启不到5分钟,所有产品即宣告售罄。 Steam上&#xff0c;《黑神话:悟空》持续占据着热销榜榜首的位置。 但在《黑神话:悟空》傲人的光环下&#xff0c;还有一款国产游戏取得出色的成绩。 6月10日&#…

vue3+ Element-Plus 点击勾选框往input中动态添加多个tag

实现效果&#xff1a; template&#xff1a; <!--产品白名单--><div class"con-item" v-if"current 0"><el-form-item label"平台名称"><div class"contaion" click"onclick"><!-- 生成的标签 …

六西格玛培训都培训哪些内容 ?

天行健六西格玛培训的内容通常涵盖多个方面&#xff0c;旨在帮助学员全面理解和应用六西格玛管理方法。以下是详细的培训内容概述&#xff1a; 一、六西格玛基础知识 引入六西格玛的概念、原理和历史&#xff0c;包括DMAIC&#xff08;定义、测量、分析、改进、控制&#xff0…

轻松搭建,一键开发,MemFire Cloud:懒人开发者的创意神器

在如今快节奏的时代&#xff0c;对于开发者来说&#xff0c;时间就是金钱。但是&#xff0c;要想快速开发一个应用&#xff0c;却需要花费大量时间搭建服务、开发接口、集成认证等等&#xff0c;这无疑增加了开发者的工作负担。但现在&#xff0c;有了MemFire Cloud&#xff0c…

Petalinux由于网络原因产生的编译错误(2)--Fetcher failure:Unable to find file

1 Fetcher failure:Unable to find file 错误 如果编译工程遇到如下图所示的“Fetcher failure for URL”或相似错误 出现这种错误的原因是 Petalinux 在配置和编译的时候&#xff0c;需要联网下载一些文件&#xff0c;由于网 络原因这些文件不能正常下载&#xff0c;导致编译…