web前端设计与开发期末作品用DIV CSS技术设计的凤阳旅游网站（web前端网页制作课作业）html css javascript

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

文章目录🌰

网页题目👨‍🎓
网页描述✍️
网站效果🌐
- HTML结构代码🧱
更多干货🎁

网页题目👨‍🎓

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

网页描述✍️

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

网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述

HTML结构代码🧱



<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>凤阳县旅游局title>
<meta name="keywords" content="凤阳县旅游局 " />
<meta name="description" content="凤阳县旅游局 " />
<link href="css/whir_css.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="script/superslide.2.1.js">script>
<script type="text/javascript" src="script/column.js">script>
<script type="text/javascript" src="script/min_contentslider.js">script>
head>
<body>

<div id="header">
  <div class="top">
    <div class="time">
      
    div>
    <div class="weather">
      <iframe width="450" scrolling="no" height="18" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=1&color=%23555555&icon=3&py=fengyang&wind=0&num=1">iframe>
    div>
    <div class="tnav"><a href="#">政务网a>|<a href="#">官方旗舰店a>div>
  div>
  <div class="nav">
    <div class="navmenu">
      <div class="logo"><a href="index.html"><img src="images/logo.jpg" width="190" height="70" />a>div>
      <ul>
        <li><a href="凤阳概况.html">凤阳概况a>li>
        <li><a href="资讯信息.html"  class="on">资讯信息a>li>
        <li><a href="人文凤阳.html">人文凤阳a>li>
        <li><a href="畅游服务.html">畅游凤阳a>li>
        <li><a href="玩转凤阳.html">玩转凤阳a>li>
        <li><a href="主题线路.html">主题线路a>li>
        <li><a href="旅游攻略.html">旅游攻略a>li>
        <li><a href="出行服务.html">出行服务a>li>
        <li><a href="#">视频欣赏a>li>
      ul>
    div>
  div>
div>
<div class="clear">div>
<div class="fullSlide">
  <div class="bd">
    <ul>
      <li _src="url(images/banner.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="#">a>li>
      <li _src="url(images/banner.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="#">a>li>
      <li _src="url(images/banner.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="#">a>li>
      <li _src="url(images/banner.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="#">a>li>
      <li _src="url(images/banner.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="#">a>li>
    ul>
  div>
  <div class="hd">
    <ul>
    ul>
  div>
  <span class="prev">span> <span class="next">span> div>


<div id="container">
  <div class="con">
    
    <div class="active">
      <div class="title">
        <h1>精彩活动h1>
      div>
      <div class="picshow">
	  <DIV class=syFocusThumb>
          <DIV id=syFocusThumb class=sliderwrapper>
            <DIV class=contentdiv>
              <DIV class=dPic><A href="#" 
target=_blank><IMG  src="images/2_1.jpg" width=419 
height=319>A>DIV>
            DIV>
            <DIV class=contentdiv>
              <DIV class=dPic><A href="#" 
target=_blank><IMG  src="images/60x200.jpg" 
width=419 
height=319>A>DIV>
            DIV>
            <DIV class=contentdiv>
              <DIV class=dPic><A href="#" 
target=_blank><IMG  src="images/2_1.jpg" width=419 
height=319>A>DIV>
            DIV>
            <DIV class=contentdiv>
              <DIV class=dPic><A href="#" 
target=_blank><IMG  src="images/350-200_2.jpg" width=419 
height=319>A>DIV>
            DIV>
            <DIV class=contentdiv>
              <DIV class=dPic><A 
href="#" 
target=_blank><IMG  src="images/emnb350.jpg" 
width=419 
height=319>A>DIV>
            DIV>
          DIV>
          <DIV id=paginate-syFocusThumb class=pagination><I id=prev class=prev 
title=上一幅>I>
            <DIV class=thumbWrap>
              <DIV class=holder><I class=toc><A 
