网页开发模板（web网站模板）

投稿用户 • • 资讯动态 • 阅读 46

潮汕美食网页设计由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;}

网页开发模板（web网站模板）

网页开发模板（web网站模板）

网页开发模板（web网站模板）

网页开发模板（web网站模板）

网页开发模板（web网站模板）

网页开发模板（web网站模板）

    
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 cloud@ksuyun.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.daxuejiayuan.com/10945.html
赞 (0)
投稿用户
0
上一篇 2022年5月21日 01:29:05
下一篇 2022年5月21日 01:29:05

相关推荐