关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店计划出行网站设计

👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- 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>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>中国旅游title>
head>
<body>
<header class="head">
  <div> <img src="images/logo.png"> <span class="bda"> <a href="zhuce.html">注册a> |  <a href="denglu.html">登录a> span>div>
header>
<nav class="menu">
  <ul class="center">
    <li><a href="index.html">网站首页a>li>
    <li><a href="sichuan.html">四川旅游 a>li>
    <li><a href="yunnan.html"> 云南旅游 a>li>
    <li><a href="xizang.html">西藏旅游a>li>
    <li><a href="tuijie.html">推荐旅游a>li>
  ul>
nav>
<div class="content">
  <marquee>
  欢迎来到中国旅游，开启新的旅程吧！
  marquee>
  <div class="banner">
    <div class="banner_box  ">
      <div class="box-1">
        <ul>
          <li><img src="images/banner1.jpg">img>li>
          <li><img src="images/banner2.jpg">img>li>
          <li><img src="images/banner3.jpg">img>li>
          <li><img src="images/banner4.jpg">img>li>
          <li><img src="images/banner5.jpg">img>li>
        ul>
      div>
      <div class="box-2">
        <ul>
        ul>
      div>
    div>
  div>
div>
<div class="content">
  <div class="clear">div>
  <div class="bar"><strong>热门景区strong> div>
  <div class="pics scrollleft">
    <ul>
      <li> <b><img src="images/a1.jpg" />b>
        <h3><a href="info.html">故宫博物馆a>h3>
        <p> 北京故宫博物院建立于1925年10月10日，位于故宫博物院北京故宫即紫禁城内。是在明朝、清朝两代皇宫及其收藏的基础上建立起来的中国综合性博物馆，也是中国最大的古代文化艺术博物馆。 p>
      li>
      <li> <b><img src="images/a2.jpg" />b>
        <h3><a href="info.html">颐和园a>h3>
        <p>　颐和园位于中国北京市西北海淀区，占地290公顷（合4400亩），是一座巨大的皇家园林和清朝的行宫。修建于清朝乾隆年间、重建于光绪年间，曾属于清朝北京西郊三山五园之一。p>
      li>
      <li> <b><img src="images/a3.jpg" />b>
        <h3><a href="info.html">平遥古城a>h3>
        <p> 位于山西中部平遥县内，是一座具有2700多年历史的文化名城，与同为第二批国家历史文化名城的四川阆中、云南丽江、安徽歙县并称为“保存最为完好的四大古城”p>
      li>
      <li> <b><img src="images/a4.jpg" />b>
        <h3><a href="info.html">长白山a>h3>
        <p> 长白山犹如一条鳞光闪烁的巨龙，巍峨磅礴，横卧天际。是我国与五岳齐名、名光秀丽、景色迷人的关东第一山，因其主峰白头山多白色浮石与积雪而得名，素有"千年积雪为年松，直上人间第一峰"的美誉。p>
      li>
      <li> <b><img src="images/a5.jpg" />b>
        <h3><a href="info.html">庐山a>h3>
        <p> 庐山以雄、奇、险、秀闻名于世，素有“匡庐奇秀甲天下”之美誉。巍峨挺拔的青峰秀峦、喷雪鸣雷的银泉飞瀑、瞬息万变的云海奇观、俊奇巧秀的园林建筑，一展庐山的无穷魅力。p>
      li>
      <li> <b><img src="images/a6.jpeg" />b>
        <h3><a href="info.html">五台山 a>h3>
        <p> 中国佛教及旅游胜地之一。与四川峨嵋山、安徽九华山、浙江普陀山共称“中国佛教四大名山”。与尼泊尔蓝毗尼花园、印度鹿野苑、菩提伽耶、拘尸那迦并称为世界五大佛教圣地p>
      li>
    ul>
  div>
  <div class="clear">div>
  <div class="ad"><img src="images/ad.jpg" width="100%">div>
  <div class="bar"><strong>摄影美图 strong>div>
  <div id="div1">
    <ul id="ul">
      <li class="li"><img src="images/1.jpg">li>
      <li class="li"><img src="images/2.jpg">li>
      <li class="li"><img src="images/3.jpg">li>
      <li class="li"><img src="images/4.jpg">li>
      <li class="li"><img src="images/5.jpg">li>
      <li class="li"><img src="images/6.jpg">li>
      <li class="li"><img src="images/7.jpg">li>
      <li class="li"><img src="images/8.jpg">li>
      <li class="li"><img src="images/9.jpg">li>
    ul>
  div>
  <div class="clear">div>
