HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)

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号 获取更多源码 !

在这里插入图片描述

六、更多HTML期末大作业文章

1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

6.HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)

7.HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)

8.HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)

9.HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

10.大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)

11.HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)

12.web前端大一实训~制作卡布漫画网站设计与实现(HTML+CSS+JavaScript)

13.web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)

14.HTML期末大作业~酒店网站模板(HTML+CSS+JavaScript)

15.HTML学生网页设计作业源码~开心旅游网站设计与实现(HTML期末大作业)

16.HTML奥运网页5页面文化 ~ 体育学生网页设计作业

17.HTML我的家乡杭州网页设计作业源码(div+css)

18.HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码

19.HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面

20.HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

21.一套完整仿拉勾网HTML静态网页模板(含38个独立HTML)

22.HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)

23 Web大学生网页作业成品~美食餐饮网站设计与实现(HTML+CSS+JavaScript)

24.HTML期末大作业~绿色农产品食品类网站设计与实现(HTML+CSS+JavaScript)

25.HTML期末大作业~花店鲜花商城网站模板设计与实现(HTML+CSS+JavaScript)

26.HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)

27.HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品

28.HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)

七、更多表白源码

❤100款表白源码演示地址

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论

打赏作者

@码出未来-web网页设计

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值