HTML期末大作业 ~ 大学生网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
四、前端 零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
# 五、源码获取 ❉ ~ 关注我，点赞博文~ 每天带你涨知识!
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，共有首页 新闻中心 专题回顾 里约热内卢 奥运回顾 等5个页面!
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍大气全屏的旅游景点官网网站，景区旅游介绍攻略，景区门票在线销售网站织梦。关于HTML网页设计期末课程大作业实现~ 主要有：世外桃源、山水园、桃源文化、教育基金、奖学金、网上商城、综合内容、服务中心等模块页面。
此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD, Vscode 所有编辑器均可使用）
网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）
空）
文章目录
一、作品演示
1.首页
2. 资讯信息
3. 主题路线
4.旅游攻略
5. 出行服务
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>凤阳县旅游局</title>
<meta name="keywords" content="凤阳县旅游局 " />
<meta name="description" content="凤阳县旅游局 " />
<link href="css/whir_css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/superslide.2.1.js"></script>
<script type="text/javascript" src="script/column.js"></script>
<script type="text/javascript" src="script/min_contentslider.js"></script>
</head>
<body>
</script>
</div>
<div class="weather">
<iframe width="450" scrolling="no" height="18" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=1&color=%23555555&icon=3&py=fengyang&wind=0&num=1"></iframe>
</div>
<div class="tnav"><a href="#">政务网</a>|<a href="#">官方旗舰店</a></div>
</div>
<div class="nav">
<div class="navmenu">
<div class="logo"><a href="index.html"><img src="images/logo.jpg" width="190" height="70" /></a></div>
<ul>
<li><a href="凤阳概况.html">凤阳概况</a></li>
<li><a href="资讯信息.html" class="on">资讯信息</a></li>
<li><a href="人文凤阳.html">人文凤阳</a></li>
<li><a href="畅游服务.html">畅游凤阳</a></li>
<li><a href="玩转凤阳.html">玩转凤阳</a></li>
<li><a href="主题线路.html">主题线路</a></li>
<li><a href="旅游攻略.html">旅游攻略</a></li>
<li><a href="出行服务.html">出行服务</a></li>
<li><a href="#">视频欣赏</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="fullSlide">
<div class="bd">
<ul>
<li _src="url(images/banner.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="#"></a></li>
<li _src="url(images/banner.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="#"></a></li>
<li _src="url(images/banner.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="#"></a></li>
<li _src="url(images/banner.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="#"></a></li>
<li _src="url(images/banner.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="#"></a></li>
</ul>
</div>
<div class="hd">
<ul>
</ul>
</div>
<span class="prev"></span> <span class="next"></span> </div>
<script type="text/javascript">
jQuery(".fullSlide").hover(function() {
jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
autoPage: true,
trigger: "click",
startFun: function(i) {
var curLi = jQuery(".fullSlide .bd li").eq(i);
if ( !! curLi.attr("_src")) {
curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
}
}
});
</script>
<!--中间内容-->
<div id="container">
<div class="con">
<!--精彩活动-->
<div class="active">
<div class="title">
<h1>精彩活动</h1>
</div>
<div class="picshow">
<DIV class=syFocusThumb>
<DIV id=syFocusThumb class=sliderwrapper>
<DIV class=contentdiv>
<DIV class=dPic><A href="#"
target=_blank><IMG src="images/2_1.jpg" width=419
height=319></A></DIV>
</DIV>
<DIV class=contentdiv>
<DIV class=dPic><A href="#"
target=_blank><IMG src="images/60x200.jpg"
width=419
height=319></A></DIV>
</DIV>
<DIV class=contentdiv>
<DIV class=dPic><A href="#"
target=_blank><IMG src="images/2_1.jpg" width=419
height=319></A></DIV>
</DIV>
<DIV class=contentdiv>
<DIV class=dPic><A href="#"
target=_blank><IMG src="images/350-200_2.jpg" width=419
height=319></A></DIV>
</DIV>
<DIV class=contentdiv>
<DIV class=dPic><A
href="#"
target=_blank><IMG src="images/emnb350.jpg"
width=419
height=319></A></DIV>
</DIV>
</DIV>
<DIV id=paginate-syFocusThumb class=pagination><I id=prev class=prev
title=上一幅></I>
<DIV class=thumbWrap>
<DIV class=holder><I class=toc><A
href="#" target=_blank><IMG src="images/2_1.jpg" width=92 height=67></A></I> <I
class=toc><A href="#"
target=_blank><IMG src="images/60x200.jpg"
width=92 height=67></A></I> <I class=toc><A
href="#" target=_blank><IMG src="images/2_1.jpg" width=92 height=67></A></I> <I
class=toc><A href="#"
target=_blank><IMG src="images/350-200_2.jpg" width=92 height=67></A></I> <I class=toc><A
href="#"
target=_blank><IMG src="images/123.jpg" width=92 height=67></A></I> </DIV>
</DIV>
<I id=next class=next title=下一幅></I></DIV>
<SCRIPT type=text/javascript>
//焦点图初始化
featuredcontentslider.init({
id: "syFocusThumb", //指定ID
contentsource: ["inline", ""], //有效值: ["inline", ""] 嵌入html or ["ajax", "path_to_file"] 嵌入utf-8文件
toc: "scroll", //有效值: "#increment" 标记序号, "markup", ["markup1", "markup2", etc]标记具体内容
nextprev: ["", ""], //next_pre标记 ，如："上一条" "下一条"，设置为 "" 为不出现
revealtype: "click", //鼠标事件有效值: “click” or “mouseover”
enablefade: [false, 0.15], // 切换褪色度 “true”or “false”
autorotate: [true, 3500], // 切换停留时间 “true”or “false”
delay: 0, //事件延迟时间(默认值：0，单位：ms)
//playtab: 4, 默认的播放舌签
onChange: function(previndex, curindex){ //触发处理；previndex 触发处理上一个记录； curindex 触发处理上一个记录 可以自定义函数控制；参考亲子网首页“亲子部落-相册”
}
});
</SCRIPT>
</DIV>
</div>
</div>
<!--旅游资讯-->
<div class="zixun">
<div class="title">
<h1>旅游资讯</h1>
</div>
<ul class="list">
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
<li><span>2015-1-16</span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作</a></li>
</ul>
<ul class="list1">
<li class="li1"><a href="#"><img src="images/pic1.jpg" /><span>小长假旅游接待情况</span></a></li>
<li class="li2"><a href="#"><img src="images/pic2.jpg" /><span>小岗村</span></a></li>
<li class="li3"><a href="#"><img src="images/pic3.jpg" /><span>明皇陵</span></a></li>
</ul>
</div>
<!--出行服务-->
<div class="cxfw">
<div class="title">
<h1>出行服务</h1>
</div>
<ul>
<li class="cx1"><a href="#">旅游企业</a></li>
<li class="cx2"><a href="#">景区名录</a></li>
<li class="cx3"><a href="#">旅行社名录</a></li>
<li class="cx4"><a href="#">酒店宾馆</a></li>
<li class="cx5"><a href="#">星级农家乐</a></li>
<li class="cx6"><a href="#">凤阳旅游地图</a></li>
<li class="cx7"><a href="#">投诉留言</a></li>
<li class="cx8"><a href="#">天气预报</a></li>
</ul>
</div>
</div>
<!--人文凤阳-->
<div class="con1">
<div class="culture">
<div class="rwfy">
<h1>人文凤阳</h1>
<ul class="list2">
<li class="rw1"><a href="#">凤阳新貌</a></li>
<li class="rw2"><a href="#">改革之乡</a></li>
<li class="rw1"><a href="#">民风民俗</a></li>
<li class="rw2"><a href="#">玻璃之城</a></li>
<li class="rw1"><a href="#">帝王之乡</a></li>
<li class="rw2"><a href="#">民间文学艺术之乡</a></li>
<li class="rw1"><a href="#">花鼓之乡</a></li>
</ul>
</div>
<!--凤阳概况-->
<div class="fygk">
<div class="xiang">
<div class="column">
<div class="title1"><a href="#">更多></a>
<h1>帝王之乡</h1>
</div>
<div class="xcon">
<div class="ximg"><a href="#"><img src="images/dwzx.jpg" width="118" height="78" /></a></div>
<ul>
<li>·<a href="#">凤阳朱元璋研究</a></li>
<li>·<a href="#">大明皇陵之碑</a></li>
<li>·<a href="#">楹联诗词</a></li>
<li>·<a href="#">研究指南</a></li>
</ul>
</div>
</div>
<div class="column" style="float:right">
<div class="title1"><a href="#">更多></a>
<h1>花鼓之乡</h1>
</div>
<div class="xcon">
<div class="ximg"><a href="#"><img src="images/hgzx.jpg" width="118" height="78" /></a></div>
<ul>
<li>·<a href="#">凤阳朱元璋研究</a></li>
<li>·<a href="#">大明皇陵之碑</a></li>
<li>·<a href="#">楹联诗词</a></li>
<li>·<a href="#">研究指南</a></li>
</ul>
</div>
</div>
</div>
<!--凤阳新貌-->
<div class="fyxm">
<div class="title1"><a href="#">更多></a>
<h1>凤阳新貌</h1>
</div>
<div class="fycon"> <img src="images/xm.jpg" width="117" height="78" align="left" />凤阳地处安徽省东北部，淮河中游南岸，总面积1949.5平方公里，人口74万。大自然的厚爱，馈赠给凤阳一方名山胜水，孕育了内涵厚重的淮河文化，哺育了一代农民皇帝朱元璋，造就了“敢为天下先”的小岗人，凤阳也因此以“帝王之乡”、“花鼓之乡”、“改革之乡”、“石英之乡”、“曲艺之乡”和“中国民间文化艺术之乡”享誉海内外。 </div>
</div>
</div>
<div class="rightcon">
<div class="column" style="border-bottom:1px solid #d8d8d8;">
<div class="title1"><a href="#">更多></a>
<h1>改革之乡</h1>
</div>
<div class="xcon">
<div class="ximg"><a href="#"><img src="images/gg.jpg" width="118" height="78" /></a></div>
<ul>
<li>·<a href="#">合作化的带头人-陈学孟</a></li>
<li>·<a href="#">毛泽东与城西乡</a></li>
<li>·<a href="#">中国农村改革“大包干”</a></li>
<li>·<a href="#">合作化的带头人-陈学孟</a></li>
</ul>
</div>
</div>
<div class="column" style="margin-top:20px;">
<div class="title1"><a href="#">更多></a>
<h1>民间文化艺术之乡</h1>
</div>
<div class="xcon">
<div class="ximg"><a href="#"><img src="images/dwzx.jpg" width="118" height="78" /></a></div>
<ul>
<li>·<a href="#">凤阳朱元璋研究</a></li>
<li>·<a href="#">大明皇陵之碑</a></li>
<li>·<a href="#">楹联诗词</a></li>
<li>·<a href="#">研究指南</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--畅游凤阳-->
<div class="con2">
<div class="cyfy">
<!--畅游凤阳-->
<div class="cyleft">
<h1>畅游凤阳</h1>
<ul class="list4">
<li class="rw1"><a href="#">狼巷迷谷景区</a></li>
<li class="rw2"><a href="#">韭山洞景区</a></li>
<li class="rw1"><a href="#">小岗村景区</a></li>
<li class="rw2"><a href="#">鼓楼景区</a></li>
<li class="rw1"><a href="#">明皇陵景区</a></li>
<li class="rw2"><a href="#">龙兴寺</a></li>
<li class="rw1"><a href="#">明中都皇城遗址</a></li>
<li class="rw2"><a href="#">卧牛湖</a></li>
</ul>
</div>
<ul class="list3">
<li class="cy1"><a href="#"><img src="images/cy1.jpg" width="479" height="336" /><span>明皇陵景区</span></a></li>
<li class="cy2"><a href="#"><img src="images/cy2.jpg" width="227" height="160"/><span>狼巷迷谷景区</span></a></li>
<li class="cy3"><a href="#"><img src="images/cy3.jpg" width="227" height="160"/><span>小岗村景区</span></a></li>
<li class="cy4"><a href="#"><img src="images/cy4.jpg" width="227" height="160"/><span>明中都皇城遗址</span></a></li>
<li class="cy5"><a href="#"><img src="images/cy5.jpg" width="227" height="160"/><span>韭山洞景区</span></a></li>
</ul>
</div>
</div>
<!--主题线路-->
<div class="con3">
<div class="ztxl">
<div class="ztleft">
<h1>主题线路</h1>
<ul class="list4">
<li class="rw1"><a href="#">经典线路</a></li>
<li class="rw2"><a href="#">研学之旅</a></li>
<li class="rw1"><a href="#">自然之旅</a></li>
<li class="rw2"><a href="#">红色之旅</a></li>
<li class="rw1"><a href="#">文化之旅</a></li>
</ul>
</div>
<ul class="list5">
<li class="xl1">
<div class="imgteaser"><a href="#"><img src="images/xl1.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
</span></a></div>
<div class="titles"><a href="#">经典线路</a></div>
</li>
<li class="xl2">
<div class="imgteaser"><a href="#"><img src="images/xl2.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
</span></a></div>
<div class="titles"><a href="#">经典线路</a></div>
</li>
<li class="xl3">
<div class="imgteaser"><a href="#"><img src="images/xl3.jpg" width="480" height="372"/><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
</span></a></div>
<div class="titles"><a href="#">经典线路</a></div>
</li>
<li class="xl4">
<div class="imgteaser"><a href="#"><img src="images/xl4.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
</span></a></div>
<div class="titles"><a href="#">经典线路</a></div>
</li>
<li class="xl5">
<div class="imgteaser"><a href="#"><img src="images/xl5.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
</span></a></div>
<div class="titles"><a href="#">经典线路</a></div>
</li>
</ul>
</div>
</div>
<!--玩转凤阳-->
<div class="wancon">
<div class="wan">
<div class="wzleft">
<h1>玩转凤阳</h1>
<ul class="list4">
<li class="rw1"><a href="#">吃在凤阳</a></li>
<li class="rw2"><a href="#">游在凤阳</a></li>
<li class="rw1"><a href="#">住在凤阳</a></li>
<li class="rw2"><a href="#">购在凤阳</a></li>
<li class="rw1"><a href="#">行在凤阳</a></li>
<li class="rw2"><a href="#">旅在凤阳</a></li>
</ul>
</div>
<div class="wzright">
<div class="title2">
<h1 class="hover" id="one1" onmouseover="setTab('one',1,6)">吃在凤阳</h1>
<h1 id="one2" onmouseover="setTab('one',2,6)">游在凤阳</h1>
<h1 id="one3" onmouseover="setTab('one',3,6)">住在凤阳</h1>
<h1 id="one4" onmouseover="setTab('one',4,6)">购在凤阳</h1>
<h1 id="one5" onmouseover="setTab('one',5,6)">行在凤阳</h1>
<h1 id="one6" onmouseover="setTab('one',6,6)">旅在凤阳</h1>
</div>
<div class="clear"></div>
<div class="wzcon" id="con_one_1">
<div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" /></span> <span class="mstitle"><a href="#">凤阳美食简介</a></span>
<p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...</p>
</div>
<div class="column1">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px; float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
</div>
<div class="wzcon" id="con_one_2" style="display:none;">
<div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" /></span> <span class="mstitle"><a href="#">凤阳美食简介</a></span>
<p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...</p>
</div>
<div class="column1">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px; float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
</div>
<div class="wzcon" id="con_one_3" style="display:none;">
<div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" /></span> <span class="mstitle"><a href="#">凤阳美食简介</a></span>
<p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...</p>
</div>
<div class="column1">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px; float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
</div>
<div class="wzcon" id="con_one_4" style="display:none;">
<div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" /></span> <span class="mstitle"><a href="#">凤阳美食简介</a></span>
<p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...</p>
</div>
<div class="column1">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px; float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
</div>
<div class="wzcon" id="con_one_5" style="display:none;">
<div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" /></span> <span class="mstitle"><a href="#">凤阳美食简介</a></span>
<p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...</p>
</div>
<div class="column1">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px; float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
</div>
<div class="wzcon" id="con_one_6" style="display:none;">
<div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" /></span> <span class="mstitle"><a href="#">凤阳美食简介</a></span>
<p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...</p>
</div>
<div class="column1">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
<div class="column1" style="margin-top:10px; float:right;">
<div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" /></span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）</a></span></div>
<div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...</div>
</div>
</div>
</div>
</div>
</div>
<!--旅游攻略-->
<div class="con4">
<div class="lygl">
<div class="lyleft">
<h1>旅游攻略</h1>
<ul class="list4">
<li class="rw1"><a href="#">凤阳旅游地图</a></li>
<li class="rw2"><a href="#">凤阳游记</a></li>
<li class="rw1"><a href="#">凤阳美景</a></li>
<li class="rw2"><a href="#">旅游攻略发布</a></li>
<li class="rw1"><a href="#">自驾游</a></li>
</ul>
</div>
<div class="lyright">
<ul class="lylist">
<li>
<div class="lyimg"><img src="images/th.jpg" width="121" height="85" /></div>
<h2><a href="#">感受鲜艳的季节</a></h2>
<p>又是一年春天，各种各样的鲜花争相盛开：灿若... </p>
</li>
<li>
<div class="lyimg"><img src="images/th.jpg" width="121" height="85" /></div>
<h2><a href="#">感受鲜艳的季节</a></h2>
<p>又是一年春天，各种各样的鲜花争相盛开：灿若... </p>
</li>
<li>
<div class="lyimg"><img src="images/th.jpg" width="121" height="85" /></div>
<h2><a href="#">感受鲜艳的季节</a></h2>
<p>又是一年春天，各种各样的鲜花争相盛开：灿若... </p>
</li>
<li>
<div class="lyimg"><img src="images/th.jpg" width="121" height="85" /></div>
<h2><a href="#">感受鲜艳的季节</a></h2>
<p>又是一年春天，各种各样的鲜花争相盛开：灿若... </p>
</li>
</ul>
<ul class="list6">
<li class="gl1"><a href="#"><img src="images/gl1.jpg" /></a></li>
<li class="gl2"><a href="#"><img src="images/gl2.jpg" /></a></li>
<li class="gl3"><a href="#"><img src="images/gl3.jpg" /></a></li>
<li class="gl4"><a href="#"><img src="images/gl4.jpg" /></a></li>
<li class="gl5"><a href="#"><img src="images/gl5.jpg" /></a></li>
<li class="gl6"><a href="#"><img src="images/gl6.jpg" /></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--底部-->
<div id="footer">
<div class="links">
<!--下面是向左滚动代码-->
<div id="colee_left" style="overflow:hidden;width:1200px; padding:0px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="colee_left1" valign="top"><table cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="td1"><a href="#" target="_blank"><img src="images/link1.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link2.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link3.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link4.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link5.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link6.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link7.jpg" width="135" height="42" /></a></td>
<td class="td1"><a href="#" target="_blank"><img src="images/link8.jpg" width="135" height="42" /></a></td>
</tr>
</table></td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=48//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
</div>
<div class="fnav"><a href="#">关于我们</a>|<a href="#">免责条款</a>|<a href="#">加入收藏</a>|<a href="#">设为首页</a></div>
<div class="copyright">版权所有：凤阳县旅游局 电话：0550-6629038 地址：凤阳县东华路109号 邮编：233100 邮箱：fyx_lyj@163.com<br />
皖ICP备07501184号 Designed by <a href="#">samxinnet</a></div>
</div>
</body>
</html>
四、前端 零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
# 五、源码获取 ❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
