HTML5期末大作业:北京旅游网页设计制作(1页) 简单静态HTML网页作品 我的旅游网页作业成品 学生旅游网站模板

news2024/11/13 11:31:48

👨‍🎓学生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结构代码🧱

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>北京旅游</title>
  <link rel="stylesheet" type="text/css" href="css/yangshi.css">
 </head>
 <body>
	<div id="top">
		<div class="topnav">
		<p>

<a href="#">首页</a><a href="#"><span>北京</span></a><a href="#">上海</a><a href="#">九寨沟</a><a href="#">张家界</a><a href="#">桂林</a><a href="#">黄山</a><a href="#">湖南天门山</a><a href="#">浙江雁荡山</a><a href="#">河北野三坡</a><a href="#">凤凰</a><a href="#">乌镇</a>

		</p>
		</div>
		<div class="img">
			<p>中国著名景区 >> <span>wecome to beijing _( ゚Д゚)ノ</span></p>
			<div class="tup"></div>
		</div>
		<div class="wenzi">
			<ul>
				<li><img src="images/03line01.gif"><span>综合资讯</span></li>

				<li><a href="#">3月滑雪全天只需80元</a></li>
				<li><a href="#">北京女孩入围澳洲岛主50强</a></li>
				<li><a href="#">杭州旅游消费券北京人反应冷淡</a></li>
				<li><a href="#">坚决制止公款出国出境旅游</a></li>
				<li><a href="#">旅行社转包游客最高罚10万</a></li>
				<li><a href="#">春天踏青能除体内“热火”</a></li>
			</ul>
			<div class="subtup"></div>
				<ul>
					<li><a href="#">春游北京区县 春光各有早晚</a></li>
					<li><a href="#">人间四月天 北京春天赏花全攻</a></li>
					<li><a href="#">郊游踏青 把春天带回家</a></li>
				</ul>

		</div>
		<div class="r_con">
		<p><span><a href="#">more...>></a></span></p>
			<div class="icon">
				<ul>
					<li><img src="images/0302.jpg"><span><a href="#">八达岭长城</a></span><br> 
					时长:11:37<br> 类别:山水风光<br> 景点:八达岭</li>
					<li><img src="images/0303.jpg"><span><a href="#">京西旅游</a></span><br> 
					时长:08:41<br> 类别:山水风光<br> 景点:潭柘寺</li>
					<li><img src="images/0304.jpg"><span><a href="#">秋韵妙峰山</a></span><br> 
					时长:06:35<br> 类别:乡村旅游<br> 景点:妙峰山</li>
				</ul>
			</div>
		</div>
	</div>
		<div id="midicon">
			<div class="pic"><img src="images/03banner01.jpg"></div>
			<div class="midtext">
			<ul>
				<li>〖视频〗 <a href="#">八达岭长城</a></li>
				<li>〖推荐〗 <a href="#">紫禁城</a></li>
				<li>〖图片〗 <a href="#">北海公园</a></li>
			</ul>
			</div>
		</div>
	<div id="content">
		<div class="l_text">
			<div class="topc">
				<p><span>【重点景区】</span><br>
				<img src="images/0305.jpg"><span><a href="#">八达岭长城</a></span><br>
    万里长城是中华民族的象征和骄傲,也是世界上最宏伟的古代军事防御工程。八达岭长城是明代长城的精华,其地位之显要,名声远大,景色之壮观,是其他任何地段的长城所不能替代的...
				</p><br>
				<div class="sumnav">
				<table>
						<tr>
							<td><a href="#">八达岭长城</a></td>
							<td><a href="#">•岁暮天寒 八达岭上多感叹</a></td>
							<td><a href="#">游走八达岭长城</a></td>
							<td><a href="#">•北京市八达岭长城地图</a></td>
						</tr>
				</table>
				</div>
			</div>
			<div class="bmid">
				<div class="lmid"><img src="images/03title06.gif">
					<ul>
						<li><a href="#">3.15号,川藏北线+川藏南线到拉萨</a></li>
						<li><a href="#">花开的季节,出游寻梦九寨</a></li>
						<li><a href="#">最美的季节 到中国最美的乡村</a></li>
						<li><a href="#">云南罗平、坝美、元阳七天活动</a></li>
						<li><a href="#">贵州黔东南苗寨侗乡新春探访</a></li>
					</ul>
				</div>
				<div class="rmid"><img src="images/03title07.gif">
					<ul>
						<li><a href="#">京郊主要山区自驾游路线</a></li>
						<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="r_text">
				<div class="tmain">
					<p>【重点线路】</p>
					<ul>
						<li><a href="#">马来西亚:情迷绿中海四晚六天之旅
						</a><span>¥6880</span></li>
						<li><a href="#">海南旅游:海南、兴隆、三亚、南山纯玩五日游</a><span>¥3120</span></li>
						<li><a href="#">华东南京、苏州、杭州、无锡、上海+周庄双卧七日游</a><span>¥1560</span></li>
						<li><a href="#">昆明、大理、丽江、香格里拉双飞双卧八日游</a><span>¥3650</span></li>
						<li><a href="#">黄山、九龙瀑、婺源、庐山、九江双卧七日游</a><span>¥1975</span></li>
						<li><a href="#">成都、九寨沟、乐山、峨嵋山双飞七日游</a><span>¥9980</span></li>
					</ul>
				</div>
				<div class="bmain">
				<p>【特价酒店】</p>
					<ul>
						<li><a href="#">北京金泰绿洲大酒店(南站店) 三星级</a><span>131元/间</span></li>
						<li><a href="#">北京紫晨大酒店       三星级</a><span>140元/间</span></li>
						<li><a href="#">北京京港湾宾馆       三星级</a><span>167元/间</span></li>
						<li><a href="#">北京金泰海博大酒店     四星级</a><span>152元/间</span></li>
						<li><a href="#">北京珀丽酒店        四星级</a><span>280元/间</span></li>
						<li><a href="#">西苑饭店          五星级</a><span>300元/间</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="tfooter">

		<ul>
			<li><a href="#"><img src="images/0306.jpg"></a><a href="#">中国民兵武器装备</a></li>
			<li><a href="#"><img src="images/0307.jpg"></a><a href="#">居庸关长城</a></li>
			<li><a href="#"><img src="images/0308.jpg"></a><a href="#">石景山游乐园</a></li>
			<li><a href="#"><img src="images/0309.jpg"></a><a href="#">紫竹院公园</a></li>
			<li><a href="#"><img src="images/0310.jpg"></a><a href="#">中央广播电视塔</a></li>
		</ul>
	</div>
	<div id="friend">
		<p>友情链接:  张家界旅游网 | 九寨沟旅游网 | 黄山旅游网 | 桂林旅游网<p><br>
		<p>首 页 | 关于我们 | 联系方式 | 网上留言 | 网站地图 | </p><br>
		<p>sky  版权所有<img src="images/0311pic.gif"><img src="images/03top.gif"></p>
	</div>
 </body>
