大师级水墨复古风格旅游旅游5A景区设计HTML源码附PSD

企业开发 2023-04-07 08:51:52 阅读次数: 0

这是一个多年前，5A景区的手稿，从首页，内页，内容全套定制，放在当下也是不错的网站。
现在分享出来
先来欣赏下效果图：
在这里插入图片描述
在这里插入图片描述

前端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="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/style.css" />
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->

<style type="text/css">
.navpan,.indexNews,#index-dhpan,.indexfooterpan,.siderbox,#music{
      
       }
body{
      
       position:relative}
</style>
<script type="text/javascript">
(function(){
      
      
    var sUserAgent = navigator.userAgent;
	var url = window.location.href;
	var url_obj= url.split('?');
	
	if(typeof(url_obj[1])!== "undefined"&&url_obj[1]=='web')
	{
      
      
		
	}
    else 
	{
      
      
		if(typeof(url_obj[1])!== "undefined"&&url_obj[1]=='mobile'){
      
      
			location.href = 'http://m.xxx.com/?mobile';
		}
		else if (sUserAgent.indexOf('Android') > -1 && sUserAgent.indexOf('Mobile') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('Symbian') > -1 || sUserAgent.indexOf('IEMobile') > -1)
		{
      
      
			location.href = 'http://m.xxxx.com';
		}
	}
	
})();
</script>

</head>
<body>
<div id="loading" >
		<span><img src="images/loading-logo.png"  alt="官方网站"><img src="images/loading.gif" alt="国家AAAAA级景区" class="loading"></span>
</div>
<div class="header">
	<div class="wrap">
	<h1>欢迎光临官方网站</h1>
	<a href="/" class="logo"><img src="./images/logo.png" title="官方网站" alt="官方网站"></a>
    <ul class="lang">
    	<li class="langtxt">Language
        	<ul>
            	<li><a href="/">中文版</a></li>
                <li><a href="/en/">English</a></li>
            </ul>
        </li>
    </ul>
    <ul class="icopan">
    	<li class="ico">
            <span class="mo"><img src="/images/m.png" alt="官景区官方网站移动版"></span>
            <span class="ewm"><img src="/images/wx.png" alt="景区官方网站微信公众号"></span>
            <a class="sina" >
             <div class="sinabox">
             <iframe width="100%" height="75" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=75&fansRow=2&ptype=1&speed=0&skin=1&isTitle=0&noborder=1&isWeibo=0&isFans=0&uid=2662213663&verifier=e470d770"></iframe>
             </div>
            </a>
         </li>
	</ul>
    <!--导航菜单-->
    <ul class="navpan nl">
    	<li><a href="/" class="item home"><span>网站首页</span></a></li>
        <li class="extend">
        	<i class="hoverSkin"></i>
        	<a href="javacript:;" class="item"><span>门票预定</span></span><dfn></dfn></a>
            <div class="opener bookp">
            	<dl>
                	<dt>门票预订</dt>
                    <dd>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th width="41%">票种</th>
    <th width="12%">门市价</th>
    <th width="13%">网络售价</th>
    <th width="19%">预订须知</th>
    <th width="15%">&nbsp;</th>
  </tr>
  <tr>
    <td>景区成人票</td>
    <td><b class="dely">¥</b><span class="del">130</span></td>
    <td><b class="onliney">¥</b><span class="price">99</span></td>
    <td>提前一天24:00前</td>
    <td><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7204334" class="btnlink" target="_blank">在线预订</a></td>
  </tr><tr>
    <td>景区门票（当日预定1小时后入园）</td>
    <td><b class="dely">¥</b><span class="del">130</span></td>
    <td><b class="onliney">¥</b><span class="price">110</span></td>
    <td>当日日提前一小时预订</td>
    <td><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7346323" class="btnlink" target="_blank">在线预订</a></td>
  </tr><tr>
    <td>西山景区成人票</td>
    <td><b class="dely">¥</b><span class="del">75</span></td>
    <td><b class="onliney">¥</b><span class="price">60</span></td>
    <td>提前一天24:00前</td>
    <td><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7295854" class="btnlink" target="_blank">在线预订</a></td>
  </tr><tr>
    <td>景区+西山景区联票</td>
    <td><b class="dely">¥</b><span class="del">205</span></td>
    <td><b class="onliney">¥</b><span class="price">160</span></td>
    <td>提前一天16:00前</td>
    <td><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7295868" class="btnlink" target="_blank">在线预订</a></td>
  </tr><tr>
    <td>360度全景景区 （5A）+象鼻山景区（4A）+芦笛景区（4A）+两江四湖景区（4A）</td>
    <td><b class="dely">¥</b><span class="del">515</span></td>
    <td><b class="onliney">¥</b><span class="price">398</span></td>
    <td>提前一天16:00前</td>
    <td><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7204334" class="btnlink" target="_blank">在线预订</a></td>
  </tr>
