• 旅游住宿酒店14页


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


    网页题目👨‍🎓

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


    网页描述✍️

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


    网站效果🌐

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

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


    HTML结构代码🧱

    
    <html>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>旅游住宿农家乐类()title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="order by dede58.com" />
    <link href="style/style.css"  rel="stylesheet">
    
    <script src="js/jquery.superslide.2.1.1.js" >script>
    <script src="js/search.js" >script>
    <script src="js/nav.js" >script>
    <script src="js/jqselect.js" >script>
    <script src="js/jquery.validator.js" >script>
    <script src="js/zh_cn.js" >script>
    <script src="js/mobile.js" >script>
    <meta http-equiv="mobile-agent" content="format=xhtml;url=index.php.htm" >
    
    head>
    <body>
    
    
    
    <div class="top_bg">
      <div class="top"> <a href="index.htm"  title="旅游住宿农家乐类()" class="logo"> <img src="images/logo.png"  alt="旅游住宿农家乐类()">a>
        <div class="toptel">
          <div class="tel">服务热线:<span>+86-0000-96877span>div>
        div>
      div>
    div>
     
    
    
    <div class="nav_bg">
      <ul class="nav">
        <li><a title="网站首页" href="index.htm"  >网站首页a> li>
        <li><a title="景点介绍" href="index-1.htm" >景点介绍a>
          <dl>
            
          dl>
        li><li><a title="客房展示" href="index-2.htm" >客房展示a>
          <dl>
            
            <dd><a title="标准间" href="index-3.htm" >标准间a>dd>
            
            <dd><a title="多人间" href="index-4.htm" >多人间a>dd>
            
            <dd><a title="双人间" href="index-5.htm" >双人间a>dd>
            
            <dd><a title="商务间" href="index-6.htm" >商务间a>dd>
            
          dl>
        li><li><a title="景点新闻" href="index-7.htm" >景点新闻a>
          <dl>
            
          dl>
        li><li><a title="路线推荐" href="index-8.htm" >路线推荐a>
          <dl>
            
          dl>
        li><li><a title="农家大院" href="index-9.htm" >农家大院a>
          <dl>
            
          dl>
        li><li><a title="特色美食" href="index-10.htm" >特色美食a>
          <dl>
            
          dl>
        li><li><a title="活动专题" href="index-11.htm" >活动专题a>
          <dl>
            
          dl>
        li><li><a title="在线留言" href="index-12.htm" >在线留言a>
          <dl>
            
          dl>
        li><li><a title="xx我们" href="index-13.htm" >xx我们a>
          <dl>
            
          dl>
        li>
      ul>
    div>
    
    
    <div class="banner">
      <div class="banner_top">div>
      
      <div id="slideBox" class="slideBox">
        <div class="bd">
          <ul>
            <li style="background: url(images/banner1.jpg) center center no-repeat;"><a href="#"><img src="images/no.gif" />a>li>
            <li style="background: url(images/banner1.jpg) center center no-repeat;"><a href="#"><img src="images/no.gif" />a>li>
          ul>
        div>
        <div class="hd">
          <ul>
            <li>li>
            <li>li>
          ul>
        div>
        <a href="javascript:void(0)" class="prev">a> <a href="javascript:void(0)" class="next">a> div>
       
       
    div>
    <div class="marquee_box">
      <div class="marquee_bg">
        <div class="marquee_center"> 
          
          <div class="mar_left">
            <p>站内公告:p>
            <marquee scrollamount="3">
            诚信为本:市场永远在变,诚信永远不变。
            marquee>
          div>
           
          
          
          <div class="search">
            <form  name="formsearch" action="http://demo3805.zancms.com/plus/search.php" method="get" onsubmit="return checksearch(this)">
              <input type="hidden" name="kwtype" value="0" />
              <input class="text" type="text" name="q" value="请输入关键字" onfocus="if(this.value==defaultValue)this.value=''" onblur="if(this.value=='')this.value=defaultValue">
              <input type="submit" title="搜索" class="btn pngFix" value=""/>
            form>
             
          div>
           
        div>
      div>
    div>
    
    <div class="con_bg"> 
      
      
      <div class="title1"><span>span>
        <p>客房展示 GUEST ROOMp>
        <a href="index-2.htm"   title="更多" class="more">更多a> div>
      <div class="con1">
        <div class="con1_left"> <img src="images/kfzs.jpg"   width="225" height="280" alt="" />
          <div class="con1_left_font">
            <p>客房展示图p>
            <div>225x280 [不可删除],这里是客房展示介绍这里是客房展示介绍这里是客房展示介绍...div>
          div>
        div>
        <ul class="con1_list">
          <li>
            <div class="con1_img"><img src="images/1-160Q113202Q14.jpg"  alt="产品展示标题" width="222" height="167"/><span class="zoom">span>div>
            <p><a href="22.html"  title="产品展示标题">产品展示标题a>p>
            <div>家住杭州采荷小区的市民李先生日前碰上了一件烦心事:一个星期连丢了两辆自...div>
          li>
    <li>
            <div class="con1_img"><img src="images/1-160Q1132012V4.jpg"  alt="产品展示标题" width="222" height="167"/><span class="zoom">span>div>
            <p><a href="23.html"  title="产品展示标题">产品展示标题a>p>
            <div>家住杭州采荷小区的市民李先生日前碰上了一件烦心事:一个星期连丢了两辆自...div>
          li>
    <li>
            <div class="con1_img"><img src="images/1-160Q1131950391.jpg"  alt="产品展示标题" width="222" height="167"/><span class="zoom">span>div>
            <p><a href="29.html"  title="产品展示标题">产品展示标题a>p>
            <div>家住杭州采荷小区的市民李先生日前碰上了一件烦心事:一个星期连丢了两辆自...div>
          li>
    
        ul>
      div>
       
      
      
      
      <div class="title1"><span>span>
        <p>特色美食 SPECIALTIESp>
        <a href="index-10.htm"   title="更多" class="more">更多a>div>
      <div class="con2"> 
        
        <div class="s_banner">
          <ul class="s_banner_pic">
            <li><a href="#"><img src="images/ad1.jpg"  width="314" height="276" />a>li>
            <li><a href="#"><img src="images/ad2.jpg"  width="314" height="276" />a>li>
          ul>
          <div class="s_btns">
            <div> <a class="prev" href="javascript:void(0)">a> <a class="next" href="javascript:void(0)">a> div>
          div>
        div>
        
        <div class="con2_right"> <div class="con2_top"><a href="19.html"  title="成功案例" class="specialties_img"><img src="images/1-160FQ64HQ36.jpg"  alt="成功案例" width="177" height="133"/>a>
            <p><a href="19.html"  title="成功案例">成功案例a><span>2016-07-13span>p>
            <div>汽车防盗报警器是伴随汽车业的崛起而诞生的,为了应付汽车被盗或车零部件如:汽车音响抡胎、蓄电池等及车内物品的被盗,人们最初普遏使用的是机械...div>
          div>
    
          <ul class="con2_ul">
            <li><a href="17.html"  title="成功案例"><img src="images/1-160FQ64P02X.jpg"  alt="成功案例" width="141" height="106"/>a>li>
    <li><a href="18.html"  title="成功案例"><img src="images/1-160FQ64J5109.jpg"  alt="成功案例" width="141" height="106"/>a>li>
    <li><a href="20.html"  title="成功案例"><img src="images/1-160FQ64AT58.jpg"  alt="成功案例" width="141" height="106"/>a>li>
    <li><a href="21.html"  title="成功案例"><img src="images/1-160FQ6463Y40.jpg"  alt="成功案例" width="141" height="106"/>a>li>
    
          ul>
        div>
      div>
       
      
      
      
      <div class="title1"><span>span>
        <p>农家大院 FARMHOUSEp>
        <a href="index-9.htm"   title="更多" class="more">更多a>div>
      <div class="con1">
        <div class="con1_left"> <img src="images/njy.jpg"   width="225" height="280" alt="" />
          <div class="con1_left_font">
            <p>农家院图p>
            <div>225x280 [不可删除],这里是农家大院介绍这里是农家大院介绍这里是农家大院介绍...div>
          div>
        div>
        <ul class="con1_list">
          <li>
            <div class="con1_img"><img src="images/1-1611262339250-L.jpg"  alt="农家院标题" width="222" height="167"/><span class="zoom">span>div>
            <p><a href="45.html"  title="农家院标题">农家院标题a>p>
            <div>长岛大钦岛海天渔家乐座落于大钦岛北村西海口码头,是一家集住宿,餐饮,旅...div>
          li>
    <li>
            <div class="con1_img"><img src="images/1-1611262339110-L.jpg"  alt="农家院标题" width="222" height="167"/><span class="zoom">span>div>
            <p><a href="44.html"  title="农家院标题">农家院标题a>p>
            <div>长岛大钦岛海天渔家乐座落于大钦岛北村西海口码头,是一家集住宿,餐饮,旅...div>
          li>
    <li>
            <div class="con1_img"><img src="images/1-161126233U80-L.jpg"  alt="农家院标题" width="222" height="167"/><span class="zoom">span>div>
            <p><a href="43.html"  title="农家院标题">农家院标题a>p>
            <div>长岛大钦岛海天渔家乐座落于大钦岛北村西海口码头,是一家集住宿,餐饮,旅...div>
          li>
    
        ul>
      div>
      
      
      <div class="con4"> 
        
        <div class="con4_left">
          <div class="con4_title"><span>span>
            <p>景点介绍 ATTRACTIONSp>
            <a href="index-1.htm"   title="更多" class="more">更多a>div>
          <div class="con4_about"> <img src="images/ad2.jpg"   width="235" height="196" alt=""/>
            <p style="text-indent: 2em;">四川省茶业集团股份有限公司(以下简称川茶集团)于2013年10月成立,是以原四川省叙府茶业有限公司为主体联合省内多家茶叶企业共同发起组建的四川首家集茶树良种繁育、种植示范、茶叶初精深加工、品牌营销、科技研发与推广、茶文化应用与茶旅游发展以及其他茶叶关联产业等为一体的现代茶产业集群。 川茶集团是省、市、区各级党委xx重点扶持打造的农业... p>
          div>
        div>
         
        
        
        <div class="con4_right">
          <div class="con4_title2"><span>span>
            <p>景点新闻p>
            <a href="index-7.htm"   title="更多" class="more">更多a>div>
          <ul class="con4_ul">
            <li><a href="15.html"  title="怎么更换C级防盗门锁芯" >怎么更换C级防盗门锁芯a>li>
    <li><a href="14.html"  title="开锁需要什么证件" >开锁需要什么证件a>li>
    <li><a href="13.html"  title="汽车防盗报警器" >汽车防盗报警器a>li>
    <li><a href="12.html"  title="防盗门开锁后必须换锁吗?" >防盗门开锁后必须换锁吗?a>li>
    <li><a href="11.html"  title="xx锁具业该如何应对国际竞争" >xx锁具业该如何应对国际竞争a>li>
    
          ul>
        div>
         
      div>
      
      
      <div class="links">
    
       
      <img src="images/con_bottom.jpg"   class="con_bottom" /> div>
    
    
    
    <div class="foot_nav"> <a href="index.htm"  title="首页">首页a> <span>|span>  <a title="景点介绍" href="index-1.htm" >景点介绍a>
      li>
      <span>|span>  <a title="客房展示" href="index-2.htm" >客房展示a>
      li>
      <span>|span>  <a title="景点新闻" href="index-7.htm" >景点新闻a>
      li>
      <span>|span>  <a title="路线推荐" href="index-8.htm" >路线推荐a>
      li>
      <span>|span>  <a title="农家大院" href="index-9.htm" >农家大院a>
      li>
      <span>|span>  <a title="特色美食" href="index-10.htm" >特色美食a>
      li>
      <span>|span>  <a title="活动专题" href="index-11.htm" >活动专题a>
      li>
      <span>|span>  <a title="在线留言" href="index-12.htm" >在线留言a>
      li>
      <span>|span>  <a title="xx我们" href="index-13.htm" >xx我们a>
      li>
      <span>|span>  div>
     
    
    
    <div class="foot_bg">
      <div class="foot">
        <div class="foot_left">
          <div class="foot-left-top">
            <h1>+86-0000-96877h1>
            
            <div id="pgshare1">
              <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> <a class="bds_tsina">a> <a class="bds_tqq">a> <a class="bds_qzone">a> <a class="bds_bdhome">a> div>
            div>
             script type="text/javascript">
        document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
    script> 
             
          div>
          <div class="foot-fonts">
            <p>2002-2011 某某旅馆住宿有限公司 版权所有p>
            <p><span>地址:这里是您的公司地址span><span>电话:+86-0000-96877span><span>手机:+86-0000-96877span>p>
            <p><span>技术支持:<a href="#"  target="_blank" title="织梦58" >网络公司a>span><span>ICP备案编号:<a window.location='http://www.miitbeian.gov.cn/'"   target="_blank" title="ICP备********号">ICP备********号a>span>统计代码放置p>
          div>
        div>
        <div class="foot_code"><img src="images/erweima.png"   width="101" height="101" alt="微信扫一扫"/>
          <p>微信扫一扫p>
        div>
      div>
    div>
     
    
    
    <div id="common-tool" >
      <ul>
        <li><a id="common-sweep-ico" href="javascript:void(0);"><img src="images/sweep-ico.png"  alt="二维码" title="二维码">a>
          <div class="common-sweep-box"> <img src="images/erweima.png"  alt="这里是您的网站名称"/>div>
        li>
        <li><a href="index-12.htm" ><img src="images/book-ico.png"  alt="在线留言" title="在线留言">a>li>
     src="images/qq-ico.png"  alt="在线QQ" title="在线QQ">a>li>
        <li id="common-top-ico"><a class="common-top" href="javascript:void(0);"><img src="images/top-ico.png"  alt="返回顶部" title="返回顶部">a>li>
      ul>
    div>
     
    
    <link rel="stylesheet" type="text/css" href="jquery.dialogbox.css" >
    <div id="type-dialogBox">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

    更多干货🎁

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

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

    3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

  • 相关阅读:
    8/3 训练日志 (树状数组+区间覆盖+思维+01字典树)
    TensorFlow学习:在web前端如何使用Keras 模型
    ValueError: Maximum allowed size exceeded
    【组件传参】返回e和传入的参数 - uniapp中this.$emit回传多个值 - uniapp组件中带事件参数event和多个参数
    一个比 Nginx 还简单的 Web 服务器
    【VUE】
    Module not found: Error: Can‘t resolve ‘core-js/modules/es.promise.js‘
    模块化笔记软件综合评测:Craft、Notion、FlowUs
    CiteSpace for Mac 最新保姆级教程
    VSCode 占用内存过高
  • 原文地址:https://blog.csdn.net/p305114466/article/details/126685765