div>
<footer class="end">
  <p>xxx版权所有p>
  <p>本地时间：<span id="localtime"><font color="#000000">2021-12-11 16:17:22  星期六font>span>p>
footer>
<script type="text/javascript" src="js/js.js">script>
<script type="text/javascript" src="js/gundong.js">script>
<script type="text/javascript" src="js/time.js">script>
body>
html>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

CSS样式代码🏡

@charset "utf-8";

/* CSS Document */

ul,
li,
h1,
h2,
h3,
p {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none
}

body {
    background: #fff;
    margin: 0;
    line-height: 21px;
}

.head img {
    height: 80px;
}
.head .bda{ float:right; margin-top:30px;}
.head .bda a{ background:#99CC66; padding:5px 10px; margin:10px}
.clear {
    clear: both
}

.menu li {
    list-style: none
}

.banner {
    position: relative;
    clear: both
}

img {
    max-width: 100%;
}

.div1 img {}

.head div {
    width: 1000px;
    margin: 0 auto
}

.head {
    padding: 10px 0;
    background: #fff;
}

.head h2 {
    color: #105ae1;
    font-size: 36px
}

.menu {
    width: 100%;
    border-bottom: #a7f7a5 solid 3px;
    margin-bottom: 10px;
    float: left;
    text-align: center;
    background: rgb(168, 240, 250)
}

.menu ul {
    width: 1000px;
    margin: 0 auto
}

.menu li a {
    color: rgb(0, 0, 0);
    font-size: 18px;
	display:block;
    font-weight: bold;
}

.menu li  {
    float: left;
    width: 20%;
    text-align: center;
    padding: 10px 0
}
.menu li:hover{ background:#FF9966}
.right {
    float: right;
    width: 250px;

	background:#FBEBCC;
    
    padding:30px 15px ;
    margin-top: 30px;
}

.right ul a {
    color: #333;
}

.left1 {
    min-height: 300px;
    float: left;
    width: 1100px;
    padding: 20px 0;
}
.left {
    min-height: 300px;
    float: left;
    width: 680px;
    padding: 20px 0;
}
.content {
    background: #fff;
    width: 1000px;
    margin: 0 auto;
    font-size: 14px;
}

.div1 {
    width: 730px;
    float: left
}

.div2 {
    width: 252px;
    float: right
}

.div2 .m2 {
    margin-top: 19px
}

.end {
    clear: both;
    border-top: #c0f7a1 solid 2px;
    margin-top: 20px;
    padding: 30px 0;
    text-align: center;
}

.produce img {
    float: left;
    margin: 0 20px 20px 0
}

.produce {
    width: 33.3%;
    float: left
}

.pad {
    padding: 20px;
    display: block
}
.center1{width:100%;}
.div-left{ float:left; width:480px; height:350px; margin-right:40px; }
.div-right{ float:left; width:480px; height:350px;}
.top1{ width:440px; height:30px; background:#D6FFAC; padding:20px;}
.bottom1{ width:100%;}
.bottom2{ width:100%; padding:20px; font-size:16px;}
.bottom2 li{ margin:10px; }
.bottom2 a{ color:#000; }
.dibu{ width:100%; margin-top:20px;}
.dibutop{ font-size:16px; padding:20px; background:#D6FFAC; height:30px; margin-bottom:10px;}
.dibu img:hover{transform:scale(1.1);}
.dibu  img {
    object-fit: cover;
	transition:all 0.5s ease-out;
	position:relative;
}
.zhongshang{width:100%; height:200px; }
.heng{ width:15px; height:50px; background:#D6FFAC; float:left;}
.zhongshang h2{ font-weight:bold; color:#000; padding:10px; padding-left:30px;}
.zhongshang p{ margin:20px; margin-left:-2px}
.zhongshang img{ float:left; width:23%; margin-top:20px; margin-left:10px; height:150px;object-fit: cover;
	transition:all 0.5s ease-out;
	position:relative;}
.zhongshang img:hover{transform:scale(1.1);}
.zhongzhong{ text-align:center;}
.zhongzhong p{ text-indent:2em; font-size:14px !important;color:#000 !important; margin:10px;}
.zhongzhong li b{ display:block; overflow:hidden}
.pics li {
    width: 312px;
	margin:15px;
    list-style: none;
	float:left;
}
.pics li h3 {
    padding: 10px 0;
}
.pics li p {
}
.pics ul {
    margin: 0 -15px
}

.pics li h3 a {
    color: #333;
    font-size: 18px;
}

.pics li h3 a:hover {
    color: #990000
}
.pics li b{ display:block; overflow:hidden}
.pics li:hover img{transform:scale(1.2);}
.pics li {
    min-height: 350px;
}
.pics li img {
    height: 220px;
	display:block;
    width: 100%;
    object-fit: cover;
	transition:all 0.5s ease-out;
}
.pics2 li {
    width: 312px;
	margin:15px;
    list-style: none;
	float:left;
}
.pics2 li h3 {
    padding: 10px 0;
}
.pics2 li p {
}
.pics2 ul {
    margin: 0 -15px
}

.pics2 li h3 a {
    color: #333;
    font-size: 18px;
}

.pics2 li h3 a:hover {
    color: #990000
}
.pics2 li b{ display:block; overflow:hidden}
.pics2 img:hover{transform:scale(1.2);}
.pics2 li {
    min-height: 350px;
}
.pics2 li img {
    height: 220px;
	display:block;
    width: 100%;
    object-fit: cover;
	transition:all 0.5s ease-out;
}
.imglist li {
    list-style: none;
    float: left;
    width: 220px;
    margin: 10px;
    text-align: center
}




.right ul {
    margin-left: 20px;
    line-height: 30px
}

.ff1 {
    float: left;
    width: 50%
}

.ss {
    margin: 30px 20px
}

form {
    float: left;
    display: block;
    width: 90%;
    position: relative;
}
.msg>div .fl{ width:150px}
.banner_con {
	margin: 20px 0;
}
.banner_box {
	height: 560px;
	overflow: hidden;
	position: relative;
}
.box-1 ul {
}
.box-1 ul li {
	width: 100%;
	height: 560px;
	position: relative;
	overflow: hidden;
}
.box-1 ul li img {
	display: block;
	width: 100%;
	object-fit: cover;
	height: 100%;
}
.box-1 ul li h2 {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40px;
	width: 100%;
	background: rgba(125,125,120,.4);
	text-indent: 2em;
	padding-right: 500px;
	font-size: 15px;
	line-height: 40px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: normal;
	color: ghostwhite
}
.box-2 {
	position: absolute;
	right: 10px;
	bottom: 14px;
}
.box-2 ul li {
	float: left;
	width: 12px;
	height: 12px;
	overflow: hidden;
	margin: 0 5px;
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
	text-indent: 100px;
	cursor: pointer;
}
.box-2 ul .on {
	background: rgba(255,255,255,0.6);
}
.box-3 span {
	position: absolute;
	color: rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.1);
	width: 50px;
	height: 80px;
	top: 50%;
	font-family: "宋体";
	line-height: 80px;
	font-size: 60px;
	margin-top: -40px;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
}
.box-3 .prev {
	left: 10px;
}
.box-3 .next {
	right: 10px;
}
.box-3 span::selection {
	background: transparent;
}
.box-3 span:hover {
	background: rgba(255,255,255,.5);
	color: rgba(255,255,255,1)
}

#div1
{
    position: relative;
    margin: 10px auto;
  
    width: 100%;
    height:200px;
    overflow: hidden;
}
#div1 ul
{
    position: absolute;
    left:0;
}
#div1 ul li
{
    float:left;
    padding: 10px;
    list-style: none;
    width: 200px;
    height: 200px;
}
#div1 ul li img
{
    width: 200px;
    height: 200px;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

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

相关阅读:
双版本数据加载的系统设计
 redis悲观锁和乐观锁
 多svn仓库一键更新脚本分享
 Qt QSS中 background-image，border-image，以及image属性差别
 webpack、vue.config.js
GAN实现mnist生成
 数据结构概述
 postman做接口自动化测试
 分布式光伏站远程监控组网方案
 ArcgisForJS如何在线编辑ArcGIS Server发布的几何要素？
原文地址：https://blog.csdn.net/weixin_BJ050106/article/details/128214260

关于城市旅游的HTML网页设计——中国旅游HTML+CSS+JavaScript 出游旅游主题度假酒店 计划出行网站设计