HTML网页设计制作大作业（div+css）静态网页基础水平制作DIV+CSS+JavaScript技术制作美食网页——美食城6页面

最新推荐文章于 2024-07-25 11:52:08 发布

优质内容贡献

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量382

点赞数 11

分类专栏：学生div+css静态网页设计成品 web大学生个人网站作业模文章标签： html 课程设计 css 前端 html5 javascript HTML网页制作

本文链接：https://blog.csdn.net/qq_524614081/article/details/135497474

版权

学生div+css静态网页设计成品同时被 2 个专栏收录

602 篇文章 63 订阅

订阅专栏

web大学生个人网站作业模

558 篇文章 34 订阅

订阅专栏

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

在这里插入图片描述

五、代码实现 🪓

HTML结构代码🧱

<!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">
            <li>
                <span>电话:</span><span>0714-8868331</span>
            </li>
            <li>
                <span>邮箱:</span><span>123@dayeyunalading.com</span>
            </li>
            <li>
                <span>地址:</span><span>湖北省大冶市大冶大道金穗小区好太太办公室</span>
            </li>
        </ul>
        <P>designed and developed with by Daye Aladdin Technology Co., Ltd.</P>
        <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>

CSS样式代码💒

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

优质内容贡献

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML网页设计制作大作业（div+css）静态网页基础水平制作DIV+CSS+JavaScript技术制作美食网页——美食城6页面

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板
复制链接

扫一扫

专栏目录