美食html网页代码模板：html5网页设计hbuilder潮汕美食网页设计成品模板
美食html网页代码模板：html5网页设计hbuilder潮汕美食网页设计成品模板<!doctype html> <html> <head> <meta charset="utf-8"> <link href="css/style.css" rel="stylesheet"> <script type="text/javascript" src="js/pptBox.js"></script> <title>潮汕美食</title> </head> <body> <div class="con"> <header> <div class="logo"> <img src=&
潮汕美食网页设计由6个页面组成，实现了图片轮播，视频播放，注册登录js验证。
详细页面效果在代码下面；
首页代码及css代码见下文：
首页代码html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/pptBox.js"></script>
<title>潮汕美食</title>
</head>
<body>
<div class="con">
<header>
<div class="logo"> <img src="images/head.png" width="1024" height="300"></div>
</header>
<div class="clear"></div>
<div id="caidan">
<ul>
<li><a href="index.html">首页</a></li>
<li id="one">
<a href="page1.html">潮汕美食</a>
<ul class="UL">
<li><a href="page2.html">牛肉火锅</a></li>
<li><a href="#">牛肉丸</a></li>
<li><a href="#">卤鹅</a></li>
</ul>
</li>
<li><a href="page3.html">寻味美食</a></li>
<li><a href="page4.html">注册</a></li>
<li><a href="page5.html">登陆</a></li><br>
</ul>
</div>
<div class="clear"></div>
<div class="main">
<h2>潮汕美食</h2>
<div class="fr p10"> <script>
var box =new PPTBox();
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>
<div class="clear"></div>
</div>
<div class="clear"></div>
<footer>
<p><strong> <p>版权所有 : 电信211 代圳翔 32107400050</p> </strong></p>
</footer>
<div class="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.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-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:10px auto;
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:10px auto; font-size:88px; text-align:center; font-family:楷体; color:#ae1c27; text-shadow:1px 1px #fff;}
#caidan{height: 70px;width: 1200px;margin: 0 auto;line-height: 70px;}
#one .UL{display:none;background:#F7F2F2;width:100%;position:absolute;left:0;top:70px;z-index:5;text-align:center; }
#one .UL li{height: 45px;line-height:45px;font-weight: normal;}
#one .UL li a{display:block; line-height:45px;color:#fff;height:45px;font-size: 12px;}
#one:hover .UL{display:block;}
#caidan ul{list-style: none;}
#caidan ul li{height:70px;width:150px;float:left; text-align:center;font-weight:bold;position: relative;}
#caidan ul li a:link{color: #21468c; font-size: 20px; text-decoration: none;}
#caidan ul li a:hover{ display: block;}
#caidan ul li a:visited{color: #21468c;font-size: 20px; text-decoration: none; }
.banner{ width:1010px; height:auto; margin:10px auto;}
.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:0 10px 10px 0px;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:10px auto; font-size:14px; line-height:24px; color:#555;}
.main h2{ font-size:22px; line-height:40px; margin:10px auto;color:#ae1c27;font-weight:normal; text-align:center; border-bottom:1px dotted #ae1c27; font-family:楷体;}
.main h3{ font-size:16px; line-height:32px;color:#ae1c27; text-align:left; }
.main p{ font-size:14px; line-height:26px;color:#666; text-align:left; text-indent:2em; }
.main p strong{ font-size:16px; line-height:32px;color:#ae1c27; text-align:left; }
.main_list{ width:960px; height:auto; margin:30px auto; }
.main_list li{ width:450px;height:320px; float:left; margin:15px; }
.main_list li p{ text-align: center;font-size: 24px;line-height: 50px }
.main_list li img{ width:450px; height:270px; }
.liuyan{width:520px;margin:auto;overflow:hidden;}
.liuyan h2{text-align:center;margin-top:20px;}
.liuyan p{line-height:40px;overflow:hidden;margin-top:20px;}
.liuyan p span{display:block;width:120px;height:40px;float:left;}
.liuyan p input{width:498px;height:38px;border:1px solid #000;float:left;}
.liuyan p textarea{width:498px;height:100px;border:1px solid #000;float:left;}
.liuyan .btn{display:block;width:100px;height:40px;float:right;margin-top:20px;}
/*----------------foot-----------------*/
footer{ width:1010px; height:auto; margin:10px auto; border-top:1px dotted #ccc; padding-top:10px; text-align:center; font-size:14px; line-height:35px; color:#666;}