</table>

                    </dd>
                </dl>
                <dl class="otherlink">
                <dt><h3>常用链接</h3></dt>
                <dd><a href="http://www.glxishan.net" target="_blank"><img src="/images/xishan-logo.png" alt="桂林西山景区"></a><a href="http://www.guilin.com.cn" target="_blank"><img src="/images/logo-lyj.png" alt="桂林旅游资讯"></a> <a href="http://www.lpb.gov.cn" target="_blank"><img src="/images/logo-pz.png" alt="旅游品质保障网"></a></dd>
            
                </dl>
            </div>
        </li>
        <li class="extend">
        	<i class="hoverSkin"></i>
        	<a href="javacript:;" class="item"><span>景区概况</span><dfn></dfn></a>
            <div class="opener jqinfo gkwidth">
            	<dl class="sub_gk">
                	<dt><h3>景区文化历史</h3></dt>
                    <dd>
                    	<a href="/gaikuang/wc.html" class="image"><img src="/images/l1.jpg" ></a>
                        <h4><a href="/gaikuang/wc.html">千年一述(风水)</a></h4>
                        <p class="intro">景区被奉为桂林的风水宝地，这里曾经走出了2位皇帝、11代14位靖江王</p>
                    </dd>
                    <dd>
                    	<a href="/gaikuang/mwc.html" class="image"><img src="/images/l2.jpg" ></a>
                        <h4><a href="/gaikuang/mwc.html">明x</a></h4>
                        <p class="intro">靖江王府位于桂林市中心的独秀峰下，是明朝开国皇帝朱元璋分封给其侄孙的府邸</p>
                    </dd>
                    <dd>
                    	<a href="/gaikuang/hzgg.html" class="image"><img src="/images/l3.jpg" ></a>
                        <h4><a href="/gaikuang/hzgg.html">还珠格格孔四贞</a></h4>
                        <p class="intro">王府中曾走出过一位特殊的女性，她就是明末清初“定南王”孔有德之女——孔四贞</p>
                    </dd>
                    
                </dl>
                <dl class="sub_gk">
                	<dt><h3>&nbsp;</h3></dt>
                    <dd>
                    	<a href="/gaikuang/gy.html" class="image"><img src="/images/l4.jpg" ></a>
                        <h4><a href="/gaikuang/gy.html">广西贡院</a></h4>
                        <p class="intro">清顺治年间，被废，朝廷在此建立了广西贡院，以利八桂学子应试科举、求官报国</p>
                    </dd>
                    <dd>
                    	<a href="/gaikuang/hzgg.html" class="image"><img src="/images/l5.jpg" ></a>
                        <h4><a href="/gaikuang/dxf.html">南天一柱 独秀峰</a></h4>
                        <p class="intro">独秀峰素有“南天一柱”的美誉，史称桂林第一峰，是靖江王府后花园里的天然靠山</p>
                    </dd>
                </dl>
                <dl class="sub_gk nob">
                	<dt><h3>景区资讯</h3></dt>
                    <dd>
                    	
                         <p class="intro">聚焦景区、媒体、交通，全方位最新旅游新闻资讯展示。</p>
                         <ul class="sub_list b">
			
                        </ul>
                    </dd>

                </dl>
            </div>
        </li>
        <li class="extend">
        	<a href="javacript:;" class="item"><span>xx古韵</span><dfn></dfn></a>
            <div class="opener jqinfo guyun">
            	<dl class="mappan">
                	<div class="mapimg"><img src="/images/map.jpg" width="480" height="482"></div>
                    <ul class="spot">
                    	<li class="spot0" data-title="sopt-title0"><a href="/att/dxf.html" data-rel="38"><span>独秀峰</span></a></li>
                    	<li class="spot1" data-title="sopt-title1"><a href="/att/gy.html" data-rel="25"><span>贡院</span></a></li>
                        <li class="spot2" data-title="sopt-title2"><a href="/att/yyc.html" data-rel="38"><span>月牙池</span></a></li>
                        <li class="spot3" data-title="sopt-title3"><a href="/att/dushuyan.html" data-rel="38"><span>读书岩</span></a></li>
                        <li class="spot4" data-title="sopt-title4"><a href="/att/tpy.html" data-rel="38"><span>太平岩</span></a></li>
                        <li class="spot5" data-title="sopt-title5"><a href="/att/gxt.html" data-rel="38"><span>国学堂</span></a></li>
                        <li class="spot6" data-title="sopt-title6"><a href="/att/fqj.html" data-rel="38"><span>福泉井</span></a></li>
                        <li class="spot7" data-title="sopt-title7"><a href="/att/fqs.html" data-rel="38"><span>夫妻树</span></a></li>
                        <li class="spot8" data-title="sopt-title8"><a href="/att/cyd.html" data-rel="38"><span>承运殿</span></a></li>
                        <li class="spot9" data-title="sopt-title9"><a href="/att/wd.html" data-rel="25"><span>王道</span></a></li>
                        <li class="spot10" data-title="sopt-title10"><a href="/att/yjyb.html" data-rel="50"><span>云阶玉陛</span></a></li>
                        <li class="spot11" data-title="sopt-title11"><a href="/att/gcq.html" data-rel="38"><span>古城墙</span></a></li>
                    </ul>
                </dl>
                <dl class="spotname">
                	<dt>标志景点</dt>
                    <dd><a href="/att/dxf.html">独秀峰</a></dd>
                	<dd><a href="/att/gy.html">贡院</a></dd>
                    <dd><a href="/att/yyc.html">月牙池</a></dd>
                    <dd><a href="/att/dushuyan.html">读书岩</a></dd>
                    <dd><a href="/att/tpy.html">太平岩</a></dd>
                    <dd><a href="/att/gxt.html">国学堂</a></dd>
                    <dd><a href="/att/fqj.html">福泉井</a></dd>
                    <dd><a href="/att/fqs.html">夫妻树</a></dd>
                    <dd><a href="/att/cyd.html">承运殿</a></dd>
                    <dd><a href="/att/wd.html">王道</a></dd>
                    <dd><a href="/att/yjyb.html">云阶玉陛</a></dd>
                    <dd><a href="/att/gcq.html">古城墙</a></dd>
                </dl>
                <dl class="guy_tab">
                	<dt>xx精髓</dt>
                    <dd><a href="/att/guyun.html?g1">桂林城中之城</a></dd>
                    <dd><a href="/att/guyun.html?g2">名代靖王藩王府</a></dd>
                    <dd><a href="/att/guyun.html?g3">沧桑遗迹</a></dd>
                    <dd><a href="/att/guyun.html?g4">独秀峰</a></dd>
                    <dd><a href="/att/guyun.html?g5">彩色拓石发源地</a></dd>
                    <dd><a href="/att/guyun.html?g6">月牙池</a></dd>
                    <dd><a href="/att/guyun.html?g7">摩岸石刻</a></dd>
                    <dd><a href="/att/guyun.html?g8">西南最大的科举考场</a></dd>
                </dl>
            </div>
        </li>
    </ul>
    <ul class="navpan nr">
        <li class="extend">
        	<i class="hoverSkin"></i>
        	<a href="javacript:;" class="item"><span>旅游计划</span><dfn></dfn></a>
            <div class="opener jqinfo jihua">
            	<dl class="sub_gk">
                	<dt><h3>出行方式</h3></dt>
                    <dd>
                    	<a href="javacript:;" class="image"><img src="/images/test.jpg" ></a>
                        <ul class="sub_list b">
                        	<li><a href="/jh/zzy.html">自驾游与自助游</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl class="sub_gk">
                	<dt><h3>交通指引</h3></dt>
                    <dd>
                    	<a href="javacript:;" class="image"><img src="/images/nan.jpg" ></a>
                        <ul class="sub_list">
                        	<li><a href="/jh/sjt.html">市区内交通</a></li>
                            <li><a href="/jh/wjt.html">景区外交通</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl class="sub_gk">
                	<dt><h3>深入体验</h3></dt>
                    <dd>
                    	<a href="/3d/" class="image"><img src="/images/360.jpg" ></a>
                        <ul class="sub_list">
                        	<li><a href="/3d/">360虚拟游园</a></li>
                        </ul>
                        <p>360度全景虚拟实景游园，让你感受身临其镜</p>
                    </dd>
                </dl>
                <dl class="sub_gk">
                	<dt><h3>红楼宾馆</h3></dt>
                    <dd>
                    	<a href="javacript:;" class="image"><img src="/images/honglou.jpg" ></a>
                        <ul class="sub_list">
                        	<li><a href="/jh/honglou.html">宾馆介绍</a></li>
                            <li><a href="/jh/fang.html">客房展示</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl class="sub_gk nob">
                	<dt><h3>乐享周边</h3></dt>
                    <dd>
                    	<a href="/le/" class="image"><img src="/images/le.jpg" ></a>
                        <ul class="sub_list">

                        </ul>
                    </dd>
                </dl>
                
            </div>
        </li>
        <li class="extend">
        	<i class="hoverSkin"></i>
        	<a href="/news/" class="item"><span>活动盛事</span><dfn></dfn></a>
            <div class="opener jqinfo jihua hdss">
            	<dl class="sub_gk">
                	<dt><a href="/news/fs/">更多</a><h3>正在发生</h3></dt>
                    
                    
                </dl>
                <dl class="sub_gk">
                	<dt><a href="/news/hd/">更多</a><h3>常年活动</h3></dt>
                    
                </dl>
                <dl class="sub_gk nob">
                	<dt><a href="/news/jd/">更多</a><h3>重要接待</h3></dt>
                    
                </dl>
            </div>
        </li>
        <li >
        	<a href="/gonglue/" class="item"><span>社区攻略</span><dfn></dfn></a>
        </li>
        <li>
        	<a href="/about/contact.html" class="item"><span>联系我们</span><dfn></dfn></a>
        </li>
    </ul>
    <!--导航菜单-->
    </div>
