HTML静态网页作业-餐饮美食网页(HTML+CSS+JavaScript)
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。
作品介绍
1.网页作品简介方面 :简单的网站模板,餐饮美食网站模板,餐饮美食加盟网站html模板下载。,文章页支持手机PC响应式布局。总共8个页面html下载。
2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)
3.网页作品布局方面:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
- HTML静态网页作业-餐饮美食网页(HTML+CSS+JavaScript)
- 作品介绍
- 一、作品演示
- 1.首页
- 2.门店分布
- 3.招商加盟
- 4.在线商城
- 二、代码目录
- 三、代码实现
- 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
- 五、源码获取
- 六、更多HTML期末大作业作品文章
- 七、更多表白源码
1.首页
2.门店分布
3.招商加盟
4.在线商城
二、代码目录
三、代码实现
<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>模板</title><meta name="keyword" content=""><meta name="description" content=""><meta name="author" content=""><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/style.css"><script src="js/jquery.min.1.11.3.js"></script><script src="js/SuperSlide.2.1.1.js"></script><script src="js/js.js"></script><link type="text/css" rel="stylesheet" href="css/skitter.styles.css"><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><script type="text/javascript" src="js/jquery-1.6.4.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/jquery.skitter.min.js"></script><script type="text/javascript" src="js/jquery.haiwon.js"></script><script type="text/javascript" src="js/css.js"></script><script type="text/javascript" src="js/js.js"></script><!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/png.js"></script>
<script>
<![endif]-->
</head>
<body><header class="index_header"><div class="style"><ul class="index_logo"><li><a href="about.html">关于我们</a></li><li><a href="fendian.html">门店分布</a></li><li><a href="injon.html">招商加盟</a></li><div><a href=""><img src="data:images/index_03.png" alt="" title="首页"></a></div><li><a href="">在线商城</a></li><li><a href="zp.html">人才招聘</a></li><li><a href="contact.html">联系我们</a></li></ul></div></header><nav class="index_nav"><div style="width:100%; overflow:hidden; height:633px; position:relative; z-index:0; "><div style=" width:1920px; height:633px; position:relative; left:50%; "><div style="position:relative;width:1920px;height:633px; z-index:1; left:-50%;"><div class="banner box_skitter skitter-default" style="height:633px"><ul style="display: none;"><li><a target="_blank" href=""><img src="data:images/banner02.jpg"></a></li><li><a target="_blank" href=""><img src="data:images/banner02.jpg"></a></li><li><a target="_blank" href=""><img src="data:images/banner02.jpg"></a></li><li><a target="_blank" href=""><img src="data:images/banner02.jpg"></a></li></ul><span class="info_slide_dots" style="left: 926px;"><span class="image_number" rel="0" id="image_n_1_0"></span><span class="image_number" rel="1" id="image_n_2_0"></span><span class="image_number" rel="2" id="image_n_3_0"></span><span class="image_number image_number_select" rel="3" id="image_n_4_0"></span></span></div></div></div></div></nav><style type="text/css">.poster-main{position: absolute;top:220px;margin-left: 100px;}.poster-main .poster-list .poster-item{border-radius: 50%;overflow: hidden;position: absolute;left: 0;top: 0;}.poster-main .poster-list .poster-item a img{border-radius: 50%;border:8px solid #fff;}.poster-main .poster-btn{position: absolute;top: 0;cursor: pointer;}.poster-main .poster-prev-btn{left: -220px;background: url("images/btn_l.png") no-repeat center center;}.poster-main .poster-next-btn{right: -220px;background: url("images/btn_r.png") no-repeat center center;}</style><div class="index_style1"><div class="style" style="position:relative"><div class="poster-main" id="carousel" data-setting='{"width":1000,"height":300,"posterWidth":300,"posterHeight":300,"scale":0.8,"speed":1000,"autoPlay":true,"delay":3000,"verticalAlign":"middle"}'> <div class="poster-btn poster-prev-btn"></div> <ul class="poster-list"> <li class="poster-item"><a href="#"><img src="data:images/01.jpeg" alt="" width="100%" /></a></li> <li class="poster-item"><a href="#"><img src="data:images/01.jpeg" alt="" width="100%" /></a></li> <li class="poster-item"><a href="#"><img src="data:images/01.jpeg" alt="" width="100%" /></a></li> <li class="poster-item"><a href="#"><img src="data:images/01.jpeg" alt="" width="100%" /></a></li> <li class="poster-item"><a href="#"><img src="data:images/01.jpeg" alt="" width="100%" /></a></li> </ul> <div class="poster-btn poster-next-btn"></div> </div><div class="instyle1_s"><a href="">在线购买</a></div> </div><script src="js/Carousel.js"></script> <script type="text/javascript">$(function(){Carousel.init($("#carousel"));$("#carousel").init();});</script></div><div class="index_style2"><div class="style" style="position:relative"><a href="" class="index_s2_a1"><img src="data:images/index1_07.png" alt=""></a><div class="index_s2_c">
公司的组织形式。以营利为目的的社团法人。在资本主义社会获得高度发展。我国在建国后对私营公司进行了社会主义改造。国营工、商、建筑、运输等部门中实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构,也通称公司。近年来随着我国经济体制的改革,享有法人资格的各种公司纷纷设立,按章程从事自身的生产经营活动。
实行独立经济核算的经营管理组织和某些城市中按行业划分的专业管理机构,按章程从事自身的生产经营活动。
<a href="" class="index_s2_ca">查看更多>></a></div></div></div><div class="index_style3"><div class="style" style="position:relative"><div class="index_style3_t"><img src="data:images/index1_11.png" alt=""></div><ul class="index_s3_c"><li><dl class="ins3_dl"><dt><a href="injon_show.html"><img src="data:images/index1_15.png" alt=""></a></dt><dd class="ins3_dl_dd1">卤鱼有约</dd><dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒,资产慌,慌的不只是投资者,很多上市公司手头空有闲钱,却也没有特别好的投向。</dd><dd class="ins3_dl_dd3"><a href="">查看更多>></a></dd></dl></li><li><dl class="ins3_dl"><dt><a href="injon_show.html"><img src="data:images/index1_17.png" alt=""></a></dt><dd class="ins3_dl_dd1">卤鱼有约</dd><dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒,资产慌,慌的不只是投资者,很多上市公司手头空有闲钱,却也没有特别好的投向。</dd><dd class="ins3_dl_dd3"><a href="">查看更多>></a></dd></dl></li><li><dl class="ins3_dl"><dt><a href="injon_show.html"><img src="data:images/index1_20.png" alt=""></a></dt><dd class="ins3_dl_dd1">卤鱼有约</dd><dd class="ins3_dl_dd2">上市公司大手笔现金理财 漫步者理财金额超全年营收资产荒,资产慌,慌的不只是投资者,很多上市公司手头空有闲钱,却也没有特别好的投向。</dd><dd class="ins3_dl_dd3"><a href="">查看更多>></a></dd></dl></li></ul></div></div><div class="index_style4"><div class="style" style="position:relative"><dl class="ins_dl1"><dt><a href="fendian.html"><img src="data:images/index1_26.png" alt=""></a></dt><dd><a href="">湖北一店</a></dd></dl><dl class="ins_dl1"><dt><a href="fendian.html"><img src="data:images/index1_26.png" alt=""></a></dt><dd><a href="">湖北二店</a></dd></dl><dl class="ins_dl1"><dt><a href="fendian.html"><img src="data:images/index1_26.png" alt=""></a></dt><dd><a href="">湖北三店</a></dd></dl><dl class="ins_dl1"><dt><a href="fendian.html"><img src="data:images/index1_26.png" alt=""></a></dt><dd><a href="">湖北三店</a></dd></dl></div></div><div class="index_style5"><div class="style"><dl class="inst5_left"><dt><a href="">联系我们</a></dt><dd>公司名称:XXXXXXXXXXXXX<br/>联 系 人:XXXXXX<br/>联系电话:XXXXX<br/>联系 Q Q:XXXXX<br/>公司网址:XXXXX<br/>公司电话:XXXXX<br/>公司邮箱:XXXXX<br/>公司地址:XXXXXXXXXXXXXXXXXXXXX</dd></dl><div class="inst5_right"><form action="" onsubmit="return check()"><ul class="inst5_right_ul"><li><span>姓名:</span><input type="text" id="in_username" name="name"></li><li><span>电话:</span><input type="text" id="in_tel"></li><li><span>邮箱:</span><input type="text" id="in_email"></li><li style="height:100px"><span>留言:</span><textarea name="" id="in_message"> </textarea></li></ul><div class="inst5_right_d"><input type="submit"></div></form></div></div></div><footer class="index_footer"><div class="style index_fc"><div class="index_fc1">友情链接</div><div class="index_fc2"><ul><li><a href="">新华网湖北频道</a></li><li>|</li><li><a href="">长江网</a></li><li>|</li><li><a href="">福州房产网</a></li><li>|</li><li><a href="">武汉家装</a></li><li>|</li><li><a href="">房地产英才网</a></li><li>|</li><li><a href="">南昌圈圈网</a></li><li>|</li><li><a href="">长江网</a></li><li>|</li><li><a href="">福州房产网</a></li><li>|</li><li><a href="">武汉家装</a></li><li>|</li><li><a href="">福州房产网</a></li><li>|</li><li><a href="">武汉家装</a></li><li>|</li><li><a href="">房地产英才网</a></li><li>|</li><li><a href="">房地产英才网</a></li><div class="clear"></div></ul><div>XXXXXXXXXXXXX @copy;版权所有</div></div><div class="index_fc3"><img src="data:images/index1_30.png" alt=""><span>扫一扫关注</span></div></div></footer>
</body>
</html>
<script>function check() {var name = $("#in_username").val(); var tel = $("#in_tel").val();var email = $("#in_email").val(); var message = $("#in_message").text(); if(name == "") { alert("姓名不能为空"); return false; } if(tel == "") { alert("电话不能为空"); return false; } if(email == "") { alert("Email值不能为空"); return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { alert("邮箱格式不正确,必须包含@和."); return false; } if(message == "") { alert("留言不能为空"); return false; } } </script>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !
HTML静态网页作业-餐饮美食网页(HTML+CSS+JavaScript)相关推荐
- web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
- web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
- 简单的学生网页作业源码 基于html css javascript仿淘宝购物商城设计毕业论文源码
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 网页制作课作业简单的学生网页作业源码 基于html css javascript jquery仿慕课网教学培训网站设计实例 企业网站制作
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- web课程设计 简单的学生网页作业源码 基于html css javascript jquery女性化妆品商城
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- web前端期末大作业 简单的学生网页作业源码 基于html css javascript绿色的在线教育平台网站响应式企业网站模板
- web网页设计与开发:简单的学生网页作业源码 基于html css javascript简单的个人博客网页制作期末作业
- web前端期末大作业——简单的学生网页作业源码 基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)
- Web前端大作业、简单的学生网页作业源码 基于html css javascript响应式个人相册博客网站
- HTML5期末大作业:运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末 ...
最新文章
- Spinnaker:云原生多云环境持续部署的未来这样玩!
- 有kotlin中的Android项目编译出现 Unresolved reference: R
- awk 截取部分字符串_linux三剑客-awk
- iphone ios编译ffmpeg
- 【重点突破】—— React实现富文本编辑器
- 4.自定义的Spring Boot Starters
- win7安装中文语言包
- QTreeView使用系列教程目录
- PHP字符串解析函数
- 360企业安全刘浩:避免创可贴式安全,企业云安全从顶层设计开始
- 边境的悍匪—机器学习实战:第十三章 使用TensorFlow加载和预处理数据
- 芯片丨英特尔拟收购初创公司Barefoot Networks 后者曾获腾讯阿里投资
- 家装中,你最后悔的事是什么?上海极家装修公司简介!
- 电脑无线网卡和有线网卡同时使用
- 电商干货!1000万烧出来的高点击率钻展创意图十大原则(营销人性)
- 关于小程序订单中心页设置的公告
- 微信小程序转账(简单流程代码)tp6接口
- [python][LXF][Notes]文件读写及序列化
- 洛谷:珠心算测验(P2141)C语言
- 企业如何利用优惠政策进行税收筹划?
热门文章
- html 获取当前页面地址,通过js获取当前页面url的信息
- matlab转换器dcdc,用 Simulink 设计 DC/DC 转换器
- java reader 组合_Java IText 拼接合并PDF的三种方法
- 【爱加密】防止签名破解
- 关于ARMA模型的R语言实现
- HFSS----微带天线设计实例之模型建立
- 加密 CryptoJS DES
- 虚拟机服务器坏处,服务器虚拟化技术的优缺点
- bootstrap EF_Bootstrap优秀模板INSPINIA.2.9.2
- 电气工程及其自动化用matlab,计算机仿真技术与CAD--基于MATLAB的电气工程(电气工程及其自动化专业精品教材普通高等教育十三...