href="#" target=_blank><IMG  src="images/2_1.jpg" width=92 height=67>A>I> <I 
class=toc><A href="#" 
target=_blank><IMG src="images/60x200.jpg" 
width=92 height=67>A>I> <I class=toc><A 
href="#" target=_blank><IMG  src="images/2_1.jpg" width=92 height=67>A>I> <I 
class=toc><A href="#" 
target=_blank><IMG src="images/350-200_2.jpg" width=92 height=67>A>I> <I class=toc><A 
href="#" 
target=_blank><IMG src="images/123.jpg" width=92 height=67>A>I> DIV>
            DIV>
            <I id=next class=next title=下一幅>I>DIV>
          
        DIV>
	  div>
    div>
    
    <div class="zixun">
      <div class="title">
        <h1>旅游资讯h1>
      div>
      <ul class="list">
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
        <li><span>2015-1-16span><a href="#">凤阳县旅游局开展国庆节前旅游安全生产联合检查工作a>li>
      ul>
      <ul class="list1">
        <li class="li1"><a href="#"><img src="images/pic1.jpg" /><span>小长假旅游接待情况span>a>li>
        <li class="li2"><a href="#"><img src="images/pic2.jpg" /><span>小岗村span>a>li>
        <li class="li3"><a href="#"><img src="images/pic3.jpg" /><span>明皇陵span>a>li>
      ul>
    div>
    
    <div class="cxfw">
      <div class="title">
        <h1>出行服务h1>
      div>
      <ul>
        <li class="cx1"><a href="#">旅游企业a>li>
        <li class="cx2"><a href="#">景区名录a>li>
        <li class="cx3"><a href="#">旅行社名录a>li>
        <li class="cx4"><a href="#">酒店宾馆a>li>
        <li class="cx5"><a href="#">星级农家乐a>li>
        <li class="cx6"><a href="#">凤阳旅游地图a>li>
        <li class="cx7"><a href="#">投诉留言a>li>
        <li class="cx8"><a href="#">天气预报a>li>
      ul>
    div>
  div>
  
  <div class="con1">
    <div class="culture">
      <div class="rwfy">
        <h1>人文凤阳h1>
        <ul class="list2">
          <li class="rw1"><a href="#">凤阳新貌a>li>
          <li class="rw2"><a href="#">改革之乡a>li>
          <li class="rw1"><a href="#">民风民俗a>li>
          <li class="rw2"><a href="#">玻璃之城a>li>
          <li class="rw1"><a href="#">帝王之乡a>li>
          <li class="rw2"><a href="#">民间文学艺术之乡a>li>
          <li class="rw1"><a href="#">花鼓之乡a>li>
        ul>
      div>
      
      <div class="fygk">
        <div class="xiang">
          <div class="column">
            <div class="title1"><a href="#">更多>a>
              <h1>帝王之乡h1>
            div>
            <div class="xcon">
              <div class="ximg"><a href="#"><img src="images/dwzx.jpg" width="118" height="78" />a>div>
              <ul>
                <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="column" style="float:right">
            <div class="title1"><a href="#">更多>a>
              <h1>花鼓之乡h1>
            div>
            <div class="xcon">
              <div class="ximg"><a href="#"><img src="images/hgzx.jpg" width="118" height="78" />a>div>
              <ul>
                <li>·<a href="#">凤阳朱元璋研究a>li>
                <li>·<a href="#">大明皇陵之碑a>li>
                <li>·<a href="#">楹联诗词a>li>
                <li>·<a href="#">研究指南a>li>
              ul>
            div>
          div>
        div>
        
        <div class="fyxm">
          <div class="title1"><a href="#">更多>a>
            <h1>凤阳新貌h1>
          div>
          <div class="fycon"> <img src="images/xm.jpg" width="117" height="78" align="left" />凤阳地处安徽省东北部，淮河中游南岸，总面积1949.5平方公里，人口74万。大自然的厚爱，馈赠给凤阳一方名山胜水，孕育了内涵厚重的淮河文化，哺育了一代农民皇帝朱元璋，造就了“敢为天下先”的小岗人，凤阳也因此以“帝王之乡”、“花鼓之乡”、“改革之乡”、“石英之乡”、“曲艺之乡”和“xx民间文化艺术之乡”享誉海内外。 div>
        div>
      div>
      <div class="rightcon">
        <div class="column" style="border-bottom:1px solid #d8d8d8;">
          <div class="title1"><a href="#">更多>a>
            <h1>改革之乡h1>
          div>
          <div class="xcon">
            <div class="ximg"><a href="#"><img src="images/gg.jpg" width="118" height="78" />a>div>
            <ul>
              <li>·<a href="#">合作化的带头人-陈学孟a>li>
              <li>·<a href="#">毛泽东与城西乡a>li>
              <li>·<a href="#">xx农村改革“大包干”a>li>
              <li>·<a href="#">合作化的带头人-陈学孟a>li>
            ul>
          div>
        div>
        <div class="column" style="margin-top:20px;">
          <div class="title1"><a href="#">更多>a>
            <h1>民间文化艺术之乡h1>
          div>
          <div class="xcon">
            <div class="ximg"><a href="#"><img src="images/dwzx.jpg" width="118" height="78" />a>div>
            <ul>
              <li>·<a href="#">凤阳朱元璋研究a>li>
              <li>·<a href="#">大明皇陵之碑a>li>
              <li>·<a href="#">楹联诗词a>li>
              <li>·<a href="#">研究指南a>li>
            ul>
          div>
        div>
      div>
    div>
  div>
  
  <div class="con2">
    <div class="cyfy">
      
      <div class="cyleft">
        <h1>畅游凤阳h1>
        <ul class="list4">
          <li class="rw1"><a href="#">狼巷迷谷景区a>li>
          <li class="rw2"><a href="#">韭山洞景区a>li>
          <li class="rw1"><a href="#">小岗村景区a>li>
          <li class="rw2"><a href="#">鼓楼景区a>li>
          <li class="rw1"><a href="#">明皇陵景区a>li>
          <li class="rw2"><a href="#">龙兴寺a>li>
          <li class="rw1"><a href="#">明中都皇城遗址a>li>
          <li class="rw2"><a href="#">卧牛湖a>li>
        ul>
      div>
      <ul class="list3">
        <li class="cy1"><a href="#"><img src="images/cy1.jpg" width="479" height="336" /><span>明皇陵景区span>a>li>
        <li class="cy2"><a href="#"><img src="images/cy2.jpg" width="227" height="160"/><span>狼巷迷谷景区span>a>li>
        <li class="cy3"><a href="#"><img src="images/cy3.jpg" width="227" height="160"/><span>小岗村景区span>a>li>
        <li class="cy4"><a href="#"><img src="images/cy4.jpg" width="227" height="160"/><span>明中都皇城遗址span>a>li>
        <li class="cy5"><a href="#"><img src="images/cy5.jpg" width="227" height="160"/><span>韭山洞景区span>a>li>
      ul>
    div>
  div>
  
  <div class="con3">
    <div class="ztxl">
      <div class="ztleft">
        <h1>主题线路h1>
        <ul class="list4">
          <li class="rw1"><a href="#">经典线路a>li>
          <li class="rw2"><a href="#">研学之旅a>li>
          <li class="rw1"><a href="#">自然之旅a>li>
          <li class="rw2"><a href="#">红色之旅a>li>
          <li class="rw1"><a href="#">文化之旅a>li>
        ul>
      div>
      <ul class="list5">
        <li class="xl1">
          <div class="imgteaser"><a href="#"><img src="images/xl1.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