</html>




CSS样式代码🏡

*{margin:0px;padding:0px;}
body{width:960px;margin:0px auto;background:url("../images/03bg01.gif") repeat-x;}
#top{width:960px;}
#top .topnav{width:960px;height:31px;background:url("../images/03top_lead_bg.gif") repeat-x;}
#top .topnav p{text-align:center;line-height:31px;font-size:13px;font-family:"宋体";color:#fff;}
#top .topnav p span{font-weight:bold;}
#top .topnav p a{text-decoration:none;color:#fff;}
#top .topnav p a:hover{background: #543;}


#top .img{width:425px;height:300px;background:#fff;padding:1px;float:left;}
#top .img p{width:420px;height:38px;
background:url("../images/03title01.gif") no-repeat;margin:4px;
line-height:38px;padding-left:30px;font-size:15px;font-family:"宋体";color:#fff;}
#top .img p span{font-weight:bold;}
#top .img .tup{width:420px;height:250px;background:url("../images/0301.jpg");}


#top .wenzi{width:306px;height:300px;background:#eee;margin-top:3px;
margin-left:5px;float:left;}
#top .wenzi ul{margin-left:20px;color:#0c3;font-size:13px;}
#top .wenzi ul li{margin:7px;border-style:none none dashed;border-width:1px;
 border-color:#939;}
#top .wenzi ul li span{font-weight:bold;margin-left:3px;}
#top .wenzi ul li a{text-decoration:none;color:#c0f;}
#top .wenzi ul li a:hover{text-decoration:underline;}
#top .wenzi .subtup{width:282px;height:30px;background:url("../images/03title02.gif");}
#top .wenzi .subtup ul li{border-bottom-style:none;}

