银财中国网
用DIV+CSS技术设计的凤阳旅游网站（web前端网页制作课作业）HTML+CSS+JavaScript
创始人
2024-02-19 09:23:29
0次

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

🏀 精彩专栏推荐👇🏻👇🏻👇🏻

💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📖
  • 四、网站效果🌐
  • 五、网站代码制作部分 📕
    • HTML结构代码🧱
    • CSS样式代码🏡
  • 六、遇到问题及如何解决🔍
  • 七、实训总结😊
  • 八、更多干货🎁

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言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结构代码🧱






凤阳县旅游局














      
    



    精彩活动
         
    旅游资讯
    更多>
    凤阳新貌
     凤阳地处安徽省东北部，淮河中游南岸，总面积1949.5平方公里，人口74万。大自然的厚爱，馈赠给凤阳一方名山胜水，孕育了内涵厚重的淮河文化，哺育了一代农民皇帝朱元璋，造就了“敢为天下先”的小岗人，凤阳也因此以“帝王之乡”、“花鼓之乡”、“改革之乡”、“石英之乡”、“曲艺之乡”和“中国民间文化艺术之乡”享誉海内外。 
    吃在凤阳
    游在凤阳
    住在凤阳
    购在凤阳
    行在凤阳
    旅在凤阳
      凤阳美食简介
    凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...
    御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...
    版权所有：凤阳县旅游局 电话：0550-6629038 地址：凤阳县东华路109号 邮编：233100 邮箱：fyx_lyj@163.com
    皖ICP备07501184号 Designed by samxinnet

    CSS样式代码🏡

    @charset "utf-8";
body,div,hr,blockquote,ul,ol,li,table,th,td,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,input,button,select,textarea,fieldset,legend{margin:0;padding:0}
body{font-size:12px;color:#333; background:#fff;font-family:Tahoma,Geneva,sans-serif,'宋体'; min-width:1200px;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
.clearfix{*zoom:1}
.clearfix:after{display:block;clear:both;content:".";visibility:hidden;height:0}
ul,ol{list-style:none}
fieldset,img{border:0}
address,cite,dfn,em,var{font-style:normal}
strong,.fcu{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
button,.fhand{cursor:pointer}
button,input,select,textarea{font-size:100%;}
html{zoom:expression(function(ele){ele.style.zoom="1";document.execCommand("BackgroundImageCache",false,true)}(this))}.clear {margin:0px; padding:0px; clear:both;}
/* ----- Links ----- */
a {text-decoration:none; color:#666666;}
a:hover {text-decoration:none;color:#193d7c;}
.cl { zoom:1; float:right;}/***头部***/
#header{ width:100%; height:100px; display:block;}
.top{ width:1200px; height:30px; line-height:30px; margin:0 auto; font-size:12px; color:#555555; font-family:"微软雅黑"; margin:0 auto;} 
.time{ float:left;} .weather{ float:left; padding-top:5px; padding-left:5px;}
.tnav{ float:right; color:#777777;} .tnav a{ color:#777; padding:0px 10px;}
.nav{ width:100%; height:70px; background:url(../images/navbg.jpg) repeat-x; margin:0 auto;}
.logo{ width:190px; height:70px; float:left;} .navmenu{ width:1200px; height:70px; margin:0 auto;}
.navmenu ul{ width:1010px; height:70px; float:left; background:url(../images/nav.jpg) no-repeat;}
.navmenu ul li{ width:112px; line-height:70px; text-align:center; float:left; font-size:16px; font-family:"微软雅黑";}
.navmenu ul li a{ display:block; width:112px; line-height:70px; color:#fff;}
.navmenu ul li a:hover,.navmenu ul li a.on{ background:url(../images/navh.png) no-repeat; color:#fff4c1;}

    六、遇到问题及如何解决🔍

    实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

    七、实训总结😊

    通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

    八、更多干货🎁

    1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

    3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

    上一篇：北京温泉门票（北京西山温泉门票价格） 北京温泉门票 北京热公馆温泉门票价格

    下一篇：Android Studio下载安装

    相关内容

    热门资讯

    喜欢穿一身黑的男生性格（喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识，其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
    发春是什么意思（思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思，以及思春和发春是什么意思对应的知识点，希望对各位有所帮助，...
    网络用语zl是什么意思（zl是... 今天给各位分享网络用语zl是什么意思的知识，其中也会对zl是啥意思是什么网络用语进行解释，如果能碰巧...
    为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?，以及为什么酷狗下载的歌曲不是...
    家里可以做假山养金鱼吗（假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识，其中也会对假山能放鱼缸里吗进行解释，如果能碰巧解...
    华为下载未安装的文件去哪找（华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识，其中也会对华为下载未安装的文件去哪找到进行解...
    四分五裂是什么生肖什么动物（四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物，以及四分五裂打一生肖是什么对应的知识点，希...
    怎么往应用助手里添加应用（应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识，其中也会对应用助手怎么添加微信进行解释，如果能...
    苏州离哪个飞机场近（苏州离哪个... 本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近，以及苏州离哪个飞机场近点对应的知识点，希望对各位有...
    客厅放八骏马摆件可以吗（家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识，其中也会对家里摆八骏马摆件好吗进行解释，如果能碰巧解决你...