HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)

最新推荐文章于 2024-10-10 11:27:51 发布

web学生网页设计

最新推荐文章于 2024-10-10 11:27:51 发布

阅读量1w

点赞数 59

分类专栏： web前端文章标签： html网页作业 html5期末作业学生网页作业 web课程设计与制作 web期末大作业

本文链接：https://blog.csdn.net/m0_73081085/article/details/128658612

版权

web前端专栏收录该内容

2220 篇文章 144 订阅

订阅专栏

本文介绍了一位学生使用HTML和CSS制作的旅游网页设计项目，包括页面布局、内容展示和交互功能。网页设计注重简洁和主题鲜明，适用于初学者学习。代码中应用了浮动布局、HTML5和CSS3技术，同时提到了JavaScript用于动态效果。文章还分享了设计过程中的问题解决和实训总结。

摘要由CSDN通过智能技术生成

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

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📖

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

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


<html>
<head>
<meta charset="UTF-8">
<title>旅游中国</title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<script src="js/lunbo.js" type="text/javascript"></script>
</head>
<body>
<div class="head"><img src="images/logo.png" width="240"></div>
<div class="nav">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="liuyan.html">留言</a></li>
    <li><a href="gentuanyou.html">跟团游</a></li>
    <li><a href="zixun.html">新闻资讯</a></li>
    <li><a href="fengguang.html">图片风光</a></li>
    <li><a href="shipin.html">精彩视频</a></li>
    <li><a href="denglu.html">会员登录</a></li>
    <li><a href="zhuce.html">会员注册</a></li>
  </ul>
</div>
<div  class="banner2" id="banner">
  <ul id="b_pic">
    <li style="display: block;"><img src="images/banner1.jpg"  alt=""></li>
    <li><img src="images/banner2.jpg"  alt=""></li>
    <li><img src="images/banner3.jpg"  alt=""></li>
  </ul>
  <ul id="b_an">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div  class="main">
  <div class="fls" >
    <h2 class="bar">自由行</h2>
    <ul>
      <li><img src="images/1.jpg" width="100%">
        <p>四川成都+稻城亚丁+理塘+珍珠海+新都桥7日6晚私家团·越野自驾·</p>
      </li>
      <li><img src="images/2.jpg" width="100%">
        <p>可选专车接送站/一日游/包车|穿越时光·遇见长安|停留天数随心定·旅行说走就走</p>
      </li>
      <li><img src="images/3.jpg" width="100%">
        <p>住1晚市区+1晚黄山山顶+1晚宏村 · 严选包车游</p>
      </li>
    </ul>
  </div>
  <div class="mls">
    <h2 class="bar">推荐线路</h2>
    <ul class="txtlist">
      <li> <a href="zyinfo.html"><img src="images/b1.jpg" width="140"></a>
        <div> <a href="zyinfo.html">阿坝3日2晚跟团游·纯玩丨九寨沟+黄龙【熊猫乐园/都江堰任选其一】（可升级头等舱/熊猫主题食宿/千古情晚会/三钻-五钻多档住宿·供君选择）赠价值150元藏家晚会（酥油茶、青稞酒、土火锅）+含去程动车费用+三环内包接~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="gtyinfo.html"><img src="images/b2.jpg" width="140"></a>
        <div> <a href="gtyinfo.html">九寨沟+成都3日2晚跟团游·3晚+去程动车票| 真纯玩0购物0自费4钻｜小团/旅拍/熊猫主题｜A线熊猫乐园/B线都江堰/C线峨眉乐山/D线达古冰川/E线四姑娘山/F线若尔盖草原，赠送百元川秀/升级/玩法任选|三环包接~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="zyinfo.html"><img src="images/b3.jpg" width="140"></a>
        <div> <a href="zyinfo.html">成都+九寨沟+黄龙风景名胜区4日3晚跟团游·全程入住优选4钻酒店+成都首尾自由活动+有限的时间只与美景相遇+高端真纯玩精选行程无猫腻+24小时免费接送机站让你的假期出行无忧+可选升级保姆车2+1座椅</a>
          <p></p>
        </div>
      </li>
      <li> <a href="gtyinfo.html"><img src="images/b4.jpg" width="140"></a>
        <div> <a href="gtyinfo.html">海南海口+三亚蜈支洲岛5日4晚跟团游·亲子出游升级海口五星*三亚连住海边不挪窝+蜈支洲岛畅游+浪漫雨林天堂公园+南山+打卡网红亚特兰蒂斯水世界+扬帆出海【爸妈·蜜月·亲子·闺蜜出游必选】24H在线管家服务~~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="zyinfo.html"><img src="images/b5.jpg" width="140"></a>
        <div> <a href="zyinfo.html">三亚+蜈支洲岛+亚龙湾5日4晚跟团游·【五•一特惠 高端出游行程】赠送好莱坞车技表演 0购物纯玩 单/双飞可选 全程五星度假酒店 4大5A热门景点 海南美食盛宴升级海鲜大餐+养生素斋 本土导游跟随讲解</a>
          <p></p>
        </div>
      </li>
    </ul>
  </div>
  <div class="rls" >
    <h2 class="bar">跟团游</h2>
    <ul>
      <li><img src="images/c1.jpg" width="100%">
        <p>贵州黄果树+梵净山+镇远+西江千户苗寨+荔波7...</p>
      </li>
      <li><img src="images/c2.png" width="100%">
        <p>海南三亚+蜈支洲岛6日5晚跟团游(5钻)·限时特惠...</p>
      </li>
      <li><img src="images/c3.jpg" width="100%">
        <p>成都+稻城亚丁4日3晚跟团游·稻城出发 【纯玩无购物...</p>
      </li>
    </ul>
  </div>
  <div style="clear:both"></div>
  <h2 class="bar">风光图片</h2>
  <ul class="imglist">
    <li><img src="images/f1.jpg"></li>
    <li><img src="images/f2.jpg"></li>
    <li><img src="images/f3.jpg"></li>
    <li><img src="images/f4.jpg"></li>
    
  </ul>
  <div style="clear:both"></div>