#top .r_con{width:215px;height:300px;background:#FFDEAD;float:right;padding:2px;}
#top .r_con p{width:210px;height:30px;background:url("../images/03title03.gif") no-repeat;}
#top .r_con p span{float:right;line-height:30px;margin-right:5px;}
#top .r_con p span a{text-decoration:none;color:#fff;}
#top .r_con p span a:hover{text-decoration:underline;color:#FFA500;}
#top .r_con .icon{width:200px;height:260px;margin:5px;}
#top .r_con .icon ul{}
#top .r_con .icon ul li{width:200px;height:80px;margin-bottom:5px;list-style-type:none;font-size:13px;padding:3px;color:#39c;}
#top .r_con .icon ul li span{font-weight:bold;valign:center;}
#top .r_con .icon ul li img{width:100px;height:74px;float:left;margin-right:3px;}
#top .r_con .icon ul li a{text-decoration:none;color:#f90;}
#top .r_con .icon ul li a:hover{text-decoration:underline;}



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

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


七、实训总结😊

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


八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/60546.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

gin 集成 Swagger

前言 一个好的项目工程&#xff0c;必然离不开一个好的 API 文档&#xff0c;如果要自己编写 API 文档&#xff0c;维护起来比较困难&#xff0c;而且难以保证一致性&#xff0c;因此我们要自动生成在线接口文档。 swaggo swagger 在 java 里面&#xff0c;是一个非常流行的…

后渗透之日志分析实验

目录 一、实验项目名称 二、实验目的 三、实验内容 四、实验环境 五、实验步骤 六、实验结果 七、实验总结 一、实验项目名称 后渗透之日志分析实验 二、实验目的 1.掌握meterpreter进行端口转发的方法 2.掌握网站日志的分析方法 三、实验内容 针对目标网站服务器…

AlphaFold2源码解析(7)--模型之Evoformer

AlphaFold2源码解析(7)–模型之Evoformer 这篇文章我们主要药讲解AlphaFold2的Evoformer的代码细节。 Evoformer Stack 该网络有一个双塔结构&#xff0c;在MSA堆栈中具有轴向的自我注意&#xff1b;在Pair堆栈中具有三角形的乘法更新和三角形的自我注意&#xff1b;以及外积…

Windows多线程编程

一、 实验内容或题目&#xff1a; 以多线程编程的方式完成&#xff1a; 1&#xff09;随机生成一个数组&#xff0c;求其平均值 2&#xff09;随机生成一个数组&#xff0c;求其最大值 3&#xff09;随机生成一个数组&#xff0c;求其最小值 二、 实验目的与要求&#xff1a;…

Kaggle Feedback Prize 3比赛总结:如何高效使用hidden states输出(2)

比赛链接&#xff1a;https://www.kaggle.com/competitions/feedback-prize-english-language-learning 在Kaggle Feedback Prize 3比赛总结&#xff1a;如何高效使用hidden states输出(2)中介绍了针对last layer hidden state的各种pooling的方法。 在利用Transformer类的预…

Vue学习:Hello小案例

使用Vue的目的&#xff1a;构建用户界面&#xff08;需要使用容器 摆放这个界面的内容&#xff09; favicon.ico:1 GET http://127.0.0.1:5500/favicon.ico 404 (Not Found) 没有页签图标 在者服务器中 http://127.0.0.1:5500没有/favicon.ico 强制刷新网页&#xff1a;s…

3大经典分布式存储算法

文章目录1、背景2、算法2.1 分布存储之哈希取余算法2.2 分布式存储之一致性哈希算法2.3 分布式存储之哈希槽算法1、背景 一个经典的面试题目&#xff1a;1&#xff5e;2亿条数据需要缓存&#xff0c;请问如何设计这个方案&#xff1f; 回答&#xff1a;单台单机肯定不可能&…

Musical Christmas Lights——一个圣诞树灯光✨随音乐节奏改变的前端开源项目

文章目录前言视频介绍项目截图项目地址项目源码以上就是本篇文章的全部内容&#xff0c;将你编写好的项目分享给你的朋友们或者那个TA吧&#xff01;制作不易&#xff0c;求个三连&#xff01;❤️ &#x1f4ac; ⭐️前言 今天博主在刷短视频时&#x1f610;&#xff0c;朋友推…

VMware 虚拟机系统 与 win10 共享文件夹问题的解决

