美食软文300范例web前端大作业——毕设项目精品实战案例(1000套)
美食软文300范例web前端大作业——毕设项目精品实战案例(1000套)
【作者主页——获取更多优质源码】美食网页介绍、甜品蛋糕、地方美食小吃文化、餐饮文化、等网站的设计与制作。它的具体信息包括配料、产地及它的一些功能,使用户对该食品有着全面的认识。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】
文章目录
一、网站题目
美食网页介绍、甜品蛋糕、地方美食小吃文化、餐饮文化、等网站的设计与制作。
二、网站描述✍️
美食主题网站 主要对各种美食进行展示,让浏览者清晰地了解到各种美食的详细信息美食软文300范例,便于浏览者进行选择。该模块的左侧有个美食分类,用户可以选择自己喜欢的种类,当点击种类后,就会在右侧出现该分类下的各种美食,用户可以点击自己感兴趣的食品,从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能,使用户对该食品有着全面的认识。
三、网站介绍
网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面:计划采用最新的网页编程语言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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="keywords" content="速鲜站餐饮食品"><meta name="description" content="速鲜站餐饮食品"><title>速鲜站餐饮食品</title><link href="css/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/global.js"></script><script type="text/javascript" src="js/slide_show.js"></script></head><body><div id="wrapper"> <div id="top"> <div class="wrap"> <ul class="topNav"> <li><a onclick="SetHome(window.location)" href="#">设为首页</a></li> <li><s></s><a href="#">收藏本站</a></li> </ul> </div> </div> <div id="header"> <div class="wrap clearfix"> <ul class="logo"> <a href="index.html"><img src="picture/logo.png" alt="速鲜站餐饮食品" title="速鲜站餐饮食品"></a> </ul> <div id="mainNav"> <ul class="wrap"> <li><a href="index.html" class="first">首页</a></li> <li><a href="about.html">公司简介</a> <ul> <li><a href="#">品牌概念</a></li> <li><a href="#">品牌形象</a></li> <li><a href="#">品牌成长</a></li> <li><a href="#">品牌视频</a></li> <li><a href="#">品牌团队</a></li> </ul> </li> <li><a href="product.html">美食展示</a> <ul> <li><a href="#">现做鲜包</a></li> <li><a href="#">鲜榨原汁</a></li> <li><a href="#">五谷杂粮</a></li> <li><a href="#">其他系列</a></li> </ul> </li> <li><a href="photo.html">门店展示</a></li> <li><a href="join.html">加盟合作</a> <ul> <li><a href="#">加盟条件</a></li> <li><a href="#">加盟流程</a></li> <li><a href="#">加盟模式和支持</a></li> <li><a href="#">加盟费用</a></li> <li><a href="#">加盟热线</a></li> </ul> </li> <li><a href="photo.html">新闻资讯</a> <ul> <li><a href="#">公司动态</a></li> <li><a href="#">行业新闻</a></li> </ul> </li> <li class="cur hover"><a href="rczp.html">人才招聘</a> <ul> <li><a href="#">联系我们</a></li> </ul> </li> <div class="clear"> </div> </ul> </div> <div class="tel"> 加盟热线:0579-85057969 </div> </div> </div> <div class="slideShow"> <ul class="slides"> <li><a href="#" target="_blank" style="background-image:url(images/20130514acunau.jpg)"></a></li> </ul> </div> <script type="text/javascript">$(document).ready(function(){$(".slides").bxSlider({mode:"fade"})});</script> <div class="main_index"> <div class="wpb_row vc_row-fluid" style="background-color:#fcdb00"> <div class="vc_span12 wpb_column column_container"> <div class="wpb_wrapper"> <div class="wpb_row vc_row-fluid row_width960 index_icon_wrap"> <div class="vc_span3 wpb_column column_container pop"> <div class="wpb_single_image wpb_content_element zero_side wpb_animate_when_almost_visible wpb_top-to-bottom vc_align_center wpb_start_animation index_icon"> <div class="wpb_wrapper"> <a href="#"><img class="vc_box_border_grey" src="picture/index_icon_1.png" width="55" height="55" alt="1"></a> </div> </div> <div class="index_icon_enter"> <a href="#">速鲜美食<br>
<small>Products</small></a>
</div>
</div>
<div class="vc_span3 wpb_column column_container pop">
<div class="wpb_single_image wpb_content_element zero_side wpb_animate_when_almost_visible wpb_top-to-bottom vc_align_center wpb_start_animation index_icon">
<div class="wpb_wrapper">
<a href="#"><img class="vc_box_border_grey" src="picture/index_icon_2.png" width="55" height="55" alt="1"></a>
</div>
</div>
<div class="index_icon_enter">
<a href="#">公司简介<br>
<small>Company</small></a>
</div>
</div>
<div class="vc_span3 wpb_column column_container pop">
<div class="wpb_single_image wpb_content_element zero_side wpb_animate_when_almost_visible wpb_top-to-bottom vc_align_center wpb_start_animation index_icon">
<div class="wpb_wrapper">
<a href="#"><img class="vc_box_border_grey" src="picture/index_icon_3.png" width="55" height="55" alt="1"></a>
</div>
</div>
<div class="index_icon_enter">
<a href="#">加盟合作<br>
<small>Join</small></a>
</div>
</div>
<div class="vc_span3 wpb_column column_container pop">
<div class="wpb_single_image wpb_content_element zero_side wpb_animate_when_almost_visible wpb_top-to-bottom vc_align_center wpb_start_animation index_icon">
<div class="wpb_wrapper">
<a href="#"><img class="vc_box_border_grey" src="picture/index_icon_4.png" width="55" height="55" alt="1"></a>
</div>
</div>
<div class="index_icon_enter">
<a href="#">联系我们<br>
<small>Contact</small></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main_index" style="padding:25px 0">
<div class="wrap">
<div class="index_banner">
<img src="picture/index_banner.gif">
</div>
<div class="wpb_row vc_row-fluid index_picnews">
<div class="vc_span12 wpb_column column_container">
<div class="wpb_wrapper">
<div class="wpb_single_image wpb_content_element fix_margin_b15px wpb_left-to-right vc_align_center">
<div class="wpb_wrapper">
<a href="#"><img class="vc_box_border_grey" src="picture/xwt.jpg" width="405" height="245" alt="新闻图"></a>
</div>
</div>
<div class="index_post_list">
<h3>新闻动态<br>
News</h3>
<div class="post_list_in">
<ul>
<li><small>2016-05-26</small><a href="#" title="2016上海餐饮连锁加盟展">2016上海餐饮连锁加盟展</a></li>
<li><small>2013-06-26</small><a href="#" title="一个新手要如何着手来做好网站运营?">一个新手要如何着手来做好网站运营?</a></li>
<li><small>2013-06-26</small><a href="#" title="网络营销之该如何打造吸引性的软文营销">网络营销之该如何打造吸引性的软文营销</a></li>
<li><small>2013-06-26</small><a href="#" title="如何利用电子商务提升企业竞争力">如何利用电子商务提升企业竞争力</a></li>
</ul>
</div>
</div>
<a class="vc_btn vc_btn_orange vc_btn_xs vc_btn_square" href="#" title="" target="">MORE</a>
</div>
</div>
</div>
<div class="wpb_row vc_row-fluid index_picnews">
<div class="vc_span12 wpb_column column_container">
<div class="wpb_wrapper">
<div class="wpb_single_image wpb_content_element fix_margin_b15px wpb_left-to-right vc_align_center">
<div class="wpb_wrapper">
<a href="#"><img class="vc_box_border_grey" src="picture/syxp.jpg" width="405" height="245" alt="新闻图"></a>
</div>
</div>
<div class="index_post_list">
<h3>行业新闻<br>
News</h3>
<div class="post_list_in">
<ul>
<li><small>2016-06-13</small><a href="#" title="【干货】包子馒头用“碱”全攻略">【干货】包子馒头用“碱”全攻略</a></li>
<li><small>2016-05-26</small><a href="#" title="餐饮概念">餐饮概念</a></li>
<li><small>2016-05-26</small><a href="#" title="提高对食品企业违法行为处罚力度">提高对食品企业违法行为处罚力度</a></li>
<li><small>2016-05-26</small><a href="#" title="食品科技在酝酿什么大招?">食品科技在酝酿什么大招?</a></li>
<li><small>2013-06-26</small><a href="#" title="移动互联网发展下的企业网变革">移动互联网发展下的企业网变革</a></li>
</ul>
</div>
</div>
<a class="vc_btn vc_btn_orange vc_btn_xs vc_btn_square" href="#" title="" target="">MORE</a>
</div>
</div>
</div>
</div>
</div>
<div class="main_index" style="padding:50px 0;background:#f0f0f0">
<div class="wrap">
<div class="vioeh">
<embed src="flash/v.swf" allowfullscreen quality="high" width="550" height="386" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
</div>
<div class="index_about">
<a href="#" class="about_title">
<p>
品牌简介
</p>
</a>
<div class="about_entitle">
</div>
<div class="about_nr" style="font-size:14px;line-height:30px">
速鲜站餐饮服务管理有限公司成立与2013年, 本着“经营伙伴的幸福人生, 打造顾客<br>
的幸福体验” 的经营理念, 遵循着 “顾客至上, 员工第一” 的原则, 发扬着做事公平、 公正、公开; 做人身正、 言正、 心正的精神。<br>
2015年公司正式提出速鲜站3.0时代, 全面升级, 正式定义 “有心有料, 幸福味道 !” 通过我们的执着追求和努力, 如今已在义乌城区、 乡镇、 金华地区和乐清等地开展多家门店。<br>
速鲜站现诚邀天下有识之士, 共同分享餐饮业高速增长带来的巨大商机, 共同为打造国际标准的餐饮品牌而努力。
</div>
</div>
</div>
</div>
<div class="main_index" style="padding:50px 0">
<div class="wrap">
<div class="product_title">
<div class="product_titles">
美食展示<br>
<img src="picture/display.png">
</div>
</div>
<div class="wpb_row vc_row-fluid row_width960">
<div class="vc_span12 wpb_column column_container">
<div class="wpb_wrapper">
<div id="divRunerWrapper">
<div id="divRunerInner">
<div id="divRuner">
<ul>
<li><a href="#" title="无矾油条"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/227_thumb.jpg" alt="无矾油条" title="无矾油条"></span></a></li>
<li><a href="#" title="燕麦馒头"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/226_thumb.jpg" alt="燕麦馒头" title="燕麦馒头"></span></a></li>
<li><a href="#" title="中式热狗卷"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/225_thumb.jpg" alt="中式热狗卷" title="中式热狗卷"></span></a></li>
<li><a href="#" title="豆沙包"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/224_thumb.jpg" alt="豆沙包" title="豆沙包"></span></a></li>
<li><a href="#" title="田园菜包"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/223_thumb.jpg" alt="田园菜包" title="田园菜包"></span></a></li>
<li><a href="#" title="萧山萝卜干包"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/222_thumb.jpg" alt="萧山萝卜干包" title="萧山萝卜干包"></span></a></li>
<li><a href="#" title="小米南瓜粥"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/221_thumb.jpg" alt="小米南瓜粥" title="小米南瓜粥"></span></a></li>
<li><a href="#" title="仙居土猪肉包"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/220_thumb.jpg" alt="仙居土猪肉包" title="仙居土猪肉包"></span></a></li>
<li><a href="#" title="白粥"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/219_thumb.jpg" alt="白粥" title="白粥"></span></a></li>
<li><a href="#" title="冰橘柠檬"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/218_thumb.jpg" alt="冰橘柠檬" title="冰橘柠檬"></span></a></li>
<li><a href="#" title="红糖馒头"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/217_thumb.jpg" alt="红糖馒头" title="红糖馒头"></span></a></li>
<li><a href="#" title="蔬菜汤"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/216_thumb.jpg" alt="蔬菜汤" title="蔬菜汤"></span></a></li>
<li><a href="#" title="养生馒头"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/215_thumb.jpg" alt="养生馒头" title="养生馒头"></span></a></li>
<li><a href="#" title="五香茶叶蛋"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/214_thumb.jpg" alt="五香茶叶蛋" title="五香茶叶蛋"></span></a></li>
<li><a href="#" title="鲜榨玉米汁"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/213_thumb.jpg" alt="鲜榨玉米汁" title="鲜榨玉米汁"></span></a></li>
<li><a href="#" title="鲜榨玉米汁"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/212_thumb.jpg" alt="鲜榨玉米汁" title="鲜榨玉米汁"></span></a></li>
<li><a href="#" title="冰酸梅汁"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/211_thumb.jpg" alt="冰酸梅汁" title="冰酸梅汁"></span></a></li>
<li><a href="#" title="现榨东北大豆汁"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/210_thumb.jpg" alt="现榨东北大豆汁" title="现榨东北大豆汁"></span></a></li>
<li><a href="#" title="养颜黑芝麻汁"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/209_thumb.jpg" alt="养颜黑芝麻汁" title="养颜黑芝麻汁"></span></a></li>
<li><a href="#" title="银耳红枣羹"><span><img width="300" height="200" class="attachment-medium wp-post-image" src="picture/208_thumb.jpg" alt="银耳红枣羹" title="银耳红枣羹"></span></a></li>
</ul>
<div class="clearfix">
</div>
<a id="prev" class="prev" href="#"><span class="token entity named-entity" title="<</a><a id="next" class="next" href="#">">></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="main_index" style="padding:50px 0;background:#f0f0f0">
<div class="product_title">
<div class="product_titles" style="background:#f0f0f0">
店面形象<br>
<img src="picture/store.png">
</div>
</div>
<div class="wpb_row vc_row-fluid">
<div class="vc_span12 wpb_column column_container">
<div class="wpb_wrapper">
<div id="fullScreenRunner">
<div>
<a href="#"><img src="picture/20160525rgkfon.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525vsnoib.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525ovmfbl.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525sypccp.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525ondguo.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525nbmyyn.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525tjklxe.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525gblhdy.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525iylgzp.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525nwmysw.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525bjhqlh.jpg" alt="" width="250" height="179"><span></span></a>
</div>
<div>
<a href="#"><img src="picture/20160525tamkhk.jpg" alt="" width="250" height="179"><span></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<div class="wrap">
<div class="foot_top">
<div class="foot_logo">
<img src="picture/logo.png" alt="速鲜站餐饮食品" title="速鲜站餐饮食品">
</div>
<div class="foot_logo2">
</div>
</div>
<div class="footNav">
<ul>
<div class="foot_nav_tit">
<a href="#">关于我们</a>
</div>
<li><a href="#">品牌概念</a></li>
<li><a href="#">品牌成长</a></li>
<li><a href="#">品牌视频</a></li>
<li><a href="#">品牌形象</a></li>
</ul>
<ul>
<div class="foot_nav_tit">
<a href="#">产品展示</a>
</div>
<li><a href="#">现做鲜包</a></li>
<li><a href="#">鲜榨原汁</a></li>
<li><a href="#">五谷杂粮</a></li>
<li><a href="#">其他系列</a></li>
</ul>
<ul>
<div class="foot_nav_tit">
<a href="#">新闻动态</a>
</div>
<li><a href="#">公司动态</a></li>
<li><a href="#">行业新闻</a></li>
</ul>
<ul>
<div class="foot_nav_tit">
<a href="#">加盟合作</a>
</div>
<li><a href="#">加盟条件</a></li>
<li><a href="#">加盟流程</a></li>
<li><a href="#">加盟模式和支持</a></li>
<li><a href="#">费加盟用</a></li>
</ul>
<ul>
<div class="foot_nav_tit">
<a href="#">联系我们</a>
</div>
<li><a href="#">联系我们</a></li>
<li><a href="#">留言反馈</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
<div class="ewm">
<img src="picture/ewm.png">
</div>
</div>
<div class="copyRight">
© 速鲜站餐饮食品 2014 All Rights Reserved. <a href="#" target="_blank">Powered by Cbnic</a>
</div>
</div>
</div>
<div class="font_bottem">
<div class="wrap" style="width:990px">
<div class="font_bottem_left">
<a href="#"></a>
</div>
<div class="font_bottem_right">
0579-85057969
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.caroufredsel-6.2.1-packed.js"></script>
<script type="text/javascript" src="js/theme.extend.js"></script>
</html>
CSS样式代码
/*Template Name: defaultVersion: 1.0Author: DouCo DesignAuthor URI: http://www.cbnic.com/*//* 全局通用----------------------------------------------- */body { font-family: Microsoft Yahei, 5FAE8F6F96C59ED1, 5b8b4f53, Arial, Lucida, Verdana, Helvetica, sans-serif; color: #555; background-color: #fff;}body, button, input, textarea { font-size: 12px; line-height: 1.531; outline: none; margin: 0; padding: 0; border: 0;}p, ul, ol, dl, dt, dd, form, blockquote { margin: 0; padding: 0;}ul, ol { list-style: none;}h1, h2, h3, h4, h5, h6 { font-size: 12px; margin: 0; padding: 0;}em, b, i { font-style: normal; font-weight: normal;}img { border: 0;}a { text-decoration: none; color: #333333;}a:hover { text-decoration: none; color: #C70D0E;}input, img, select { vertical-align: middle;}.clear { clear: both; height: 0; line-height: 0; font-size: 0;}
八、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容美食软文300范例,请 “点赞” “✍️评论” “收藏” 一键三连哦!
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.以上内容技术相关问题欢迎一起交流学习