-
用DIV+CSS技术设计的凤阳旅游网站（web前端网页制作课作业）HTML+CSS+JavaScript
👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。
四、网站效果🌐
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
五、网站代码制作部分 📕
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
HTML结构代码🧱
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> <div id="header"> <div class="top"> <div class="time"> <script language=JavaScript> 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-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li> <li><span>2015-1-16span><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>