环境描述 本地&#xff1a;Win10 64位 VMware Workstation Pro 16 虚拟机&#xff0c;安装的 ubuntu 20.04 文件夹共享 win10 与 虚拟机的 ubuntu 共享文件夹&#xff0c;之前低版本的 VMware &#xff0c;安装 VMware Tools&#xff0c;并且 win10 端设置好工作目录后&…

秒级使网站变灰,不改代码不上线,如何做到?

注意&#xff1a;文本不是讲如何将网站置灰的那个技术点&#xff0c;那个技术点之前汶川地震的时候说过。 本文不讲如何实现技术&#xff0c;而是讲如何在第一时间知道消息后&#xff0c;更快速的实现这个置灰需求的上线。 实现需求不是乐趣&#xff0c;指挥别人去实现需求才…

广域网技术——SR-MPLS隧道保护技术

目录 TI-LFA FRR保护技术 LFA FRR R-LFA FRR TI-LFA FRR Anycast FRR技术 Host-Standby技术 VPN FRR技术 SR-MPLS防微环技术 场景一 SR本地正切防微环 场景二 SR本地回切防微环 场景三 SR远端正切防微环 场景四 SR远端回切防微环 TI-LFA和防微环的对比 TI-LFA FRR…

41. set()函数:将可迭代对象转换为可变集合

41. set()函数&#xff1a;将可迭代对象转换为可变集合 文章目录41. set()函数&#xff1a;将可迭代对象转换为可变集合1. set( )函数的作用2. set( )函数的语法3. set函数创建空集合4. set函数的参数只能是可迭代对象4.1 将字符串转换为集合4.2 set( )函数的参数不能为整数4.3…

MIT 6.S081 Operating System Lecture8 (非常随意的笔记)

系列文章目录 文章目录系列文章目录Page FaultCOPY ON WRITEPage Fault eager allocation 通常&#xff0c;因为应用程序无法非常准确地估计自己要增加的内存有多少&#xff0c;所以通常申请的内存会比真实要使用的内存要多。 在XV6中&#xff0c;sbrk的实现默认是eager alloc…

基于粒子群算法优化的lssvm回归预测-附代码

基于粒子群算法优化的lssvm回归预测 - 附代码 文章目录基于粒子群算法优化的lssvm回归预测 - 附代码1.数据集2.lssvm模型3.基于粒子群算法优化的LSSVM4.测试结果5.Matlab代码摘要&#xff1a;为了提高最小二乘支持向量机&#xff08;lssvm&#xff09;的回归预测准确率&#xf…

【C++】stack/queue/list

文章目录注意事项1 emplace 与 push 的区别一、stack&#xff08;栈&#xff09;&#xff08;先进后出、【头部插入、删除】、不许遍历&#xff09;1 基本概念&#xff08;栈是自顶向下(top在下)&#xff0c;堆是向上&#xff09;2 stack 常用接口&#xff08;构造函数、赋值操…

[蓝牙 Mesh Zephyr]-[005]-Key

[蓝牙 Mesh & Zephyr]-[005]-Key 1. Keys Mesh Profile specification 定义了 2 种key&#xff1a;application keys &#xff08;AppKey&#xff09;和 network keys&#xff08;NetKey&#xff09;。AppKeys 用于保护 upper transport layer 的通信安全&#xff0c;Net…

如何手动添加NLTK data

一、问题描述 Python的自然语言处理库NLTK在安装之后需要下载一些data文件才能使用。官方比较推荐的方式是直接运行下载data的代码&#xff1a; import nltk nltk.download(punkt) 但是实际操作之后发现由于网络原因无法下载成功。 除了运行代码之外&#xff0c;官方还推荐…

分布式队列celery学习

说明&#xff1a;本文内容来自《python自动化运维快速入门》学习 一、介绍 Celery是由纯Python编写的&#xff0c;但协议可以用任何语言实现。目前&#xff0c;已有Ruby实现的RCelery、Node.js实现的node-celery及一个PHP客户端&#xff0c;语言互通也可以通过using webhooks…

[附源码]JAVA毕业设计客户台账管理(系统+LW)

[附源码]JAVA毕业设计客户台账管理&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&…

Activiti7工作流(二)

流程定义相关 流程定义查询 查询流程相关信息&#xff0c;包含流程定义&#xff0c;流程部署&#xff0c;流程定义版本 Test public void testDefinitionQuery(){//创建ProcessEngine对象ProcessEngine processEngine ProcessEngines.getDefaultProcessEngine();//获取仓库…