学生HTML静态网页基础水平制作DIV+CSS+JavaScript技术制作美食网页——美食城6页面
静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
精彩专栏推荐
【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】
文章目录
- 一、网站题目
- 二、网站描述✍️
- 三、网站介绍
- 四、网站效果
- 五、代码实现
-
- HTML结构代码
- CSS样式代码
- 八、更多干货
一、网站题目
美食网页介绍、甜品蛋糕、地方美食小吃文化、餐饮文化、等网站的设计与制作。
二、网站描述✍️
美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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">i>div>
<i class="search-exit">i>li>
<li><a href="index.html" name="index">网站首页<span><i class="iconfont ">i>span>a>li>
<li><a href="about.html" name="about">关于我们<span><i class="iconfont ">i>span>a>li>
<li><a href="productlist.html" name="productlist">菜式欣赏<span><i class="iconfont ">i>span>a>li>
<li><a href="article.html" name="article">美食资讯<span><i class="iconfont ">i>span>a>li>
<li><a href="contact.html" name="contact">在线预订<span><i class="iconfont ">i>span>a>li>
ul>
<div class="motai">div>
<ul>
<li><a><i class="iconfont search-botton">i>a>li>
<li><a>中文a>li>
<li><a>Ena>li>
<li><a><i class="iconfont nav-bottom">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">
<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>
<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>
<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 broccolip>
div>
<div class="food-price">
<p>￥<span>25span>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 broccolip>
div>
<div class="food-price">
<p>￥<span>25span>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="#">MOREa>
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="#">MOREa>
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-8868331span>
li>
<li>
<span>邮箱:span><span>[email protected]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 ">i>li>
<li><i class="iconfont ">i>li>
<li><i class="iconfont ">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 知识，互相学习」！
3.以上内容技术相关问题欢迎一起交流学习