web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript

最新推荐文章于 2023-05-24 17:00:00 发布

@码出未来-web网页设计

最新推荐文章于 2023-05-24 17:00:00 发布

阅读量3.8k

点赞数 7

分类专栏： HTML5网站模板 web课程设计网页规划与设计 Html+Css+JavaScript 文章标签： web网页制作期末大作业 html网页制作期末大作业成品网页设计期末作业静态网页HTML web前端大作业

本文链接：https://blog.csdn.net/ruan365392777/article/details/119991689

版权

Html+Css+JavaScript 同时被 3 个专栏收录

195 篇文章 123 订阅

订阅专栏

web课程设计网页规划与设计

172 篇文章 28 订阅

订阅专栏

HTML5网站模板

11 篇文章 0 订阅

订阅专栏

web前端实训大作业：餐饮网站设计——美食城(5个页面) HTML+CSS+JavaScript

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有 5个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

web前端实训大作业：餐饮网站设计——美食城(5个页面) HTML+CSS+JavaScript
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品

一、作品演示

1.首页

在这里插入图片描述

2.菜式

在这里插入图片描述

3.点餐

在这里插入图片描述

4.美食资讯

在这里插入图片描述

5. 在线预定

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html>
<head>
    <title>美食城</title>

    <link rel="stylesheet" href="../../../pro2/default.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="author" content="www.yunalading.com" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="default.css">

</head>
<body>

<header>
    <div class="header-nav">
        <div role="navigation">
            <a href="#" rel="home" class="hd-logo" title="美食餐厅"><img src="images/logo.png"></a>
            <ul class="hd-nav">
                <li class="search-box-li">
                    <div><input type="text" name="search-keyword" placeholder="输入关键词" form="search-keyword"><i
                            class="iconfont search-submit">&#xe617;</i></div>
                    <i class="search-exit"></i></li>
                <li><a href="index.html" name="index">网站首页<span><i class="iconfont ">&#xe6aa;</i></span></a></li>
                <li><a href="about.html" name="about">关于我们<span><i class="iconfont ">&#xe6aa;</i></span></a></li>
                <li><a href="productlist.html" name="productlist">菜式欣赏<span><i class="iconfont ">&#xe6aa;</i></span></a></li>
                <li><a href="article.html" name="article">美食资讯<span><i class="iconfont ">&#xe6aa;</i></span></a></li>
                <li><a href="contact.html" name="contact">在线预订<span><i class="iconfont ">&#xe6aa;</i></span></a></li>
            </ul>

            <div class="motai"></div>
            <ul>
                <li><a><i class="iconfont search-botton">&#xe617;</i></a></li>
                <li><a>中文</a></li>
                <li><a>En</a></li>
                <li><a><i class="iconfont nav-bottom">&#xe61f;</i></a></li>
            </ul>

        </div>
        <div class="search-box">
            <form method="post" action="#" id="search-keyword">
                <input type="text" name="search-keyword" placeholder="请输入您的内容">
                <span>
                    </span>
            </form>

        </div>

    </div>

    <div class="header-carousel container">

        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">

                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/banner.jpg" style="width:100%;" alt="First slide">
                </div>
                <div class="item">
                    <img src="images/banner2.jpg" style="width:100%;" alt="Second slide">
                </div>
                <div class="item">
                    <img src="images/banner3.jpg" style="width:100%;" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next"></a>
        </div>

    </div>
</header>
<main class="main-first-bgcolor">
    <div>
        <div class="main-head">
            <p>
                <span>我们提供</span>
            </p>
        </div>
        <div class="main-we-provide">
            <ul>
                <li><span><img src="images/lunch.png" alt=""></span>
                    <h2>中餐</h2>
                    <p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li>
                <li><span><img src="images/dinner.png" alt=""></span>
                    <h2>晚餐</h2>
                    <p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li>
                <li><span><img src="images/coffee.png" alt=""></span>
                    <h2>甜品/咖啡</h2>
                    <p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li>
            </ul>
        </div>
    </div>

    <div>
        <div class="main-head">
            <p>
                <span>菜式欣赏</span>
            </p>
        </div>
    </div>
</main>
<main>
    <img class="mdbanner" src="images/mdbanner.jpg">
</main>
<main>
    <div class="main-body">
        <p><span>每一种食物来源都经过我们的精挑细选，关于食材我们只选最天然、健康、优质的，只为一份对极致美味的追求，用心做好每一份菜，是我们不变的宗旨。</span></p>
        <ul class="main-body-img">
            <li><img src="images/mdlist1.jpg"></li>
            <li><img src="images/mdlist2.jpg"></li>
            <li><img src="images/mdlist3.jpg"></li>
            <li><img src="images/mdlist4.jpg"></li>
            <li><img src="images/mdlist5.jpg"></li>
            <li><img src="images/mdlist6.jpg"></li>
            <li><img src="images/mdlist7.jpg"></li>
            <li><img src="images/mdlist8.jpg"></li>
            <li><img src="images/mdlist9.jpg"></li>
        </ul>
    </div>