</div>

<div id="main">
	<ul class="tab"><li class="on">资讯动态</li><li>热门活动</li><li>乐享周边</li><li>旅游攻略</li></ul>
    <div class="mainbg"></div>
	<div class="main_left">
    	<div class="tabbox show">
        	
             <dl><dt><a ref="[field:arcurl/]" target="_blank"><img src="images/test.jpg" width="190" height="144" alt="[field:title/]"></a></dt></dl>
            <ul>
                <li><a href="#" target="_blank">2013.3.29原全国政协副主席/台盟中央原主席张克</a></li>
                <li><a href="[field:arcurl/]" target="_blank">2013.3.29原全国政协副主席/台盟中央原主席张克</a></li>
                <li><a href="[field:arcurl/]" target="_blank">2013.3.29原全国政协副主席/台盟中央原主席张克</a></li>
                <li><a href="[field:arcurl/]" target="_blank">2013.3.29原全国政协副主席/台盟中央原主席张克</a></li>
                <li><a href="[field:arcurl/]" target="_blank">2013.3.29原全国政协副主席/台盟中央原主席张克</a></li>
                <li><a href="[field:arcurl/]" target="_blank">2013.3.29原全国政协副主席/台盟中央原主席张克</a></li>
            </ul>
        </div>
        <div class="tabbox">
        	
            <ul>
            	
            </ul>
        </div>
        
        <div class="tabbox">
        	
            <ul>
            	
            </ul>
        </div>
        <div class="tabbox">
        	
            <ul>
            	
            </ul>
        </div>
        
        
    </div>
    <div class="main_right">
    	<ul class="tab2"><li class="on">门票预订</li><li>天气预报</li><li>品牌形象</li></ul>
        <div class="tab2_c">
        	<div class="tabbox show" style="position:relative;">
            	
                	<div><img src="images/timg.jpg"></div>
                    <div class="mpbox">
                	 <div class="bbtn" id="sb">选择门票</div>
                    <div class="sbox">
                    <ul id="slink">
                    <li><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7204334" target="_blank">景区成人票</a></li><li><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7346323" target="_blank">景区门票（当日预定1小时后入园）</a></li><li><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7295854" target="_blank">西山景区成人票</a></li><li><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7295868" target="_blank">景区+西山景区联票</a></li><li><a href="http://b2c.glwangcheng.com/order/order.jsp?info_id=7204334" target="_blank">360度全景桂林-独秀峰王城景区 （5A）+象鼻山景区（4A）+芦笛景区（4A）+两江四湖景区（4A）</a></li>
                    </ul>
                    </div>
                    </div>
                   
                
            </div>
            <div class="tabbox">
            	<script type="text/javascript" src="http://ext.weather.com.cn/84094.js"></script>
            </div>
            <div class="tabbox">
            	<embed src="http://player.youku.com/player.php/sid/XNzYxODgzMjM2/v.swf" allowFullScreen="true" quality="high" width="280" height="220" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
            </div>
        </div>
        
    </div>
