DW大学生网页作业制作设计 ——旅游门户网站（21页）HTML+CSS+JavaScript
来源：
浏览：187
时间：2023-08-28
👨🎓学生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结构代码🧱
首页
400-888-8888
<
>
马代专家
每6位马尔代夫客人就有一位来自VR游
豪礼超值旅游卡
多买、多送、惠不停
会员专属大礼包
得积分拿旅游卡抵money
包机特价/限时抢购
¥实时询价
新加坡+民丹岛5天4晚游>跟团游一城一岛，奢享私藏秘境赠......
¥实时询价
【最芽庄】深圳直飞-芽庄4天3晚自由行当地四星（含...
¥实时询价
【特价爆款】塞班岛5天3晚自由行（赠送接送机+北部环...）
包机特价/限时抢购
¥实时询价
毛里求斯7-8天自由行 主推4星-克里奥尔酒店（接送机+北部...）
¥12050
【全国出发】马尔代夫库拉马提7天5晚（最美拖尾沙滩，蜜月亲子..）
¥实时询价
【特色跟团】马尔代夫6天4晚>半自由行 甄选行程、全程领队...
芽庄汉谭岛一日游 含海鲜自助
¥185
【毛求小马哥】经典超值 西部动物之旅 快艇看海豚+七色土+鸟公园
¥560
【毛求小马哥】南部原始之旅南部四驱车+大浪湾+自然桥+蓝湾浮潜爆款热卖
¥699
【碧海蓝天】塞班岛 高空跳伞（接送+中文导游）
¥2100
旅游攻略
收藏
私信
年时间
决定去马代是今年1月份才决定的，很多人都会提早半年甚至一年的时间去准备，我......
蓝色美人蕉，我们的马代（蜜月）之旅
-
收藏
私信
年时间
脱离主流文化环境的约束，获得某种程度的身之间
爱上巴厘岛-我们的蜜月自由行
-
收藏
私信
年时间
脱离主流文化环境的约束，获得某种程度的身之间
爱上巴厘岛-我们的蜜月自由行
-
收藏
私信
年时间
脱离主流文化环境的约束，获得某种程度的身之间
爱上巴厘岛-我们的蜜月自由行
-
收藏
私信
年时间
脱离主流文化环境的约束，获得某种程度的身之间
爱上巴厘岛-我们的蜜月自由行
促销活动
更多
你可能感兴趣的目的地
马尔代夫
毛里求斯
斯里兰卡
塞班
沙巴
巴厘岛
会员活动
猜你喜欢
出境邮轮你的海上假期
【日本】加勒比海洋量子号号豪华邮轮佐世保福冈5晚6日*量子邮轮 天津
天津出发 ¥4199起
【日本】加勒比海洋量子号号豪华邮轮佐世保福冈5晚6日*量子邮轮 天津
天津出发 ¥4199起
【日本】加勒比海洋量子号号豪华邮轮佐世保福冈5晚6日*量子邮轮 天津
天津出发 ¥4199起
【日本】加勒比海洋量子号号豪华邮轮佐世保福冈5晚6日*量子邮轮 天津
天津出发 ¥4199起
【日本】加勒比海洋量子号号豪华邮轮佐世保福冈5晚6日*量子邮轮 天津
天津出发 ¥4199起
【日本】加勒比海洋量子号号豪华邮轮佐世保福冈5晚6日*量子邮轮 天津
天津出发 ¥4199起
产品优质
信息透明
履行约定
维护权益
先行赔付
CSS样式代码🏡
@charset "utf-8";
.box {
width: 1000px;
height: 417px;
margin:0 auto;
}
.inner{
width: 1000px;
height: 417px;
position: relative;
overflow: hidden;
}
.inner img{
width:1000px;
height: 417px;
vertical-align: top
}
.inner ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 12px;
text-align: center;
padding: 5px;
}
ol li{
display: block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current{
background-color: red;
}
#arr{
display: block;
}
#arr span{
width: 30px;
height: 40px;
position: absolute;
left: 14px;
top: 156px;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr #right {
right: 18px;
left: auto;
}
.tuij{ width:1000px; height:70px; margin:0 auto; margin-top:10px; }
.tuij .bx{ width:33%; float:left; float:left;}
.tuij .bx img{ float:left; margin-right:10px;}
.tuij .bx h2{ font-size:16px; margin-top:10px;}
.tuij .bx p{ font-size:14px;}
.main{ width:1000px; height:auto; overflow:hidden; margin:0 auto; margin-top:10px; }
.main .left{ width:800px; height:auto; min-height:800px; overflow:hidden; float:left; }
.main .left .l-box01{ width:800px; height:300px; margin-top:10px;}
.main .left .l-box01 .title{ width:100%; height:40px; }
.main .left .l-box01 .title h2{color:#ff4b21; font-size:22px;float:left;}
.main .left .l-box01 .title img{ display:block; float:left; width:30px;}
.main .left .l-box01 .neir{ width:100%; height:222px;}
.main .left .l-box01 .neir ul{}
.main .left .l-box01 .neir ul li{ width:250px; height:220px; border:#CCC 1px solid; margin:5px; float:left;}
.main .left .l-box01 .neir ul li img{ width:250px; height:136px;}
.main .left .l-box01 .neir ul li h2{ width: 100%;color: #f4514a;font-size: 16px;padding: 0px 10px;}
.main .left .l-box01 .neir ul li h3{ font-size: 14px;color: #333;margin: 0px;padding: 0px 10px; font-weight:normal;}
.ab{ width:770px; height:94px; margin:0 auto; border:#CCC 2px solid; }
.main .left .l-box02{ width:800px; height:350px; margin-top:10px;}
.main .left .l-box02 .title{ width:100%; height:40px; }
.main .left .l-box02 .title h2{color:#ff4b21; font-size:22px;float:left;}
.main .left .l-box02 .ner{ width:100%; height:330px;}
.main .left .l-box02 .ner ul{}
.main .left .l-box02 .ner ul li{ width:380px; height:132px; float:left; margin-right:15px; border:#CCC 1px solid; margin-bottom:10px; position:relative;}
.main .left .l-box02 .ner ul li img{ width:180px; height:130px; float:left; margin-right:15px;}
.main .left .l-box02 .ner ul li h2{ color:#141d26; font-size:14px;}
.main .left .l-box02 .ner ul li h3{ color: #f74d4d;
font-size: 16px;
margin-top: 60px;
display: block;
position: absolute;
bottom: 0px;
left: 200px;}
.main .left .l-box03{ width:800px; height:390px; margin-top:10px;}
.main .left .l-box03 .title{ width:100%; height:40px; }
.main .left .l-box03 .title h2{color:#ff4b21; font-size:22px;float:left;}
.main .left .l-box03 .ner{ width:100%; height:570px;}
.main .left .l-box03 .ner .left2{ width:290px; height:520px; border:#CCC 1px solid; float:left; margin-right:15px; padding:15px;}
.main .left .l-box03 .ner .tu{ width:100%; height:356px;}
.main .left .l-box03 .ner .tu2{ width:100%; height:126px !important;}
.pingj2 {
width: 200px!important;
height: 70px !important;
margin-top: -15px !important;
}
.pingj{ width:290px; height:100px; margin-top:-30px;}
.pingj img{ width: 93px;
height: 93px;
float: left;
margin-right: 10px;
z-index: 99999;
position: relative;
margin-left: 20px;}
.pingj .ri{ padding-top:40px;}
.pingj .ri2{ padding-top:20px !important;}
.pingj .ri img{ float:left; margin-right:5px; width:15px; height:15px;margin-left: 0px;}
.pingj .ri h2{ color: #77beff;
font-size: 12px;
font-weight: normal;
float: left;
margin: 0px;
line-height: 15px;}
.pingj .ri h3{color: #77beff;
font-size: 12px;
font-weight: normal;
float: left;
margin: 0px;
line-height: 15px;}
.pingj .ri h4{ color:#43423d; font-size:14px; float:left;margin: 0px;}
.jieshao{ width:100%; height: auto; margin-top:20px;}
.jieshao{ width:100%; height: auto; margin-top:0px !important;}
.jieshao img{ float:left;}
.jieshao p{ font-size:12px;}
.jieshao h2{ font-size:14px;}
.main .left .l-box03 .ner .right2{width: 450px;
height: 550px;
float: left;}
.main .left .l-box03 .ner .right2 ul{}
.main .left .l-box03 .ner .right2 ul li{ width:195px; height:248px; border:#CCC 1px solid; float:left; padding:10px;margin: 0px 4px;margin-bottom: 10px;}
.pingj .img2{ width: 60px;
height: 60px;
float: left;
margin-right: 10px;
z-index: 99999;
position: relative;
margin-left: 20px;}
.main .right{ width:200px; height:auto;min-height:800px; overflow:hidden; float:left; }
.main .right .box01{ width:200px; height:auto; }
.main .right .box01 img{ margin-bottom:6px;}
.titi{ width:100%; height:25px; line-height:25px; margin-bottom:10px;}
.titi h2{ font-size:14px; color:#4b4b4d; float:left;}
.titi span{ font-size:12px; float:right;}
.main .right .box02{ width:200px; height:auto; }
.main .right .box02 ul{}
.main .right .box02 ul li{ width:33%; height:110px; float:left; text-align:center;}
.main .right .box02 ul li img{ margin-bottom:6px;}
.main2{ width:1000px; height:620px; margin:0 auto;}
.main2 .tit{ width:100%; height:80px;}
.main2 .tit img{ float:left; margin-right:10px;}
.main2 .tit h2{ font-size:22px;line-height: 80px;}
.main2 .tit2{width: 100%;
height: 35px;
border-bottom: #CCC 2px solid;
background: url(../images/bx29.jpg) no-repeat 0px 5px;
padding-left: 20px;
font-size: 14px; margin-bottom:15px;}
.main2 .tit2 span{ color:#999; font-size:12px; margin-left:10px;}
.main2 .rtit{ float:right;}
.main2 .rtit a{ font-size:13px;padding: 15px;}
.main2 .rtit a:hover{ color:#e20046; border-bottom:#e20046 2px solid;}
.main2 .rtit .host{ color:#e20046; border-bottom:#e20046 2px solid;}
.ners{ width:100%; height:auto;}
.ners .left{ width:236px; height:463px; float:left; margin-right:15px;}
.ners .right{ width:730px; height:463px; float:left;}
.ners .right ul{}
.ners .right ul li{ width: 222px;
height: 215px;
float: left;
margin-bottom: 15px;
margin-right: 20px;}
.ners .right ul li img{ width:222px; height:150px;}
.ners .right ul li h2{ font-size:12px; font-weight:normal; line-height:20px;}
.ners .right ul li h3{font-size:12px; font-weight:normal; line-height:20px; color:#999;}
.ners .right ul li h3 span{ float:right; color:#e72363;}
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
请 “👍点赞” “✍️评论” “💙收藏” ❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