</div>
<div class="end">旅游网</div>
</body>
</html>

CSS样式代码🏡


/* CSS Document */
body{width:1200px; background-color:#fff; line-height:24px; font-size:13px; margin:0px auto; background:#C2E7FC}

.main{padding:20px; background:#FFFFFF}
.fls{float:left; width:220px; margin-right:30px; }
.mls{float:left; width:640px; margin-left:20px; }
.rls{float:right; width:200px;  }
a{ text-decoration:none;}
ul,li{list-style:none; margin:0; padding:0;}
.nav{ height:50px; background:#0066CC}
.nav li{ display:inline-block;  line-height:50px  }
.nav li a{color:#fff; font-size:18px; padding:10px 40px}

.end{ background:#0066CC; color:#fff; padding:11px 0;  text-align:center}
.c li{ box-shadow:0px 0px 15px #888888;margin-top:30px; height:350px; width:30%; margin:1.666%; float:left;}
.c li img{ max-width:100%; height:200px}
.c li p{ padding:0 20px}
.c a{ color:#000; font-size:16px;} 
.clear{ clear:both}
.dl2{ margin:0 auto; font-size:16px; background:url(../images/login.jpg) no-repeat; background-size:cover; padding:120px}
.dl2 input{ padding:5px 10px}
.dl2 span{ display:inline-block; width:100px; text-align:right; padding-right:15px;}
.dl2 div{ margin:10px 0}
.tit{ font-size:18px}
.txtlist li{ height:100px; background:#DCF3FA; padding:5px; margin-bottom:20px; font-size:14px; line-height:22px}
.txtlist li img{ width:120px; display:block; float:left; margin:0 20px 0 0 }
.txtlist li a{ color:#000}
.imglist li{ float:left; width:24%; padding:0.5%;}
.imglist li img{ width:100% ; height:200px}
.bar{ border-bottom:#ccc solid 1px; font-size:16px; padding-bottom:10px}
#banner {
	width: 100%;
	height: 450px;
	position: relative;
}

#banner ul#b_pic li {
	width: 100%;
	height: 450px;
	overflow: hidden;
	position: absolute;
	top: 0;
	display: none;
}

#banner ul#b_pic li img {
	width: 100%;
	height: 450px;
	display: block;
}

#banner ul#b_an {
	position: absolute;
	width: 100%;
	bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#banner ul#b_an li {
	width: 13px;
	height: 13px;
	background: #fff;
	margin: 0 3px;
	border-radius: 13px
}

.v{ background:#000}

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

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

七、实训总结😊

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