学生网页作业家乡介绍网站设计——家乡介绍-长治(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作期末大作业成品_网页设计期末作业
最新推荐文章于 2024-04-25 14:49:41 发布
优质内容贡献
最新推荐文章于 2024-04-25 14:49:41 发布
阅读量143
收藏
点赞数
最新推荐文章于 2024-04-25 14:49:41 发布
阅读量143
收藏
点赞数
HTML5期末大作业：家乡介绍网站设计——家乡介绍-长治(8页)
文章目录
- HTML5期末大作业：家乡介绍网站设计——家乡介绍-长治(8页)
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>唇齿留香</title>
<link rel="stylesheet" href="css/food1.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/guide.css">
</head>
<body>
<script src="/demos/googlegg.js"></script>
<div class="wraper">
<div class="teacher">
<div class="teacherPic">
<div class="content" id="food1">
<div class="txt">
<h3>驴腊肉</h3>
<h4>潞安府三件宝之一</h4>
<p>为长治市传统名特食品，享有"天上龙肉，地下驴肉"之美称。</p>
</div>
</div>
<div class="content" id="food2">
<div class="txt">
<h3>壶关羊汤</h3>
<h4>汤鲜味浓，饺香肉嫩，发汗驱寒，营养丰富</h4>
<p>民间有“冬天喝羊汤，驱寒暖身增营养。伏天喝羊汤，温胃止泄去肚胀”的歌谣之说。</p>
</div>
</div>
<div class="content" id="food3">
<div class="txt">
<h3>潞城甩饼</h3>
<h4>浓香可口，不酥不烂，不软不硬，令人回味无穷。</h4>
<p>潞城甩饼在晋东南、长治市餐饮比赛活动中多次荣获桂冠。</p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$(".content").hover(function() {
var that = $(this);
that.children(".txt").stop().animate({
height: "360px"
}, 200);
that.parent(".teacherPic").css({
"background": "url(img/" + ($(this).attr('id')) + ".jpeg) no-repeat",
"-webkit-transition": "all 0.8s ease 0.2s",
"transition": "all 0.8s ease 0.2s"
});
that.find(".txt h3").stop().animate({
paddingTop: "130"
}, 550);
that.find(".txt p").stop().show();
}, function() {
var _that = $(this);
_that.children(".txt").stop().animate({
height: "100px"
}, 200);
_that.find(".txt h3").stop().animate({
paddingTop: "0px"
}, 550);
_that.find(".txt p").stop().hide();
})
</script>
<div class="nav-main">
<div class="nav-box">
<div class="nav">
<ul class="nav-ul">
<li><a href="index.html" class="home"><span>首页</span></a></li>
<li><a href="scenery1.html" class="develop"><span>晋善晋美</span></a></li>
<li><a href="scenery2.html" class="develop"><span>英雄太行</span></a></li>
<li><a href="food1.html" class="wechat"><span>唇齿留香</span></a></li>
<li><a href="food2.html" class="wechat"><span>回味无穷</span></a></li>
<li><a href="culture1.html" class="case"><span>多彩非遗</span></a></li>
<li><a href="culture2.html" class="case"><span>文化传承</span></a></li>
<li><a href="last.html" class="news"><span>长治欢迎您</span></a></li>
</ul>
</div>
<div class="nav-slide">
<div class="nav-slide-o"></div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>太行山大峡谷</span></a></li>
<li><a href="#"><span>通天峡</span></a></li>
<li><a href="#"><span>神农滑雪场</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>挂壁公路</span></a></li>
<li><a href="#"><span>八路军文化园</span></a></li>
<li><a href="#"><span>藏兵洞</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>驴腊肉</span></a></li>
<li><a href="#"><span>壶关羊汤</span></a></li>
<li><a href="#"><span>潞城甩饼</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>上党浇肉面</span></a></li>
<li><a href="#"><span>长子炒饼</span></a></li>
<li><a href="#"><span>长子猪头肉</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>上党梆子</span></a></li>
<li><a href="#"><span>潞安大鼓</span></a></li>
<li><a href="#"><span>黎侯虎</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>上党八音会</span></a></li>
<li><a href="#"><span>武乡顶灯</span></a></li>
<li><a href="#"><span>黎城剪纸</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var thisTime;
$('.nav-ul li').mouseleave(function(even) {
thisTime = setTimeout(thisMouseOut, 1000);
})
$('.nav-ul li').mouseenter(function() {
clearTimeout(thisTime);
var thisUB = $('.nav-ul li').index($(this));
if ($.trim($('.nav-slide-o').eq(thisUB).html()) != "") {
$('.nav-slide').addClass('hover');
$('.nav-slide-o').hide();
$('.nav-slide-o').eq(thisUB).show();
} else {
$('.nav-slide').removeClass('hover');
}
})
function thisMouseOut() {
$('.nav-slide').removeClass('hover');
}
$('.nav-slide').mouseenter(function() {
clearTimeout(thisTime);
$('.nav-slide').addClass('hover');
})
$('.nav-slide').mouseleave(function() {
$('.nav-slide').removeClass('hover');
})
})
</script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
3568
暂无认证
到【灌水乐园】发言
寂.325: 有完整的代码吗 带图片的
今天吃小羽: 怎么获取源代码呀
2301_80818808: 有css的代码吗
普通网友: 你好 有CSS代码吗
2301_80982771: 作者 那几个网页的全部代码有吗？现在急要