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

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

文章目录


一、作品介绍

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

二、作品演示




三、代码目录

四、网站代码

HTML部分代码

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

相关推荐
秋雨凉人心5 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
魏时烟6 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00017 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)
javascript·vue.js·typescript·npm·node.js·css3
踢足球的,程序猿7 小时前
Android native+html5的混合开发
javascript
前端没钱7 小时前
探索 ES6 基础:开启 JavaScript 新篇章
前端·javascript·es6
一条不想当淡水鱼的咸鱼8 小时前
taro中实现带有途径点的路径规划
javascript·react.js·taro
土豆炒马铃薯。9 小时前
【Vue】前端使用node.js对数据库直接进行CRUD操作
前端·javascript·vue.js·node.js·html5
zpjing~.~9 小时前
CSS 过渡动画效果
前端·css
温轻舟10 小时前
前端开发 -- 自动回复机器人【附完整源码】
前端·javascript·css·机器人·html·交互·温轻舟
赵大仁10 小时前
深入解析 Vue 3 的核心原理
前端·javascript·vue.js·react.js·ecmascript