【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)
文章目录
- 二、✍️网站描述
- 三、网站介绍
- 四、网站演示
- 五、⚙️ 网站代码
-
- HTML结构代码
- 六、 如何让学习不再盲目
- 七、更多干货
❤ 【作者主页——获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——毕设项目精品实战案例】
# 一、网站题目 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。
二、✍️网站描述
️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到二三级页面，有多页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 可选有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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>
<meta charset="utf-8" />
<title>DeathGhosttitle>
<meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
<meta name="author" content="DeathGhost"/>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/public.js">script>
<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript" src="js/jqpublic.js">script>
<script>
script>
head>
<body>
<header>
<section class="Topmenubg">
<div class="Topnav">
<div class="LeftNav">
<a href="register.html">注册a>/<a href="login.html">登录a><a href="#">QQ客服a><a href="#">微信客服a><a href="#">手机客户端a>
div>
<div class="RightNav">
<a href="user_center.html">用户中心a> <a href="user_orderlist.html" target="_blank" title="我的订单">我的订单a> <a href="cart.html">购物车（0）a> <a href="user_favorites.html" target="_blank" title="我的收藏">我的收藏a> <a href="#">商家入驻a>
div>
div>
section>
<div class="Logo_search">
<div class="Logo">
<img src="images/logo.jpg" title="DeathGhost" alt="模板">
<i>i>
<span>西安市 [ <a href="#">莲湖区a> ]span>
div>
<div class="Search">
<form method="get" id="main_a_serach" onsubmit="return check_search(this)">
<div class="Search_nav" id="selectsearch">
<a href="javascript:;" onClick="selectsearch(this,'restaurant_name')" class="choose">餐厅a>
<a href="javascript:;" onClick="selectsearch(this,'food_name')">食物名a>
div>
<div class="Search_area">
<input type="search" id="fkeyword" name="keyword" placeholder="请输入您所需查找的餐厅名称或食物名称..." class="searchbox" />
<input type="submit" class="searchbutton" value="搜 索" />
div>
form>
<p class="hotkeywords"><a href="#" title="酸辣土豆丝">酸辣土豆丝a><a href="#" title="这里是产品名称">螃蟹炒年糕a><a href="#" title="这里是产品名称">牛奶炖蛋a><a href="#" title="这里是产品名称">芝麻酱凉面a><a href="#" title="这里是产品名称">滑蛋虾仁a><a href="#" title="这里是产品名称">蒜汁茄子a>p>
div>
div>
<nav class="menu_bg">
<ul class="menu">
<li><a href="index.html">首页a>li>
<li><a href="list.html">订餐a>li>
<li><a href="category.html">积分商城a>li>
<li><a href="article_read.html">关于我们a>li>
ul>
nav>
header>
<section class="Cfn">
<aside class="C-left">
<div class="S-time">服务时间：周一~周六<time>09:00time>-<time>23:00time>div>
<div class="C-time">
<img src="upload/dc.jpg"/>
div>
<a href="list.html" target="_blank"><img src="images/by_button.png">a>
<a href="list.html" target="_blank"><img src="images/dc_button.png">a>
aside>
<div class="F-middle">
<ul class="rslides f426x240">
<li><a href="javascript:"><img src="upload/01.jpg"/>a>li>
<li><a href="javascript:"><img src="upload/02.jpg" />a>li>
<li><a href="javascript:"><img src="upload/03.jpg"/>a>li>
ul>
div>
<aside class="N-right">
<div class="N-title">公司新闻 <i>COMPANY NEWSi>div>
<ul class="Newslist">
<li><i>i><a href="article_read.html" target="_blank" title="这里调用新闻标题...">欢迎访问DeathGhost博客站...a>li>
<li><i>i><a href="article_read.html" target="_blank" title="这里调用新闻标题...">H5WEB前端开发 移动WEB模板设计...a>li>
ul>
<ul class="Orderlist" id="UpRoll">
<li>
<p>订单编号：2014090912973p>
<p>收件人：王先生p>
<p>订单状态：<i class="State01">已发货i>p>
li>
<li>
<p>订单编号：2014090912978p>
<p>收件人：张小姐p>
<p>订单状态：<i class="State02">已签收i><i class="State03">已点评i>p>
li>
<li>
<p>订单编号：2014090912988p>
<p>收件人：龚先生p>
<p>订单状态：<i class="State02">已签收i><i class="State03">已点评i>p>
li>
ul>
<script>
var UpRoll = document.getElementById('UpRoll');
var lis = UpRoll.getElementsByTagName('li');
var ml = 0;
var timer1 = setInterval(function(){
var liHeight = lis[0].offsetHeight;
var timer2 = setInterval(function(){
UpRoll.scrollTop = (++ml);
if(ml ==1){
clearInterval(timer2);
UpRoll.scrollTop = 0;
ml = 0;
lis[0].parentNode.appendChild(lis[0]);
}
},10);
},5000);
script>
aside>
section>
<section class="Sfainfor">
<article class="Sflist">
<div id="Indexouter">
<ul id="Indextab">
<li class="current">点菜li>
<li>餐馆li>
<p class="class_B">
<a href="#">中餐a>
<a href="#">西餐a>
<a href="#">甜点a>
<a href="#">日韩料理a>
<span><a href="#" target="_blank">more >a>span>
p>
ul>
<div id="Indexcontent">
<ul style="display:block;">
<li>
<p class="seekarea">
<a href="#">碑林区a>
<a href="#">新城区a>
<a href="#">未央区a>
<a href="#">雁塔区a>
<a href="#">莲湖区a>
<a href="#">高新区a>
<a href="#">灞桥区a>
<a href="#">高陵区a>
<a href="#">阎良区a>
<a href="#">临潼区a>
<a href="#">长安区a>
<a href="#">周至县a>
<a href="#">蓝田县 a>
p>
<div class="SCcontent">
<a href="detailsp.html" target="_blank" title="菜品名称">
<figure>
<img src="upload/05.jpg">
<figcaption>
<span class="title">老李家的糖醋鲤鱼span>
<span class="price"><i>￥i>169.00span>
figcaption>
figure>
a>
<a href="detailsp.html" target="_blank" title="菜品名称">
<figure>
<img src="upload/04.jpg">
<figcaption>
<span class="title">老李家的糖醋鲤鱼span>
<span class="price"><i>￥i>169.00span>
figcaption>
figure>
a>
<a href="detailsp.html" target="_blank" title="菜品名称">
<figure>
<img src="upload/06.jpg">
<figcaption>
<span class="title">老李家的糖醋鲤鱼span>
<span class="price"><i>￥i>169.00span>
figcaption>
figure>
a>
div>
<div class="bestshop">
<a href="shop.html" target="_blank" title="店铺名称">
<figure>
<img src="upload/wpjnewlogo.jpg">
figure>
a>
<a href="shop.html" target="_blank" title="店铺名称">
<figure>
<img src="upload/weijia.jpg">
figure>
a>
<a href="shop.html" target="_blank" title="店铺名称">
<figure>
<img src="upload/wpjnewlogo.jpg">
figure>
a>
<a href="shop.html" target="_blank" title="店铺名称">
<figure>
<img src="upload/weijia.jpg">
figure>
a>
<a href="shop.html" target="_blank" title="店铺名称">
<figure>
<img src="upload/wpjnewlogo.jpg">
figure>
a>
div>
li>
ul>
<ul>
<li>
<p class="seekarea">
<a href="#">碑林区a>
<a href="#">新城区a>
<a href="#">未央区a>
<a href="#">雁塔区a>
<a href="#">莲湖区a>
<a href="#">高新区a>
<a href="#">灞桥区a>
<a href="#">高陵区a>
<a href="#">阎良区a>
<a href="#">临潼区a>
<a href="#">长安区a>
<a href="#">周至县a>
<a href="#">蓝田县 a>
p>
<div class="DCcontent">
<a href="shop.html" target="_blank" title="TITLE:店名">
<figure>
<img src="upload/cc.jpg">
<figcaption>
<span class="title">老重庆川菜馆span>
<span class="price">预定折扣：<i>8.9折i>span>
figcaption>
<p class="p1"><q>仅售169元！价值289元的4-5人餐，提供免费WiFi。q>p>
<p class="p2">
店铺评分：
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-off.png">
p>
<p class="p3">店铺地址：西安市雁塔区丈八路***老重庆川菜馆...p>
figure>
a>
<a href="shop.html" target="_blank" title="TITLE:店名">
<figure>
<img src="upload/cc.jpg">
<figcaption>
<span class="title">老重庆川菜馆span>
<span class="price">预定折扣：<i>8.9折i>span>
figcaption>
<p class="p1"><q>仅售169元！价值289元的4-5人餐，提供免费WiFi。q>p>
<p class="p2">
店铺评分：
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-off.png">
p>
<p class="p3">店铺地址：西安市雁塔区丈八路***老重庆川菜馆...p>
figure>
a>
<a href="shop.html" target="_blank" title="TITLE:店名">
<figure>
<img src="upload/cc.jpg">
<figcaption>
<span class="title">老重庆川菜馆span>
<span class="price">预定折扣：<i>8.9折i>span>
figcaption>
<p class="p1"><q>仅售169元！价值289元的4-5人餐，提供免费WiFi。q>p>
<p class="p2">
店铺评分：
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-on.png">
<img src="images/star-off.png">
p>
<p class="p3">店铺地址：西安市雁塔区丈八路***老重庆川菜馆...p>
figure>
a>
div>
li>
ul>
div>
div>
article>
<aside class="A-infor">
<img src="upload/2014911.jpg">
<div class="usercomment">
<span>用户菜品点评span>
<ul>
<li>
<img src="upload/01.jpg">
用户“DeathGhost”对[ 老李川菜馆 ]“酸辣土豆丝”评说：味道挺不错，送餐速度挺快...
li>
<li>
<img src="upload/02.jpg">
用户“DeathGhost”对[ 魏家凉皮 ]“酸辣土豆丝”评说：味道挺不错，送餐速度挺快...
li>
ul>
div>
aside>
section>
<div class="F-link">
<span>友情链接：span>
<a href="http://www.deathghost.cn" target="_blank" title="DeathGhost">DeathGhosta>
<a href="http://www.17sucai.com/pins/15966.html" target="_blank" title="免费后台管理模板">绿色清爽版通用型后台管理模板免费下载a>
<a href="http://www.17sucai.com/pins/17567.html" target="_blank" title="果蔬菜类模板源码">HTML5果蔬菜类模板源码a>
<a href="http://www.17sucai.com/pins/14931.html" target="_blank" title="黑色的cms商城网站后台管理模板">黑色的cms商城网站后台管理模板a>
div>
<footer>
<section class="Otherlink">
<aside>
<div class="ewm-left">
<p>手机扫描二维码：p>
<img src="images/Android_ico_d.gif">
<img src="images/iphone_ico_d.gif">
div>
<div class="tips">
<p>客服热线p>
<p><i>1830927**73i>p>
<p>配送时间p>
<p><time>09：00time>~<time>22:00time>p>
<p>网站公告p>
div>
aside>
<section>
<div>
<span><i class="i1">i>配送支付span>
<ul>
<li><a href="article_read.html" target="_blank" title="标题">支付方式a>li>
<li><a href="article_read.html" target="_blank" title="标题">配送方式a>li>
<li><a href="article_read.html" target="_blank" title="标题">配送效率a>li>
<li><a href="article_read.html" target="_blank" title="标题">服务费用a>li>
ul>
div>
<div>
<span><i class="i2">i>关于我们span>
<ul>
<li><a href="article_read.html" target="_blank" title="标题">招贤纳士a>