</div>


<div class="showpan">
    <div class="show" id="focus">
        <ul class="slideCont">
        
         <li data-rel="#ffffff">
         <div class="stageBg"><img src="./images/show1.jpg" /></div>
         </li>
         <li data-rel="#ffffff">
         <div class="stageBg"><img src="./images/show2.jpg" /></div>
         </li>
         <li data-rel="#ffffff">
         <div class="stageBg"><img src="./images/show3.jpg" /></div>
         </li>
         <li data-rel="#ffffff">
         <div class="stageBg"><img src="./images/show4.jpg" /></div>
         </li>
       
        </ul>
    </div>
    <div class="siderbox"></div>
</div>

	
<div class="footer" id="footer">
	<div class="wrap">
    	<div class="footer_left">
        	<p class="footer_link"><a href="/about/aboutus.html">关于我们</a> | <a href="/about/contact.html">联系我们</a> | <a href="/news/">景区资讯</a>  | <a href="/3d/">360全景</a> | <a href="/book.html">门票预订</a></p>
            <p>电话： 0771-077xxx035传真： 0773-266xxx46 地址： 中国桂林市xx1号 　邮编： 5410051 　<br>
Email：[email protected]         桂林xxxxxx有限责任公司　版权所有　<br>
通用网址：独秀峰 靖江王城 桂ICP备13002153号-1</p>
		<div class="sharebox">
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style_24x24">
	<a class="jiathis_button_qzone"></a>
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_renren"></a>
	<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
	<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
        </div>
         <div class="clearFix">友情链接：<a href='http://www.dedecms.com' target='_blank'>织梦CMS官方</a> <a href='http://docs.dedecms.com/' target='_blank'>DedeCMS维基手册</a> <a href='http://bbs.dedecms.com' target='_blank'>织梦技术论坛</a> </div>
        </div>
        <div class="footer_right">
        	<p class="ewm"><img src="images/ewm-mobile.png"><img src="images/ewm-wx.png"></p>
            <p class="opentime">
            <img src="images/telimg.png"><br>
            景区营业时间：（景区全年开放） <br>
春秋季：7:30—18:00（3月1日—4月30日；10月8日—12月7日） <br>
夏  季：7:30—18:30（5月1日—10月7日） <br>
冬  季：8:00—18:00（12月8日—次年2月28日）
            </p>
        </div>
       
    </div>
</div>


<!--网址：https://www.uihtm.com/psd/19121.html-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
      
      
	$('#sb').click(function(){
      
      
		$('.sbox').toggle();
	});
	$('.sbox').mouseleave(function(){
      
      
		$(this).hide();
	});
});
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/tianlu930/article/details/127522283
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022