span>a>div>
          <div class="titles"><a href="#">经典线路a>div>
        li>
        <li class="xl2">
          <div class="imgteaser"><a href="#"><img src="images/xl2.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
span>a>div>
          <div class="titles"><a href="#">经典线路a>div>
        li>
        <li class="xl3">
          <div class="imgteaser"><a href="#"><img src="images/xl3.jpg" width="480" height="372"/><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
span>a>div>
          <div class="titles"><a href="#">经典线路a>div>
        li>
        <li class="xl4">
          <div class="imgteaser"><a href="#"><img src="images/xl4.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
span>a>div>
          <div class="titles"><a href="#">经典线路a>div>
        li>
        <li class="xl5">
          <div class="imgteaser"><a href="#"><img src="images/xl5.jpg" width="227" height="160" /><span class="lxhover">
自驾车外出难免会出现一些故障。假如行驶中出现故障或有故障而暂时无零配件供应又需急用的情况，我们不得不采取一些应急的修理方法。效站！
span>a>div>
          <div class="titles"><a href="#">经典线路a>div>
        li>
      ul>
    div>
  div>
  
  <div class="wancon">
    <div class="wan">
      <div class="wzleft">
        <h1>玩转凤阳h1>
        <ul class="list4">
          <li class="rw1"><a href="#">吃在凤阳a>li>
          <li class="rw2"><a href="#">游在凤阳a>li>
          <li class="rw1"><a href="#">住在凤阳a>li>
          <li class="rw2"><a href="#">购在凤阳a>li>
          <li class="rw1"><a href="#">行在凤阳a>li>
          <li class="rw2"><a href="#">旅在凤阳a>li>
        ul>
      div>
      <div class="wzright">
        <div class="title2">
          <h1 class="hover" id="one1" onmouseover="setTab('one',1,6)">吃在凤阳h1>
          <h1 id="one2" onmouseover="setTab('one',2,6)">游在凤阳h1>
          <h1 id="one3" onmouseover="setTab('one',3,6)">住在凤阳h1>
          <h1 id="one4" onmouseover="setTab('one',4,6)">购在凤阳h1>
          <h1 id="one5" onmouseover="setTab('one',5,6)">行在凤阳h1>
          <h1 id="one6" onmouseover="setTab('one',6,6)">旅在凤阳h1>
        div>
        <div class="clear">div>
        <div class="wzcon" id="con_one_1">
          <div class="msjj"> <span class="msimg"><img src="images/ms.jpg" width="226" height="158" />span> <span class="mstitle"><a href="#">凤阳美食简介a>span>
            <p>凤阳因居淮河中游，饮食以咸辣为主，兼具淮扬菜的“炖、焖、烧、焐”的烹调方法，讲究“原汁原味，一物一性，百菜百味”的特点。凤阳是朱元璋的的家乡...p>
          div>
          <div class="column1">
            <div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" />span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）a>span>div>
            <div class="xgjj">御膳豆腐又名“酿豆腐”，是凤阳传统名菜。相会是明朝初期一位凤阳姓黄的厨师创造出来的，至今已有六百多年历史。明初，凤阳每年把“酿豆腐...div>
          div>
          <div class="column1" style="float:right;">
            <div class="xgimg"> <span class="picimg"><img src="images/msimg.jpg" width="184" height="128" />span> <span class="xgtitle"><a href="#">御膳豆腐 （酿豆腐）a>span>div>

script>
    
  div>
  <div class="fnav"><a href="#">关于我们a>|<a href="#">免责条款a>|<a href="#">加入收藏a>|<a href="#">设为首页a>div>
  <div class="copyright">版权所有：凤阳县旅游局 电话：0550-6629038 地址：凤阳县东华路109号 邮编：233100 邮箱：fyx_lyj@163.com<br />
    皖ICP备07501184号 Designed by <a href="#">samxinneta>div>
div>
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
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

web前端设计与开发期末作品 用DIV CSS技术设计的凤阳旅游网站（web前端网页制作课作业）html css javascript