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

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

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

相关文章

宕机了, redis如何保证数据不丢?

前言 如果有人问你&#xff1a;"你会把 Redis 用在什么业务场景下&#xff1f;" 我想你大概率会说&#xff1a;"我会把它当作缓存使用&#xff0c;因为它把后端数据库中的数据存储在内存中&#xff0c;然后直接从内存中读取数据&#xff0c;响应速度会非常快。…

分支结构相关

1.if 语句 结构&#xff1a; if 条件语句&#xff1a; 代码块 小练习&#xff1a; 使用random.randint()函数随机生成一个1~100之间的整数&#xff0c;判断是否是偶数 import random n random.randint(1,100) print(n) if n % 2 0:print(str(n) "是偶数") 2.else语…

【网络安全产品】---网闸

了解了不少安全产品&#xff0c;但是对网闸的理解一直比较模糊&#xff0c;今天 what 网闸是安全隔离与信息交换系统的简称&#xff0c;使得在不影响数据正常通信的前提下&#xff0c;让络在不连通的情况下数据的安全交换和资源共享&#xff0c;对不同安全域/网络之间实现真正…

【总线】AXI总线:FPGA设计中的通信骨干

目录 AXI4&#xff1a;高性能地址映射通信的基石 AXI4-Lite&#xff1a;轻量级但功能强大的通信接口 AXI4-Stream&#xff1a;高速流数据传输的利器 结语&#xff1a;AXI总线在FPGA设计中的重要性 大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计…

简单分享github

一、官网 GitHub: Let’s build from here GitHub 二、注册 通过简单的注册步骤&#xff0c;你就可以拥有一个属于自己的GitHub账号。再简单注册完成之后会需要验证你所输入的邮箱才能正常使用你的GitHub。 三、设置自己的库 在注册完成之后&#xff0c;完成一些简单的设置之…

Python第二语言(十三、PySpark实战)

目录 1.开篇 2. PySpark介绍 3. PySpark基础准备 3.1 PySpark安装 3.2 掌握PySpark执行环境入口对象的构建 3.3 理解PySpark的编程模型 4. PySpark&#xff1a;RDD对象数据输入 4.1 RDD对象概念&#xff1a;PySpark支持多种数据的输入&#xff0c;完成后会返回RDD类的对…

5款堪称变态的AI神器,焊死在电脑上永不删除!

一 、AI视频合成工具——Runway&#xff1a; 第一款RunWay&#xff0c;你只需要轻轻一抹&#xff0c;视频中的元素就会被擦除&#xff0c;再来轻轻一抹&#xff0c;直接擦除&#xff0c;不喜欢这个人直接擦除&#xff0c;一点痕迹都看不出来。 除了视频擦除功能外&#xff0c;…

从复用性角度阐述中台建设

目录 复用性中台定义深思中台建设产品线形态何时演变中台能力落地中台 业务中台架构总结 技术学习永不止步&#xff0c;最近也是看了很多关于架构设计相关的专栏&#xff0c;慢慢总结出来一部分知识&#xff0c;代入自己的思考与理解&#xff0c;以及结合并反思自己之前公司的架…

Sping源码(九)—— Bean的初始化(非懒加载)— Bean的创建方式(factoryMethod)

序言 前面文章介绍了在Spring中多种创建Bean实例的方式&#xff0c;包括采用FactoryBean的方式创建对象、使用反射创建对象、自定义BeanFactoryPostProcessor。 这篇文章继续介绍Spring中创建Bean的形式之一——factoryMethod。方法用的不多&#xff0c;感兴趣可以当扩展了解。…

php反序列化的一些知识

问题 <?php $raw O:1:"A":1:{s:1:"a";s:1:"b";}; echo serialize(unserialize($raw)); //O:1:"A":1:{s:1:"a";s:1:"b";}?> php反序列化的时按理说找不到A这个类&#xff0c;但是他没有报错&#xff0c;…

【前端技巧】css篇

利用counter实现计数器 counter-reset&#xff1a;为计数器设置名称&#xff0c;语法如下&#xff1a; counter-rese: <idntifier><integer>第一个参数为变量名称&#xff0c;第二个参数为初始值&#xff0c;默认为0 counter-increment&#xff1a;设置计数器增…

基于51单片机的篮球计分器设计

一.硬件方案 本设计用由AT89C51编程控制LED七段数码管作显示的球赛计时计分系统。该系统具有赛程定时设置、赛程时间暂停、及时刷新甲乙双方的成绩等功能。 电路主要由STC89C52单片机最小系统数码管显示模块数码管驱动模块蜂鸣器模块按键模块&#xff1b; 二.设计功能 &…

电子书(chm)-加载JS--CS上线

免责声明: 本文仅做技术交流与学习... 目录 cs--web投递 html(js)代码 html生成chm工具--EasyCHM 1-选择powershell 模式 生成 2-选择bitsadmin模式生成 chm反编译成html cs--web投递 cs配置监听器--->攻击---->web投递---> 端口选择没占用的, URL路径到时候会在…

Openldap集成Kerberos

文章目录 一、背景二、Openldap集成Kerberos2.1kerberos服务器中绑定Ldap服务器2.1.1创建LDAP管理员用户2.1.2添加principal2.1.3生成keytab文件2.1.4赋予keytab文件权限2.1.5验证keytab文件2.1.6增加KRB5_KTNAME配置 2.2Ldap服务器中绑定kerberos服务器2.2.1生成LDAP数据库Roo…

蓝牙模块在智能城市构建中的创新应用

随着科技的飞速发展&#xff0c;智能城市的概念已经逐渐从理论走向实践。物联网技术作为智能城市构建的核心驱动力&#xff0c;正在推动着城市基础设施、交通管理、环境监测等领域的深刻变革。蓝牙模块&#xff0c;作为物联网技术的重要组成部分&#xff0c;以其低功耗、低成本…

[SAP ABAP] 数据类型

1.基本数据类型 示例1 默认定义的基本数据类型是CHAR数据类型 输出结果: 示例2 STRING数据类型用于存储任何长度可变的字符串 输出结果: 示例3 DATE数据类型用于存储日期信息&#xff0c;并且可以存储8位数字 输出结果: 提示Tips&#xff1a;日期和时间类型的变量可以直接进…

linux搭建sftp服务

1. 添加用户及用户组 使用 groupadd sftpgroup 添加sftpgroup 用户组&#xff1b; 使用useradd -G sftpgroup -s /sbin/nologin cmssftp给sftpgroup 添加cmssftp用户&#xff1b; 使用passwd cmssftp给用户cmssftp进行设置密码(默认为:654321)。具体如下图所示&#xff1a; 2.…

全网最全!25届最近5年上海大学自动化考研院校分析

上海大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试科目…

Word 文本框技巧2则

1 调整大小 一种方法是&#xff0c;选中文本框&#xff0c;周围出现锚点&#xff0c;然后用鼠标拖动来调整大小&#xff1b; 精确按数值调整&#xff0c;在 格式 菜单下有多个分栏&#xff0c;一般最后一个分栏是 大小 &#xff1b;在此输入高度和宽度的数值&#xff0c;来调整…

CFA官网资料说明

进入到资料后台你就会发现&#xff0c;分了三个板块&#xff0c;分别是Study, Prepare和The Exam。 Study板块 主要提供备考重要资料&#xff0c;包括教材下载、自学习系统 Prepare板块 主要帮助考生准备考试&#xff0c;提供了一些小工具、包括机考软件指南 The exam板块…