• web课程设计网页规划与设计 ：DW旅游主题网页设计——凤阳智慧旅游官方-地方旅游网站模板html源码HTML+CSS+JavaScript

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

    🏀 精彩专栏推荐👇🏻👇🏻👇🏻

    💝 【作者主页——🔥获取更多优质源码】
    💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

    文章目录🌰

    一、网站题目👨‍🎓

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

    二、网站描述✍️

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

    三、网站介绍📖

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

    网站程序方面：计划采用最新的网页编程语言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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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/jquery.js">script>
<script type="text/javascript" src="script/superslide.2.1.js">script>
head>
<body>

<div id="header">
  <div class="top">
    <div class="welcome">
      <div class="welleft">欢迎访问凤阳智慧旅游官方旗舰店！div>
      <div class="zhuce"><a href="#">登录a> / <a href="#">注册a>div>
    div>
    <div class="searchbox">
      <div class="logo"><a href="#" title="凤阳县旅游局"><img src="images/logo.jpg" />a>div>
      <div class="search">
        <input type="text" class="input1" value="请输入查询关键字"  onFocus="this.value='';" onBlur="if(this.value==''){this.value='请输入查询关键字';}"name="" /><input type="image" src="images/btn.jpg" class="btn" />
      div>
      <div class="tel"><img src="images/tel.jpg" />div>
    div>
  div>
  <div class="nav">
    <ul class="navmenu">
      <li><a href="index.html">网站首页a>li>
      <li><a href="列表页.htm">景点门票a>li>
      <li><a href="列表页.htm">酒店宾馆a>li>
      <li><a href="列表页.htm">农家乐a>li>
      <li><a href="列表页.htm">旅游商品a>li>
      <li><a href="列表页.htm">餐饮美食a>li>
      <li><a href="列表页.htm">旅游攻略a>li>
      <li class="login"><a href="个人资料.html">立即登录a>li>
    ul>
  div>
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>
<script type="text/javascript">
jQuery(".fullSlide").hover(function() {
    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
    jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
        var curLi = jQuery(".fullSlide .bd li").eq(i);
        if ( !! curLi.attr("_src")) {
            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
        }
    }
});
script>
<div id="container">
  
  <div class="column">
    <div class="title">
      <h1>景点门票h1>
    div>
    <ul class="list">
      <li class="li1"> <span class="jdpic"><a href="#"><img src="images/pic.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳明皇陵4晚6日自助游a>span>
        <div class="jdinfo"><span class="go">01人去过span><span class="price">￥209span>div>
      li>
      <li class="li2"> <span class="jdpic"><a href="#"><img src="images/pic1.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳韭山洞4晚6日自助游a>span>
        <div class="jdinfo"><span class="go">01人去过span><span class="price">￥209span>div>
      li>
      <li class="li3"> <span class="jdpic"><a href="#"><img src="images/pic2.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳明皇陵4晚6日自助游a>span>
        <div class="jdinfo"><span class="go">01人去过span><span class="price">￥209span>div>
      li>
      <li> <span class="jdpic"><a href="#"><img src="images/pic3.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳大排量4晚6日自助游a>span>
        <div class="jdinfo"><span class="go">01人去过span><span class="price">￥209span>div>
      li>
      <li class="li4"> <span class="jdpic"><a href="#"><img src="images/pic4.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳大水库4晚6日自助游a>span>
        <div class="jdinfo"><span class="go">01人去过span><span class="price">￥209span>div>
      li>
    ul>
  div>
  
  <div class="column">
    <div class="title1">
      <h1>酒店宾馆h1>
    div>
    <ul class="list">
      <li class="li1"> <span class="jdpic"><a href="#"><img src="images/pic5.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳帝城酒店a>span>
        <div class="jdinfo"><span class="zhu">01人住过span><span class="price">￥209span>div>
      li>
      <li class="li2"> <span class="jdpic"><a href="#"><img src="images/pic6.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">臻品酒店a>span>
        <div class="jdinfo"><span class="zhu">01人住过span><span class="price">￥209span>div>
      li>
      <li class="li3"> <span class="jdpic"><a href="#"><img src="images/pic7.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳国际大酒店a>span>
        <div class="jdinfo"><span class="zhu">01人住过span><span class="price">￥209span>div>
      li>
      <li> <span class="jdpic"><a href="#"><img src="images/pic8.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">凤阳大排量4晚6日自助游a>span>
        <div class="jdinfo"><span class="zhu">01人住过span><span class="price">￥209span>div>
      li>
      <li class="li4"> <span class="jdpic"><a href="#"><img src="images/pic9.jpg" width="224" height="148" />a>span> <span class="jdtext"><a href="#">臻品酒店a>span>
        <div class="jdinfo"><span class="zhu">01人住过span><span class="price">￥209span>div>
      li>
    ul>
  div>
  
  <div class="column">
    <div class="list1">
      <div class="title2">
        <h1>农家乐h1>
      div>
      <ul>
        <li class="jl1"><a href="#"><img src="images/pic11.jpg" width="193" height="310" /><span>森林公园门票span>a>li>
        <li class="jl2"><a href="#"><img src="images/pic12.jpg" width="247" height="145" /><span>森林公园门票span>a>li>
        <li class="jl3"><a href="#"><img src="images/pic13.jpg" width="217" height="145" /><span>森林公园门票span>a>li>
        <li class="jl4"><a href="#"><img src="images/pic13.jpg" width="217" height="145" /><span>森林公园门票span>a>li>
        <li class="jl5"><a href="#"><img src="images/pic12.jpg" width="247" height="145" /><span>森林公园门票span>a>li>
        <li class="jl6"><a href="#"><img src="images/pic11.jpg" width="193" height="310" /><span>森林公园门票span>a>li>
      ul>
    div>
    
    <div class="lygl">
      <div class="title3">
        <h1>旅游攻略h1>
      div>
      <img src="images/pic10.jpg" width="270" height="134" /><br />
      <p>中国最具价值文化(遗产)旅游目的地”推选活动由中国文物保护基金会、中国旅游报社和新华社手机电视台共同主办，旨在展示各级政府在文化遗产保护与旅游业发展实现良性互动取得的卓越成就，建历史文化和旅游价值的新景观、新线路……p>
      <p>凤阳历史文化厚重、旅游资源丰富独特，自然风光神奇秀美，红色文化灿烂辉煌，民俗文化丰富多彩……p>
    div>
  div>
  
  <div class="column">
    <div class="food">
      <div class="title4">
        <h1>美食h1>
      div>
      <ul class="list2">
        <li class="f1"> <a href="#"><img src="images/pic14.jpg" width="212" height="141" /><br />
          凤阳帝城美食a> li>
        <li class="f2"> <a href="#"><img src="images/pic15.jpg" width="212" height="141" /><br />
          凤阳帝城美食a> li>
        <li class="f3"> <a href="#"><img src="images/pic16.jpg" width="212" height="141" /><br />
          凤阳帝城美食a> li>
        <li class="f4"> <a href="#"><img src="images/pic17.jpg" width="212" height="141" /><br />
          凤阳帝城美食a> li>
      ul>
    div>
    
    <div class="zyx">
      <div class="title5">
        <h1>自由行h1>
      div>
      <ul>
        <li><span class="zyimg"><a href="#"><img src="images/pic18.jpg" width="107" height="55" />a>span><span class="zytext">中国最具价值文化(遗产)旅
          游由中国文物保护基金中国
          旅游报社性互……span>li>
        <li><span class="zyimg"><a href="#"><img src="images/pic19.jpg" width="107" height="55" />a>span><span class="zytext">中国最具价值文化(遗产)旅
          游由中国文物保护基金中国
          旅游报社性互……span>li>
        <li class="nobg"><span class="zyimg"><a href="#"><img src="images/pic20.jpg" width="107" height="55" />a>span><span class="zytext">中国最具价值文化(遗产)旅
          游由中国文物保护基金中国
          旅游报社性互……span>li>
      ul>
    div>
  div>
