web前端大作业：旅游网页主题网站设计——武汉旅游网页设计(11页)HTML+CSS+JavaScript
发布日期：2023-10-26 08:49:59
??学生HTML静态网页基础水平制作??，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
? 精彩专栏推荐??????
一、网站题目??
? 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍?
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
四、网站效果?
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
五、网站代码制作部分 ?
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
HTML结构代码?
武汉旅游网
黄鹤楼位于湖北省武汉市。江南四大名楼之一，国家旅游胜地四十佳。素有“天下江山第一楼”之美誉。冲决巴山群峰，接纳潇湘云水，浩荡长江在三楚腹地与其最长支流汉水交汇，造就了武汉隔两江而三镇互峙的伟姿。这里地处江汉平原东缘，鄂东南丘陵...
CSS样式代码?
/* Home page stylesheet
* Description:
* This is the default Cascading Style Sheets.
* The style is compatibility in the mainstream of current browsers.
* The style is normally displayed in the most of modern monitors.
* Author: , Date:
* Copyright (c)
*/
/*** Styles Start ***/
/*Basic Style*/
*{margin:0 auto;}
body {font-family:"宋体",Arial,Verdana; font-size:12px; margin:0;background:#fff;background:url('../images/bg.png') repeat-x;}
a:link,a:visited {color:#4b4b4b; font-size:12px; text-decoration:none;}
a:hover {color:#00c; font-size:12px; text-decoration:none;}
img {border:0;}
button {margin:0;padding:0;font-size:12px;height:26px;}
form {margin:0;}
/*Body container style*/
#container {margin:0 auto;padding:0;width:1000px;}
/*Top div style*/
#head {margin:0;padding:0;width:1000px;}
#logo {float:left;margin:20px 0 0 20px;width:200px;height:50px;}
#head_inner {margin:0;padding:0;width:1000px;height:82px;background:url('../images/top.jpg') no-repeat;}
#head_inner_top {margin:20px 50px 0 0;padding:0;text-align:right;}
#head_inner_top a:link,#head_inner_top a:visited {color:#fff;font-size:13px;text-decoration:none;}
#head_inner_top a:hover {color:#fdf;text-decoration:underline;}
#nav_menu {margin:0;padding:0;width:1000px;height:40px;line-height:40px;text-align:center;background-color:#0080cc; }
#nav_menu a:link,#nav_menu a:visited {color:#fff;font-size:14px;text-decoration:none;}
#nav_menu a:hover {color:#fdf;text-decoration:none;}
/*Mainbody div style*/
#mainbody {margin:0;padding:0;width:1000px;background:#fff;}
/**Mainbody Layout div style*/
#view_bar {margin:0;padding:0;width:1000px;height:320px;background:#fff;}
#main_layout {margin:10px auto;padding:0;width:1000px;}
#main_layout_left {float:left;width:300px;height:235px;border:#cfcfef 1px solid;}
#main_layout_left_tit {margin:10px 0 0 10px;padding:0;height:22px;}
#main_layout_middle{margin-left:305px;_margin-left:300px;width:388px;height:235px;border:#cfcfef 1px solid;}
#main_layout_middle_tit {margin:10px 0 0 10px;padding:0;font-size:14px;height:22px;}
#main_layout_middle_container {margin:12px 0 0 10px;padding:0;width:368px;}
.cont_pic {float:left;width:135px;}
.cont_text {float:right; margin:0;width:160px;color:#333;font-size:12px;line-height:20px;}
#main_layout_right {float:right;width:300px;height:235px;border:#cfcfef 1px solid;}
#main_layout_right_tit {margin:10px 0 0 10px;padding:0;font-size:14px;height:22px;}
#main_layout_right_container {margin:0px;}
#view_layout {margin:0;padding:0;width:998px;height:195px;border:#cfcfef 1px solid;}
#view_layout_tit {margin:10px 0 0 10px;padding:0;font-size:14px;height:22px;}
#view_layout ul li {margin-left:5px;padding:0;float:left;list-style-type:none;}
#links_layout {margin-top:10px;padding-left:10px;width:988px;font-size:14px;height:40px;line-height:40px;border:#cfcfef 1px solid;}
#links_layout a:link,#links_layout a:visited {color:#333;font-size:14px;text-decoration:none;}
#links_layout a:hover {color:#33c;font-size:14px;text-decoration:none;}
.cls_a:link,.cls_a:visited {color:#000;font-size:14px;text-decoration:none;}
.cls_a:hover {color:#33c;font-size:14px;text-decoration:none;}
.info_list {margin:5px auto;padding:0;}
.info_list ul {}
.info_list ul li {margin:0;padding:0 0 0 15px;height:24px;line-height:24px;list-style-type:none;background:url('../images/list_ico.gif') 5px 11px no-repeat;}
.info_list ul li span {float:right;margin-right:20px;}
.info_list ul li a:link,.info_list a:visited {color:#4b4b4b;text-decoration:none;}
.info_list ul li a:hover {color:#33c;text-decoration:none;}
.info_list_n {margin:3px 0;padding:0;}
.info_list_n ul {}
.info_list_n ul li {margin-left:0px;margin-left:10px\9;padding-left:5px;height:28px;line-height:28px;list-style-type:square;}
.info_list_n ul li a:link,.info_list_n a:visited {color: #333;text-decoration: none;}
.info_list_n ul li a:hover {color: #33c;text-decoration: underline;}
/*list pages style*/
#cls_layout_tit {margin-top:10px;padding:0;height:22px;font-size:14px;}
.cls_info_list {margin-top:10px;padding:0;color:#333;}
.cls_info_list ul {margin: 0;padding: 0;list-style-type: none;}
.cls_info_list ul li {font-size:12px;color:#333;line-height:27px;border-bottom:#aaaaee 1px dashed;}
.cls_pic_list {margin-top:10px;padding:0;color:#333;}
.cls_pic_list ul {margin: 0;padding: 0;list-style-type: none;}
.cls_pic_list ul li {padding: 2px;float:left;}
#pages_info {margin-top: 10px;;padding: 0;}
#cls_cont {margin-top:15px;padding:0;min-height:300px;_height:300px;color:#333;border:#cfcfef 1px solid;}
#cls_cont_p {margin:0px;padding:20px;font-family:Arial,Verdana,"宋体";font-size:14px;height:22px;line-height:22px;}
/*show pages style*/
.info_title {margin:0 auto;padding-top:16px;color:#66c;font-size:16px;font-family:'黑体';font-weight:normal;width:900px;height:28px;white-space:nowrap;text-overflow:ellipsis; overflow: hidden;text-align:center;border-bottom:#ccccef 1px solid;}
.info_other {margin:0 auto;padding-top:10px;color:#99b;font-size:12px;height:20px;text-align:center;}
.info_imgs {margin:3px 0 3px 0;padding:0;text-align:center;vertical-align:middle;}
.info_imgs img {vertical-align:middle;}
.info_body {margin:20px auto;width:900px;padding:0;color:#333;font-size:14px;line-height:22px;word-wrap:break-word;text-align:left;overflow:hidden;}
#layout_links {margin-top:10px;padding:0;width:240px;}
#layout_links p {line-height:20px;width:190px;border-bottom:#cfcfef 1px dotted;}
#layout_links a:link,#layout_links a:visited {color:#4b4b4b;text-decoration:none;}
#layout_links a:hover {color:#333;text-decoration:none;}
/*Bottom div style*/
#foot {font-family:Arial,Verdana,"宋体";margin-top:10px;padding:0;width:1000px;height:80px;border-top:#e5e5e5 1px solid;clear:both;background:#fff;}
.cr {margin-top:10px;padding:0;line-height:18px;text-align:center;color:#333333;}
.clr {clear: both;}
.clr:after {content:".";height:0;visibility:hidden;display:block;clear:both;}
/*Other additional style*/
.picshow {z-index:1000; position:relative; background-color:#e4f2fa; width:1000px; height:320px;}
.picshow_main {position:relative; width:1000px; height: height:320px;}
.picshow_main .imgbig {filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward;); width:1000px; height:320px;}
.picshow_change {position:absolute;height:50px;right:10px;top:260px;}
.picshow_change img {width:50px; height:35px;}
.picshow_change a {float:left; margin-right:5px; display:block; -display:inline; border:#000 1px solid;}
a.ax {border-color: #555;}
a.ax:hover {border-color: #000;}
a.ax img {filter: alpha(opacity=40); opacity: 0.3; -moz-opacity: 0.3;}
a.ax:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0;}
a.bx {border-color: #000;}
a.bx:hover {border-color: #000;}
/*tags*/
table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal; }
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0; }
button{line-height:1.2;vertical-align:middle;cursor:pointer;}
strong{font-weight:800;}
/*** Styles End ***/
六、遇到问题及如何解决?
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结?
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货?
请 “?点赞” “✍️评论” “?收藏”
❤️【??????关注我| 获取更多源码 | 优质文章】
3.以上内容技术相关问题?欢迎一起交流学习???????
黄鹤楼位于湖北省武汉市。江南四大名楼之一，国家旅游胜地四十佳。素有“天下江山第一楼”之美誉。冲决巴山群峰，接纳潇湘云水，浩荡长江在三楚腹地与其最长支流汉水交汇，造就了武汉隔两江而三镇互峙的伟姿。这里地处江汉平原东缘，鄂东南丘陵...
