写了一个吗，美食的页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中华美食</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript/jquery.js"></script>
<script type="text/javascript" src="Javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Javascript/Carousel.js"></script>
</head>
<body>
<div class="xian"></div>
<div class="top">
<div>
<ul class="nav">
<li style="color:#d7000f">首页</li>
<li class="dw"><a style="background:none;padding-right:0;" href="about.html">中华美食简介</a></li>
<li class="dw">
<a href="picture.html">特色美食</a>
<ul class="in_menu">
<li><a href="lu.html">鲁菜</a></li>
<li><a href="chuan.html">川菜</a></li>
<li><a href="yue.html">粤菜</a></li>
<li><a href="min.html">闽菜</a></li>
<li><a href="su.html">苏菜</a></li>
<li><a href="xiang.html">湘菜</a></li>
</ul>
</li>
<li class="dw">
<a href="pro_del.html">菜单</a>
</li>
<div class="clearfix"></div>
</ul>
<div class="clearfix"></div>
</div>
</div>
<!--导航条-->
<div class="banner">
<img src="images/s3.jpg">
<img src="images/s1.jpg">
<img src="images/s2.jpg">
<div class="clearfix"></div>
<ul>
<li id="red"></li>
<li></li>
<li></li>
</ul>
<div class="zuo"></div>
<div class="you"></div>
<div class="clearfix"></div>
</div>
<!--轮播图-->
<div class="about">
<div class="title_1"><div class="kk"><h1>中华美食</h1></div></div>
<div class="txt">在中国传统文化教育中的阴阳五行哲学思想、道家理学观念，儒家伦理道德观念，还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下，创造出彪炳史册的中国烹饪技艺，形成博大精深的中国饮食文化。中国传统美食典故，“民以食为天”，随着回归自然食品的兴起，传统美食越来越受到人们的青睐。其实，这些食物的由来都有它美妙的传说。历史典故 “民以食为天”，随着回归自然食品的兴起，传统美食越来越受到人们的青睐。</div>
<div class="image">
<img src="images/about_1.png">
<a href="about.html"><img src="images/more.png"></a>
</div>
<div class="clearfix"></div>
</div>
<div class="food">
<div class="title_1"><div class="kk"><h1>特色美食</h1></div></div>
<div class="contont">
<div class="pro">
<a href="pro_del.html">
<img src="images/f_1.png">
<div class="black"></div>
<div class="des">酸汤鱼</div>
</a>
<a href="pro_del.html">
<img src="images/f_2.png">
<div class="black"></div>
<div class="des">尖椒肉丝</div>
</a>
<a href="pro_del.html">
<img src="images/f_3.png">
<div class="black"></div>
<div class="des">炝炒牛肉</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_4.png">
<div class="black"></div>
<div class="des">糯米丸子</div>
</a>
<div class="clearfix"></div>
<a href="pro_del.html">
<img src="images/f_5.png">
<div class="black"></div>
<div class="des">牛油火锅</div>
</a>
<a href="pro_del.html">
<img src="images/5-1_26.gif">
<div class="black"></div>
<div class="des">绿茶酥</div>
</a>
<a href="pro_del.html">
<img src="images/f_7.png">
<div class="black"></div>
<div class="des">特色糕点</div>
</a>
<a class="no_margin" href="#">
<img src="images/f_8.png">
<div class="black"></div>
<div class="des">特色小炒</div>
</a>
<div class="clearfix"></div>
</div>
<div class="pro">
<a href="pro_del.html">
<img src="images/f_5.png">
<div class="black"></div>
<div class="des">酸汤鱼1</div>
</a>
<a href="pro_del.html">
<img src="images/f_2.png">
<div class="black"></div>
<div class="des">尖椒肉丝</div>
</a>
<a href="pro_del.html">
<img src="images/f_4.png">
<div class="black"></div>
<div class="des">炝炒牛肉</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_3.png">
<div class="black"></div>
<div class="des">糯米丸子</div>
</a>
<div class="clearfix"></div>
<a href="pro_del.html">
<img src="images/f_1.png">
<div class="black"></div>
<div class="des">牛油火锅</div>
</a>
<a href="pro_del.html">
<img src="images/5-1_26.gif">
<div class="black"></div>
<div class="des">绿茶酥</div>
</a>
<a href="pro_del.html">
<img src="images/f_7.png">
<div class="black"></div>
<div class="des">特色糕点</div>
</a>
<a class="no_margin" href="pro_del.html">
<img src="images/f_8.png">
<div class="black"></div>
<div class="des">特色小炒</div>
</a>
<div class="clearfix"></div>
</div>
<a href="picture.html" class="more">查看更多</a>
</div>
</div>
<div class="news">
<div class="title_1"><div class="kk"><h1>分类</h1></div></div>
<div class="news_contont">
<div class="box1" >
<a href="chuan.html"><img src="images/n_1.png"></a>
<div class="xinwen">
<span>川菜</span>
<a href="chuan.html">川菜有什么特点？</a>
<div class="small_font">川菜的特点是麻、辣、鲜、香。川菜以浓郁的地方风味闻名，菜式调味多变，形式多样，醇香浓郁，主要以麻辣调味著称，代表菜品有水煮肉片、夫妻肺片、麻婆豆腐、口水鸡、火锅、麻辣烫等。</div>
</div>
<div class="clearfix"></div>
</div>
<div class="box2" >
<a href="lu.html"><img src="images/n_2.png"></a>
<div class="xinwen">
<span>鲁菜</span>
<a href="lu.html">鲁菜有什么特点？</a>
<div class="small_font">咸鲜为主、精于制汤、善烹海味、火候精湛、注重礼仪。鲁菜是中国传统八大菜系之一，起源于山东省淄博市。是历史最悠久、技法最丰富、难度最高、最见功力的菜系之一。</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="box1" >
<a href="yue.html"><img src="images/n_3.png"></a>
<div class="xinwen">
<span>粤菜</span>
<a href="yue.html">粤菜有什么特点？</a>
<div class="small_font">讲究鲜、嫩、爽、滑、淡、脆，夏秋力求清淡，冬季略偏浓醇，调味有五滋（香、松、臭、肥、浓）六味（酸、甜、苦、咸、辣、鲜）之别。</div>
</div>
<div class="clearfix"></div>
</div>
<div class="box2" >
<a href="min.html"><img src="images/n_4.png"></a>
<div class="xinwen">
<span>闽菜</span>
<a href="min.html">闽菜有什么特点？</a>
<div class="small_font">调味独特,自成一格。闽菜的调味略偏于清甜、淡雅,强调菜品原料的原汁原味,这也是区别于其他菜系的标志之一。</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="box1" >
<a href="su.html"><img src="images/n_5.png"></a>
<div class="xinwen">
<span>苏菜</span>
<a href="su.html">苏菜有什么特点？</a>
<div class="small_font">有用料广泛，以江河湖海水鲜为主，注重火候，擅长烛、烟、熄、糯。追求本味，清鲜本和，咸甜醇正。菜品风格雅丽，形质兼美，酥烂脱骨而不失其形，滑嫩爽脆而益显其味。</div>
</div>
<div class="clearfix"></div>
</div>
<div class="box2" >
<a href="xiang.html"><img src="images/n_6.png"></a>
<div class="xinwen">
<span>湘菜</span>
<a href="xiang.html">湘菜有什么特点？</a>
<div class="small_font">是刀工精妙,形味兼美。 湘菜的基本刀法有十六种之多,具体运用,演化参合,使菜肴千姿百态变化无穷。</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="scenery">
<div class="title_1"><div class="kk"><h1>美食</h1></div></div>
<div class="poster-main" id="carousel" data-setting='{
"width":1000,
"height":350,
"posterWidth":370,
"posterHeight":350,
"scale":0.8,
"speed":1000,
"autoPlay":true,
"delay":3000,
"verticalAlign":"middle"
}'>
<div class="prev"></div>
<ul class="s_box">
<li class="poster-item">
<a href="">
<img src="images/s_1.png">
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_2.png">
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_3.png">
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_4.png">
</a>
</li>
<li class="poster-item">
<a href="">
<img src="images/s_5.png">
</a>
</li>
</ul>
<div class="next"></div>
</div>
</div>
<div class="footer">
<div class="copy"></br>
<a >版本：</a> <a>卢静文</a>|计算机网络技术 |2103130229<br/>
</div>
</div>
<script type="text/javascript">
$(".in_menu_1").hide();
$(".in_menu li").mouseenter(
function(){
$(this).children(".in_menu_1").show();
}
)
$(".in_menu li").mouseleave(
function(){
$(this).children(".in_menu_1").hide();
}
)
/*轮播图的设置*/
n = 0;
$(".banner img").hide().eq(0).show();/*设置轮播图的第一张总是显示，其他图片隐藏*/
/*设置轮播图定时切换*/
setInterval(
function(){
if(n < $(".banner img").length - 1){
n = n + 1;
}
else{
n = 0;
}
$(".banner img").hide().eq(n).show();
$(".banner li").eq(n).css("background-color","#d7000f");
$(".banner li").eq(n).siblings(".banner li").css("background-color","#333");
},5000
)
$(".you").click(
function(){
if(n < $(".banner img").length-1){
n = n + 1;
}
else{
n = 0;
}
$(".banner img").hide().eq(n).show();
$(".banner li").eq(n).css("background-color","#d7000f");
$(".banner li").eq(n).siblings(".banner li").css("background-color","#333");
}
)
$(".zuo").click(
function(){
if(n > 0){
n = n - 1;
}
else{
n = $(".banner img").length-1;
}
$(".banner img").hide().eq(n).show();
$(".banner li").eq(n).css("background-color","#d7000f");
$(".banner li").eq(n).siblings(".banner li").css("background-color","#333");
}
)
$(".zuo").mouseenter(
function(){
$(this).css("background-image","url(images/left_2.png)");
}
)
$(".you").mouseenter(
function(){
$(this).css("background-image","url(images/right.png)");
}
)
$(".zuo").mouseleave(
function(){
$(this).css("background-image","url(images/left.png)");
}
)
$(".you").mouseleave(
function(){
$(this).css("background-image","url(images/right_2.png)");
}
)
$(".banner li").click(
function(){
$(".banner img").eq($(this).index()).show()
$(".banner img").eq($(this).index()).siblings("img").hide()
$(".banner li").eq($(this).index()).css("background-color","#d7000f");
$(".banner li").eq($(this).index()).siblings(".banner li").css("background-color","#333");
}
)
$(".pro").hide().eq(0).show()
$(".contont li").click(
function(){
$(".pro").eq($(this).index()).show();
$(".pro").eq($(this).index()).siblings(".pro").hide();
$(".contont li").eq($(this).index()).css({"background-color":"#d7000f","color":"#fff"});
$(".contont li").eq($(this).index()).siblings(".contont li").css({"background-color":"#fff","color":"#333"});
}
)
$(".pro a").mouseenter(
function(){
$(this).children(".black").hide();
$(this).siblings().children(".black").show();
$(this).children(".des").addClass("red");
$(this).siblings().children(".des").removeClass("red");
})
$(".pro a").mouseleave(
function(){
$(this).children(".black").show();
$(this).children(".des").removeClass("red");
}
)
$(".box1,.box2").mouseenter(
function(){
$(this).addClass("shadow");
$(this).find("a").css("color","#d7000f");
}
)
$(".box1,.box2").mouseleave(
function(){
$(this).removeClass("shadow");
$(this).find("a").css("color","#333");
}
)
function link(){
window.location.href="news_details.html";
}
$(function () {
var datas = [
{'z-index': 6, 'font-size':16, opacity: 1, width: 370, height: 350, top: 0, left: 0 },
{'z-index': 4, 'font-size':14, opacity: 0.9, width: 307, height: 290, top: 30, left: -170},
{'z-index': 3, 'font-size':12, opacity: 0.8, width: 243, height: 230, top: 60, left: -310},
{'z-index': 3, 'font-size':12, opacity: 0.8, width: 243, height: 230, top: 60, left: 437 },
{'z-index': 4, 'font-size':14, opacity: 0.9, width: 307, height: 290, top: 30, left: 233 },
]
move();
function move() {
for (var i = 0; i < datas.length; i++) {
var data = datas[i];
$('#s_box li').eq(i).css({'z-index':data['z-index'],'font-size':data['font-size']});
$('#s_box li').eq(i).stop().animate(data, 1200);
}
}
$('.prev').on('click', function () {
var last = datas.pop();
datas.unshift(last);
move();
})
function nextYewu(){
var first = datas.shift();
datas.push(first);
move();
}
$('.next').on('click', nextYewu);
var timer = setInterval(function(){
nextYewu();
},5000);
})
$(function(){
Carousel.init($("#carousel"));
$("#carousel").init();
});
</script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
</body>
</html>
浙公网安备 33010602011771号