web课程设计网页规划与设计—— 中西餐美食餐饮网站HTML(10页面) html+css+javascript网页设计实例
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）
文章目录
一、作品演示
二、代码目录
三、代码实现
<!doctype html>
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8" />
<link rel="shortcut icon" href="http://www.xiaopangniu.net/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<title>114源码网-www.unn114.com</title>
<link type="text/css" rel="stylesheet" href="css/1.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/2.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/3.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/4.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/5.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/6.css" media="all" />
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/2.js"></script>
<script type="text/javascript" src="js/3.js"></script>
<script type="text/javascript" src="js/drupal.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.once.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/colorbox.js"></script>
<script type="text/javascript" src="js/colorbox_default_style.js"></script>
<script type="text/javascript" src="js/colorbox_load.js"></script>
<script type="text/javascript" src="js/colorbox_inline.js"></script>
<script type="text/javascript" src="js/panels.js"></script>
<script type="text/javascript" src="js/modernizr-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="html front not-logged-in no-sidebars page-front-page home has-slider" >
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
</div>
<div id="wrapper">
<!-- LOGIN POP UPS -->
<div id="popup-overlay"></div>
<div class="wrapper">
<header>
<div class="top-nav">
<nav>
<ul class="menu"><li class="first leaf"><a href="/user/login" title="">注册</a></li>
<li class="leaf"><a href="/user/register" title="">登录</a></li>
<li class="leaf"><a href="/about" title="">今日优惠</a></li>
<li class="leaf"><a href="/blog" title="">全部菜单</a></li>
<li class="leaf"><a href="/contact" title="">订餐须知</a></li>
<li class="last leaf"><a href="/menu-card" title="">联系我们</a></li>
</ul> </nav>
<div class="search-form">
<form action="/" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline">
<h2 class="element-invisible">Search form</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<label class="element-invisible" for="edit-search-block-form--2">Search </label>
<input title="Enter the terms you wish to search for." type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="15" maxlength="128" class="form-text" />
</div>
<div class="form-actions form-wrapper" id="edit-actions--8"><input type="submit" id="edit-submit--2" name="op" value="Search" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-C4H_q0QnGnVs6uK2gMyV7aCXp1CTYz_oDfxQ1El91LM" />
<input type="hidden" name="form_id" value="search_block_form" />
</div>
</div></form> </div>
</div>
<a class="logo" href="/" title="Home" rel="home" id="logo">
<img src="http://cooker.envato.tabvn.com/sites/all/themes/cooker/logo.png" alt="Home" />
</a>
<nav class="main-menu">
<ul class="menu"><li class="first leaf"><a href="/catelog/fruits-and-vegetables" title="">中餐</a></li>
<li class="leaf"><a href="/catelog/seafood" title="">西餐</a></li>
<li class="leaf"><a href="/catelog/meat" title="">点心</a></li>
<li class="leaf"><a href="/catelog/entrees" title="">饮品</a></li>
<li class="leaf"><a href="/catelog/pizza-and-pasta" title="">套餐</a></li>
<li class="last leaf"><a href="/catelog/desserts" title="">工作餐</a></li>
</ul> </nav>
<div class="header-slider-canvas">
<div class="parts part-1"></div>
<div class="parts part-2"></div>
<div class="parts part-3"></div>
</div><ul id="mycarousel" class="jcarousel-skin-header-slider"><li><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/up_0.jpg" alt="Slide #3" title="Slide #3" /><div class="description"><span class="price">$16.45</span><span class="name">美味开心水果披萨</span><a href="/product/convallis-sit-amet-tellus" class="shop">去买</a></div></li><li><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/toystory_0.jpg" alt="slide #2" title="slide #2" /><div class="description"><span class="price">$12.45</span><span class="name">小胖妞模板网</span><a href="/product/mauris-nisl-dolor" class="shop">去看看</a></div></li><li><a href="http://tabvn.com"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/meal-14_0.jpg" alt="Slider #1" title="Slider #1" /></a></li></ul> </header>
<div class="content clearfix">
<div id="content" class="column content-inner">
<div class="section">
<a id="main-content"></a>
<div class="tabs"></div> <div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<div class="panel-flexible panels-flexible-1 clearfix" >
<div class="panel-flexible-inside panels-flexible-1-inside">
<div class="panels-flexible-region panels-flexible-region-1-center panels-flexible-region-first panels-flexible-region-last">
<div class="inside panels-flexible-region-inside panels-flexible-region-1-center-inside panels-flexible-region-inside-first panels-flexible-region-inside-last">
<div class="panel-pane pane-block pane-custom-meals-of-the-day" >
<div class="pane-content">
<div id="meals-of-the-day">
<h3 class="title-separator"><span class="title">今日推荐</span><span class="sep"></span></h3>
<ul>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/meals_of_the_day/public/meal-3_0.png" width="327" height="198" alt="" /></div>
<div class="desc-holder">
<h1><a href="/product/phasellus-ante-erat">油炸蟹黄炒菇片</a></h1>
<p>取上等爱尔兰进口牛肉，先用铁板煎至七成熟。独家秘制浓汤酱汁，包裹牛肉，让酱汁稍渗入牛肉，美味爽口。更配上自制土豆空心点。</p>
<span class="price">$8.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-4" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form-KIhtRDyuNExUxrjSf8TySx5O4oS84Z0IONgr3aLGJOw" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_4" />
<div class="form-actions form-wrapper" id="edit-actions"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-4" name="op" value="Add to cart" /></div></div></form></div>
</div>
</li>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/meals_of_the_day/public/meal-1.png" width="327" height="198" alt="" /></div>
<div class="desc-holder">
<h1><a href="/product/convallis-sit-amet-tellus">东北大肘子淮阳新做法</a></h1>
<p>东北大肘子淮阳新做法。选用上等大肘子，先用文火蒸4个小时，等肉烂而不碎、皮透而不黏时，浇上新熬香汁，更入味香浓</p>
<span class="price">$16.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-3" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form-V4u4tNIQYE36FzvhMyJxxbcNcpLgR0jbNDJDwEx5jYw" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_3" />
<div class="form-actions form-wrapper" id="edit-actions--2"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-3" name="op" value="Add to cart" /></div></div></form></div>
</div>
</li>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/meals_of_the_day/public/meal-2.png" width="327" height="198" alt="" /></div>
<div class="desc-holder">
<h1><a href="/product/mauris-nisl-dolor">油炸蟹黄炒菇片</a></h1>
<p>Yxcms厨房特别推出油炸蟹黄炒菇片。蟹黄的醇香、菇片的脆生爽口，配以西兰花点缀。正是秋日工作繁忙之余的清补好菜</p>
<span class="price">$12.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-2" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form-JowV9hEdTjeSNY8tmEvQKWEkz4pA3PYSDEzdyBzjBNc" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_2" />
<div class="form-actions form-wrapper" id="edit-actions--3"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-2" name="op" value="Add to cart" /></div></div></form></div>
</div>
</li>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/meals_of_the_day/public/meal-3.png" width="327" height="198" alt="" /></div>
<div class="desc-holder">
<h1><a href="/product/fried-potatoes">Fried potatoes</a></h1>
<p>Vestibulum ut leo erat. Integer ac est at enim suscipit vulputate. Phasellus ante erat, euismod et posuere ut, convallis</p>
<span class="price">$15.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-1" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form-Sn7q9NE2tc23hyNSaWM_ZETtzioblZKNBR7V-ZyIp_o" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_1" />
<div class="form-actions form-wrapper" id="edit-actions--4"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-1" name="op" value="Add to cart" /></div></div></form></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-separator"></div><div class="panel-pane pane-block pane-custom-featured-meals" >
<div class="pane-content">
<h3 class="title-separator"><span class="title">推荐套餐 </span><span class="sep"></span></h3>
<div id="featured-meals">
<ul>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/featured_meals/public/walle.jpg" width="191" height="148" alt="" /></div>
<h1><a href="/product/phasellus-ante-erat">油炸蟹黄炒菇片</a></h1>
<p>取上等爱尔兰进口牛肉，先用铁板煎至七成熟。独家秘制浓汤酱汁，包裹牛肉，让酱汁稍渗入牛肉，美味爽口。更配上自制土豆空心点。</p>
<span class="price">$8.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-4--2" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form---niTb3hToK3h3UDDW-OcFnVf0e8l7h8G6kkHtls1Uk" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_4" />
<div class="form-actions form-wrapper" id="edit-actions--5"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-4" name="op" value="Add to cart" /></div></div></form></div> </li>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/featured_meals/public/up.jpg" width="191" height="148" alt="" /></div>
<h1><a href="/product/convallis-sit-amet-tellus">油炸蟹黄炒菇片</a></h1>
<p>取上等爱尔兰进口牛肉，先用铁板煎至七成熟。独家秘制浓汤酱汁，包裹牛肉，让酱汁稍渗入牛肉，美味爽口。更配上自制土豆空心点。</p>
<span class="price">$16.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-3--2" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form-60jLRZa92c9cN2MJGs2-014fZwjDhYnBz1ja4qo1IN8" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_3" />
<div class="form-actions form-wrapper" id="edit-actions--6"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-3" name="op" value="Add to cart" /></div></div></form></div> </li>
<li class="meal">
<div class="img-holder"><img typeof="foaf:Image" src="http://cooker.envato.tabvn.com/sites/default/files/styles/featured_meals/public/toystory.jpg" width="191" height="148" alt="" /></div>
<h1><a href="/product/mauris-nisl-dolor">油炸蟹黄炒菇片</a></h1>
<p>取上等爱尔兰进口牛肉，先用铁板煎至七成熟。独家秘制浓汤酱汁，包裹牛肉，让酱汁稍渗入牛肉，美味爽口。更配上自制土豆空心点。</p>
<span class="price">$12.45</span>
<div class="add-to-cart"><form action="/" method="post" id="uc-product-add-to-cart-form-2--2" accept-charset="UTF-8"><div><input type="hidden" name="qty" value="1" />
<input type="hidden" name="form_build_id" value="form-BOoGI5_1zJu46bMB-LXaf5u95HesOhQ6gMCatFW9uow" />
<input type="hidden" name="form_id" value="uc_product_add_to_cart_form_2" />
<div class="form-actions form-wrapper" id="edit-actions--7"><input class="node-add-to-cart form-submit" type="submit" id="edit-submit-2" name="op" value="Add to cart" /></div></div></form></div> </li>
</ul>
</div> </div>
</div>
<div class="panel-separator"></div><div class="panel-pane pane-block pane-custom-custom-cart" >
<h2 class="pane-title">最新优惠</h2>
<div class="pane-content">
<p class="cart-block-items uc-cart-empty">【解乏必备】太极八宝粥</p><div class="cart-box"><div class="body"><ul>
<li class="info">
<span class="products"><strong><span class="num-items">0</span> Items</strong></span>
<a href="/cart">View cart</a>
</li>
<li class="price">
<span class="label">加入会员更享受9折优惠哦</span>
</li>
</ul><a class="submit-button" href="/cart/checkout">去看看</a>
<div class="graphic"></div></div></div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div> <!-- /.section, /#content -->
</div>
</div>
<footer>
<div class="footer-holder">
<a href="/" class="logo">Footer Logo</a>
<div id="footer-columns" class="clearfix">
<div class="region region-footer-firstcolumn">
<div id="block-simplenews-7" class="block block-simplenews">
<h2>新菜订阅</h2>
<div class="content">
<div class="newsletter">
<div class="simplenews-block-content">
<p>只要留下你的邮箱地址，您就可以收到我们新菜的订阅邮件！</p>
<form class="simplenews-subscribe" action="/" method="post" id="simplenews-block-form-7" accept-charset="UTF-8"><div><div class="form-item form-type-textfield form-item-mail">
<label for="edit-mail">E-mail <span class="form-required" title="This field is required.">*</span></label>
<input type="text" id="edit-mail" name="mail" value="" size="20" maxlength="128" class="form-text required" />
</div>
<input type="submit" id="edit-submit" name="op" value="Subscribe" class="form-submit" /><input type="hidden" name="form_build_id" value="form-p-JQE4lzDl3TVwV2AoBMhqhxR2lUEGaiwyh2ed7DxK8" />
<input type="hidden" name="form_id" value="simplenews_block_form_7" />
</div></form>
</div>
</div>
</div>
</div>
</div>
<div class="region region-footer-secondcolumn">
<div id="block-views-categories-block" class="block block-views">
<h2>菜单分类</h2>
<div class="content">
<div class="view view-categories view-id-categories view-display-id-block view-dom-id-18aa533ab603f49fd0d748a677e4a5d0">
<div class="view-content">
<div class="item-list"> <ul> <li class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-name"> <span class="field-content"><a href="/catelog/fruits-and-vegetables">Fruits and vegetables</a></span> </div></li>
<li class="views-row views-row-2 views-row-even">
<div class="views-field views-field-name"> <span class="field-content"><a href="/catelog/seafood">Seafood</a></span> </div></li>
<li class="views-row views-row-3 views-row-odd">
<div class="views-field views-field-name"> <span class="field-content"><a href="/catelog/meat">Meat</a></span> </div></li>
<li class="views-row views-row-4 views-row-even">
<div class="views-field views-field-name"> <span class="field-content"><a href="/catelog/entrees">Entrees</a></span> </div></li>
<li class="views-row views-row-5 views-row-odd">
<div class="views-field views-field-name"> <span class="field-content"><a href="/catelog/pizza-and-pasta">Pizza and pasta</a></span> </div></li>
<li class="views-row views-row-6 views-row-even views-row-last">
<div class="views-field views-field-name"> <span class="field-content"><a href="/catelog/desserts">Desserts</a></span> </div></li>
</ul></div> </div>
</div> </div>
</div>
</div>
<div class="region region-footer-thirdcolumn">
<div id="block-block-1" class="block block-block">
<h2>Useful Links</h2>
<div class="content">
<div class="item-list">
<ul><li><a href="#">友情链接</a></li>
<li><a href="http://www.unn114.com">114源码网</a></li>
<li><a href="http://www.adminbuy.cn">站长买卖</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul></div> </div>
</div>
</div>
<div class="region region-footer-fourthcolumn">
<div id="block-block-2" class="block block-block">
<h2>关注我们</h2>
<div class="content">
<div class="item-list">
<ul class="social-links"><li class="facebook"><a href="#">Facebook</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="rss"><a href="#">Rss feed</a></li>
</ul></div> </div>
</div>
</div>
</div> <!-- /#footer-columns -->
<div class="credits clearfix">
Copyright © 2012 114源码网. All rights reserved
</div>
</div>
</footer>
</div> </body>
</html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可wx公Z号 ---> web前端小日记 获取更多源码 !
六、更多HTML期末大作业(成品下载)
>>>戳我>>>点击进入200例期末大作业作品
200多例 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