div>

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

    CSS样式代码🏡

    @charset "utf-8";
body,div,hr,blockquote,ul,ol,li,table,th,td,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,input,button,select,textarea,fieldset,legend{margin:0;padding:0}
body{font-size:12px;color:#333; background-color:#fff;font-family:Tahoma,Geneva,sans-serif,'宋体'; min-width:1200px;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
.clearfix{*zoom:1}
.clearfix:after{display:block;clear:both;content:".";visibility:hidden;height:0}
ul,ol{list-style:none}
fieldset,img{border:0}
address,cite,dfn,em,var{font-style:normal}
strong,.fcu{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
button,.fhand{cursor:pointer}
button,input,select,textarea{font-size:100%;}
html{zoom:expression(function(ele){ele.style.zoom="1";document.execCommand("BackgroundImageCache",false,true)}(this))}

.clear {margin:0px; padding:0px; clear:both;}
/* ----- Links ----- */
a {text-decoration:none; color:#666666;}
a:hover {text-decoration:none;color:#193d7c;}
.cl { zoom:1; float:right;}

/***引导页***/
.flash{ width:100%; height:800px; background:url(../images/yin.jpg) top center no-repeat;}
.biaoyu{ width:300px; height:30px; line-height:30px; color:#000; text-align:center; margin:0px auto; padding-top:185px; font-size:18px; font-family:"微软雅黑";}
.flash .item{ width:560px; height:43px; margin:25px auto;}
.flash li{ width:137px; height:43px; line-height:43px; font-size:24px; float:left; margin-left:48px; font-family:"微软雅黑"; text-align:center;}
.flash li a{ display:block; width:137px; line-height:43px; color:#ff0100; background:url(../images/ydicon.png) no-repeat;}
.flash li a:hover{ background:url(../images/ydh.png) no-repeat; color:#fff;}

/***头部***/
#header{ width:100%; height:196px; margin-bottom:5px;}
.top{ width:100%; height:143px; background:url(../images/topbg.jpg) repeat-x;}
.welcome{ width:1200px; height:30px; margin:0 auto;}
.welleft{ line-height:30px; font-size:12px; color:#9c9c9c; float:left;}
.zhuce{ float:right; line-height:30px; color:#9c9c9c;} .zhuce a{ color:#9c9c9c;}
.searchbox{ width:1200px; height:113px; margin:0 auto;} .logo{ float:left;}
.search{ width:427px; height:38px; margin-top:39px; margin-left:40px; float:left;} .tel{ float:right;}
.nav{ width:100%; height:53px; background:url(../images/nav.jpg) repeat-x;}
.navmenu{ width:1200px; height:53px; margin:0 auto; font-family:"微软雅黑";}
.navmenu li{ width:150px; height:48px; padding-top:5px; float:left; background:url(../images/navline.jpg) right center no-repeat; text-align:center; font-size:18px;}
.navmenu li a{ line-height:53px; color:#fff;} .navmenu li a:hover{ text-shadow:1px 2px 1px #000;}
.navmenu li.login{ background:url(../images/login.jpg) no-repeat;}

/***图片切换***/



    • 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

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

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

    七、实训总结😊

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

    八、更多干货🎁

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

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

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

  • 相关阅读:
    ORA-00600: internal error code, arguments
    Docker 启动alpine镜像中可执行程序文件遇到 not found
    Django快速入门
    每年AP考试报名时间是什么时候？
    MySQL安装与配置
    uniapp配置了pages.json 的 tabbar 国际化，小程序切换语言没有实时切换
    一辆公交车的故事
    树状数组略解
    Android 图表开源库调研及使用示例
    搞定面试官 - MySQL 中你知道如何计算一个索引的长度嘛？
  • 原文地址：https://blog.csdn.net/weixin__BJ050106/article/details/128170104