投稿
潮汕美食网页设计由6个页面组成，实现了图片轮播，视频播放，注册登录js验证。
详细页面效果在代码下面；
首页代码及css代码见下文：
首页代码html代码：
<!doctype html><html><head><metacharset="utf-8"><linkhref="css/style.css"rel="stylesheet"><scripttype="text/javascript"src="js/pptBox.js"></script><title>潮汕美食</title></head><body><divclass="con"><header><divclass="logo"><imgsrc="images/head.png"width="1024"height="300"></div></header><divclass="clear"></div><divid="caidan"><ul><li><ahref="index.html">首页</a></li><liid="one"><ahref="page1.html">潮汕美食</a><ulclass="UL"><li><ahref="page2.html">牛肉火锅</a></li><li><ahref="#">牛肉丸</a></li><li><ahref="#">卤鹅</a></li></ul></li><li><ahref="page3.html">寻味美食</a></li><li><ahref="page4.html">注册</a></li><li><ahref="page5.html">登陆</a></li><br></ul></div><divclass="clear"></div><divclass="main"><h2>潮汕美食</h2><divclass="fr p10"><script>varbox =newPPTBox(); box.width =550; //宽度box.height =350;//高度box.autoplayer = 3;//自动播放间隔时间//box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})box.add({"url":"images/banner_1.png","href":"#","title":"1"}) box.add({"url":"images/banner_2.png","href":"#","title":"2"}) box.add({"url":"images/banner_3.png","href":"#","title":"3"}) box.show(); </script></div><p>潮菜是中国四大菜系之粤菜主干 [1] ，潮汕菜一贯是广东菜的代表 [2] ，为广东菜三大流派之一，发源于潮汕平原，历经千余年而形成和发展，以其独特风味自成一体。 </p><p><strong>历史发展 </strong></p><p>在潮汕本土，由于19世纪 60年代汕头开埠，各国在汕头开办洋行，商业的发展，商埠的形成，流动人口的增多，相应的饮食业也就随之而有较大的发展，出现了专业厨师。所谓“舟车云集，商旅辐辏”，消费能力很快攀升。当时汕头埠有永平、陶芳、擎天、中央等30多家著名酒楼，还有四五十家饭店酒馆。其中，也有外地经营者开设的酒家，这样，各著名酒家在交流、融会、竞争中竞相推出名牌菜、特色菜和改善环境设施。当时流行有“陶芳好鱼翅，中央好空气，永平好布置”等口头语。在这个时期，潮菜悄然地走出潮汕。在国内各大城市和港澳地区、东南亚各国，差不多都有潮菜的菜馆酒家出现，形成了一定的影响力，这是潮菜第一个飞跃发展时期。</p>，<p>进入20世纪80年代，随着改革开放，潮菜的发展拥有了得天独厚的社会环境。一是有更多机会与粤港饮食文化相互交流与融合渗透，发展创新。一是内外贸易的蓬勃发展，港澳台同胞和海外华侨往来频繁，投资设厂，发展贸易，社会整体生活水平大幅度提高，消费人群激增。因而潮菜美食，发展迅速，呈现一派欣欣向荣景象。 </p><p>这个时期，潮菜以其不断创新又能保持传统特色，不仅在本地区百花竞放、争奇斗艳，而且走俏神州大地，乃至世界各国。潮州美食以其儒雅高档，精工烹制，原汁原味，清淡可口，突出海鲜等美味特色，迅速崛起，独领风骚，引人瞩目，成为海内外颇负盛名的美食菜系。这是潮菜最主要的一个发展高峰，也是第二个飞跃发展时期，这个时期的潮州美食，具有风靡海内外的巨大影响力。</p><divclass="clear"></div></div><divclass="clear"></div><footer><p><strong><p>版权所有 : 电信211 代圳翔 32107400050</p></strong></p></footer><divclass="clear"></div></div></body></html>
首页css代码：
*{ margin:0; padding:0; font-family:Microsoft YaHei;} .clear{ clear:both;} .fl{ float:left;} .fr{ float:right;} img{ border:none;} a{ text-decoration:none;} a:hover{ text-decoration:underline;} li{ list-style-type:none;} .center{ text-align:center;} .p10{ padding:10px;} .p20{ padding:20px;} img{-moz-border-radius:15px;border-radius:15px; } .img2{transition: All 0.4sease-in-out; -webkit-transition: All 0.4sease-in-out; -moz-transition: All 0.4sease-in-out; -o-transition: All 0.4sease-in-out; } .img2:hover{transform: scale(1.1); -webkit-transform: scale(1.1);-moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } body{ background:url(../images/bj.jpg) top center fixed repeat; background-size: 100%100%; } /*----------------------con-------------------------*/.con{ width:1024px; height:auto; margin:10pxauto; background:#fff; background-color:rgba(242,236,222,0.91);-moz-border-radius:5px;border-radius:5px; } /*----------------head-----------------*/header{ width:1024px; height:auto; margin:auto;-moz-border-radius:15px;border-radius:15px;} .logo{ width:1010px; height:auto; margin:10pxauto; font-size:88px; text-align:center; font-family:楷体; color:#ae1c27; text-shadow:1px1px#fff;} #caidan{height: 70px;width: 1200px;margin: 0auto;line-height: 70px;} #one.UL{display:none;background:#F7F2F2;width:100%;position:absolute;left:0;top:70px;z-index:5;text-align:center; } #one.ULli{height: 45px;line-height:45px;font-weight: normal;} #one.ULlia{display:block; line-height:45px;color:#fff;height:45px;font-size: 12px;} #one:hover.UL{display:block;} #caidanul{list-style: none;} #caidanulli{height:70px;width:150px;float:left; text-align:center;font-weight:bold;position: relative;} #caidanullia:link{color: #21468c; font-size: 20px; text-decoration: none;} #caidanullia:hover{ display: block;} #caidanullia:visited{color: #21468c;font-size: 20px; text-decoration: none; } .banner{ width:1010px; height:auto; margin:10pxauto;} .mainbox{ overflow:hidden; position:relative;} .flashbox{ overflow:hidden; position:relative;} .imagebox{ text-align:right;position:relative;} .bitdiv{display:inline-block;width:12px;height:12px;margin:010px10px0px;cursor:pointer;float:right;} .defimg{background-image:url(../images/02.png)} .curimg{background-image:url(../images/01.png)} /*----------------main-----------------*/.main{ width:1000px; height:auto; margin:10pxauto; font-size:14px; line-height:24px; color:#555;} .mainh2{ font-size:22px; line-height:40px; margin:10pxauto;color:#ae1c27;font-weight:normal; text-align:center; border-bottom:1pxdotted #ae1c27; font-family:楷体;} .mainh3{ font-size:16px; line-height:32px;color:#ae1c27; text-align:left; } .mainp{ font-size:14px; line-height:26px;color:#666; text-align:left; text-indent:2em; } .mainpstrong{ font-size:16px; line-height:32px;color:#ae1c27; text-align:left; } .main_list{ width:960px; height:auto; margin:30pxauto; } .main_listli{ width:450px;height:320px; float:left; margin:15px; } .main_listlip{ text-align: center;font-size: 24px;line-height: 50px} .main_listliimg{ width:450px; height:270px; } .liuyan{width:520px;margin:auto;overflow:hidden;} .liuyanh2{text-align:center;margin-top:20px;} .liuyanp{line-height:40px;overflow:hidden;margin-top:20px;} .liuyanpspan{display:block;width:120px;height:40px;float:left;} .liuyanpinput{width:498px;height:38px;border:1pxsolid #000;float:left;} .liuyanptextarea{width:498px;height:100px;border:1pxsolid #000;float:left;} .liuyan.btn{display:block;width:100px;height:40px;float:right;margin-top:20px;} /*----------------foot-----------------*/footer{ width:1010px; height:auto; margin:10pxauto; border-top:1pxdotted #ccc; padding-top:10px; text-align:center; font-size:14px; line-height:35px; color:#666;}
微信扫一扫打赏
支付宝扫一扫打赏
