web课程设计网页规划与设计—— 中西餐美食餐饮网站(10页面) html+css+javascript网页设计实例...

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制作了表单判断(提交时表单不能为空)

文章目录

web课程设计网页规划与设计—— 中西餐美食餐饮网站HTML(10页面) html+css+javascript网页设计实例
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品

二、代码目录

三、代码实现

<!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&copy; 2012 114源码网. All rights reserved </div></div></footer>
</div>  </body>
</html>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就支持下吧，

❉ 2. 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，

>>>戳我>>>点击进入200例期末大作业作品

200多例 HTML5期末考核大作业源码 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!