</main>
<main>
    <ul class="main-submenu">
        <li><a href="#">午餐</a></li>
        <li><a href="#">晚餐</a></li>
        <li><a href="#">甜品</a></li>
        <li><a href="#">饮料</a></li>
    </ul>
    <ul class="main-submenu-info main-submenu-first">
        <li><a href="#">
            <div class="food-name">
                <p>玫瑰香酥西兰花</p>
                <p>Rose fried broccoli</p>
            </div>
            <div class="food-price">
                <p>￥<span>25</span></p>
            </div>
            <div class="img-bg"></div>
            <img src="images/foodlist1.jpg"></a></li>
        <li><a href="#">
            <div class="food-name">
                <p>玫瑰香酥西兰花</p>
                <p>Rose fried broccoli</p>
            </div>
            <div class="food-price">
                <p>￥<span>25</span></p>
            </div>
            <div class="img-bg"></div>
            <img src="images/foodlist2.jpg"></a></li>
        <li><a href="#"><img src="images/foodlist3.jpg"></a></li>
        <li><a href="#"><img src="images/foodlist4.jpg"></a></li>
        <li><a href="#"><img src="images/foodlist5.jpg"></a></li>
        <li><a href="#"><img src="images/foodlist6.jpg"></a></li>
    </ul>
    <a class="more" href="#">MORE</a>
</main>
<main>
    <div>
        <div class="main-head">
            <p><span>美食资讯</span></p>
        </div>
    </div>
    <ul class="main-submenu main-submenu-second">
        <li><a href="#">最新新闻</a></li>
        <li><a href="#">餐厅新闻</a></li>
        <li><a href="#">美食热闻</a></li>
        <li><a href="#">甜品站</a></li>
    </ul>
    <ul class="main-submenu-info ">
        <li><a href="#">
            <div class="activity-duration">
                <img  src="images/activity-duration.png">
                <p>6-1日</p>
            </div>
            <img src="images/foodnewlist1.jpg">
            <h1 class="food-head">周末轻松制作美味甜品</h1>
            <p class="food-info">每个周末都抽出一个小时的时间来为自己做一份甜品，让周末的休闲充满制作甜蜜和品尝甜蜜的快乐。</p>
        </a></li>
        <li><a href="#">
            <div class="activity-duration">
                <img src="images/activity-duration.png">
                <p>6-1日</p>
            </div>
            <img  src="images/foodnewlist1.jpg">
            <h1 class="food-head">周末轻松制作美味甜品</h1>
            <p class="food-info">每个周末都抽出一个小时的时间来为自己做一份甜品，让周末的休闲充满制作甜蜜和品尝甜蜜的快乐。</p>
        </a></li>
        <li><a href="#">
            <div class="activity-duration">
                <img src="images/activity-duration.png">
                <p>6-1日</p>
            </div>
            <img src="images/foodnewlist1.jpg">
            <h1 class="food-head">周末轻松制作美味甜品</h1>
            <p class="food-info">每个周末都抽出一个小时的时间来为自己做一份甜品，让周末的休闲充满制作甜蜜和品尝甜蜜的快乐。</p>
        </a></li>

    </ul>
    <a class="more" href="#">MORE</a>
</main>
<main>

        <div class="main-head">
            <p><span>在线预定</span></p>
        </div>
        <div class="main-reserve">
            <form action="#" method="post" id="food-reserve">
                <ul>
                    <li>
                        <label for="username">姓名</label>
                        <input type="text" name="username" id="username">
                    </li>
                    <li>
                        <label for="phonenumber">电话号码</label>
                        <input type="text" name="phonenumber" id="phonenumber">
                    </li>
                    <li>
                        <label for="email">电子邮件</label>
                        <input type="text" name="email" id="email">
                    </li>
                    <li>
                        <label for="time">时间</label>
                        <input type="text" name="time" id="time">
                    </li>
                    <li>
                        <label for="numberofpeople">人数</label>
                        <input type="text" name="numberofpeople" id="numberofpeople">
                    </li>
                    <li>
                        <label for="date">日期</label>
                        <input type="text" name="date" id="date">
                    </li>
                    <li>
                        <label for="guestbook">留言</label>
                        <input type="text" name="guestbook" id="guestbook">
                    </li>
                </ul>
                <a class="reserve">预定</a>

            </form>
        </div>
</main>

<footer>
    <div>
        <ul class="footer-top">
            <li><a href="index.html">网站首页</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="productlist.html">菜式欣赏</a></li>
            <li><a href="article.html">美食资讯</a></li>
            <li><a href="contact.html">在线预订</a></li>
        </ul>
    </div>
    <div>
        <ul class="footer-body">
        
        <ul class="footer-footer">
            <li><i class="iconfont ">&#xe613;</i></li>
            <li><i class="iconfont ">&#xe634;</i></li>
            <li><i class="iconfont ">&#xe602;</i></li>
        </ul>
    </div>
</footer>

</body>

<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/bootstrap.js"></script>
<script src="js/main.js"></script>
</html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 web前端小日记 获取更多源码 !

在这里插入图片描述

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入200例期末大作业作品

200多例 HTML5期末考核大作业源码 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

@码出未来-web网页设计

关注

7
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端实训大作业：餐饮网站设计——美食城(7个页面) HTML+CSS+JavaScript

web前端实训大作业：餐饮网站设计——美食城(5个页面) HTML+CSS+JavaScript临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。作品介绍1.网页作品简介方面：HTML期末大学生网页设计作业 ,喜欢的可以下载
复制链接

扫一扫