🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
🧑🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。
🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用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代码）。
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>li>
<li><a href="article_read.html" target="_blank" title="标题">网站介绍a>