大师级中国风复古景区网站设计及html前端源码
2024-04-10 09:25:09
今天分享一个珍藏10年以上的网站设计，虽然年代久远，放在当下其网页设计风格也让人叹为观止的，是一个很中国风的水墨风格网站。
此景区整站psd设计源码，大级网站的设计源文件，整个网站源文件经过多次修改大磨，在整个光影设计上非常大气，在网站设计水平算得上是大师级别水平，内面和栏目是包含整个网站新闻，景区介绍，景区导览，景区概况，门票预订等页面。
对于网站前端来说，排版布局上很很考验前端功力了，特别切图，有上千个图层，差的电脑打开都卡。
废话不多说，直接上图
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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>凤凰古城</title>
<meta name="keywords" content="凤凰古城,凤凰自游人" />
<meta name="description" content="凤凰古城" />
<link href="css/index.css" type="text/css" rel="stylesheet" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.iFadeSldie.pack.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<!--[if lte IE 6]><script type="text/javascript" src="js/iepng.js"></script><![endif]-->
</head><body><div class="wraphead">
<div class="head"><div class="search"><form><input type="text" class="s_txt" value="搜索关键词" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;"/><input type="submit" class="s_btn" value=""/></form></div><div class="logo"><a href="#"><img src="data:images/logo.png" width="230" height="75"/></a></div><div class="nav"><ul><li><a href="#">网站首页</a></li><li><a href="#">凤凰概况</a><ul class="downmenu"><li><a href="#" >凤凰介绍</a> | </li><li><a href="#">地理位置</a > | </li><li><a href="#">历史文化</a> | </li><li><a href="#">民俗风情</a> | </li><li><a href="#">城市建设</a> | </li><li><a href="#">景区特色</a> | </li><li><a href="#">故事传说</a> | </li><li><a href="#">名人大家</a> | </li><li><a href="#">地主特产</a></li></ul></li><li><a href="#">景区介绍</a><ul class="downmenu att"><li><a href="#" >旅游景点</a> | </li><li><a href="#">旅游线路推荐</a > | </li><li><a href="#">凤凰古城风光</a> | </li><li><a href="#">在线视频</a></li></ul></li><li><a href="#">凤凰动态</a><ul class="downmenu dt"><li><a href="#" >新闻报道</a> | </li><li><a href="#">专题活动</a > | </li><li><a href="#">最新推荐</a> | </li><li><a href="#">公司公告</a></li></ul></li><li><a href="#">旅游指南</a><ul class="downmenu zn"><li><a href="#" >凤凰交通</a> | </li><li><a href="#">古城地图</a > | </li><li><a href="#">旅游攻略</a> | </li><li><a href="#">天气预报</a></li></ul></li><li><a href="#">旅游方案</a></li></ul></div></div>
<!--end head-->
</div><div class="wrap"><div class="main"><div class="top_sight"><div class="sight_l"><ul><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li><li><a href="#">沈从文故居</a></li></ul></div><div class="sight_r"><div id="leftControl"></div><div id="slideshow"> <div id="slidesContainer"><div class="slide"><dl><dt><a href="#"><img src="img/turn.jpg" alt="An imar wordpress." width="122" height="96" /></a></dt><dd>凤凰的早晨让人感觉很舒服，很清新，照相也很漂亮，反而不大喜欢夜晚的感觉，因为觉得很喧嚣，就像一个很商业的城市，没有了那种清净。</dd></dl></div><div class="slide"><dl><dt><a href="#"><img src="img/turn.jpg" alt="An imar wordpress." width="122" height="96" /></a></dt><dd>2222，很清新，照相也很漂亮，反而不大喜欢夜晚的感觉，因为觉得很喧嚣，就像一个很商业的城市，没有了那种清净。</dd></dl></div><div class="slide"><dl><dt><a href="#"><img src="img/turn.jpg" alt="An imar wordpress." width="122" height="96" /></a></dt><dd>33333，很清新，照相也很漂亮，反而不大喜欢夜晚的感觉，因为觉得很喧嚣，就像一个很商业的城市，没有了那种清净。</dd></dl></div></div></div><div id="rightControl"></div></div><div class="topnav"><ul><li><a href="#">凤凰美图</a></li><li><a href="#">凤凰视频</a></li><li><a href="#">如何到凤凰</a></li><li><a href="#">旅游攻略</a></li><li><a href="#">最新活动</a></li></ul></div></div><!--end 必去景点--><div class="left"><div class="boatpan"><div class="boat">沱江河是古城凤凰的母亲河，沱江的南岸是古城墙，用紫红沙石砌成。城墙有东、北两座城楼。河水清澈，城墙边的河道很浅，水流悠游缓和，可以看到柔波里招摇的水草，可以撑一支长篙漫溯。沿沱江边而建的吊脚楼群在东门虹桥和北门跳岩附近。 </div></div><div class="tourspan"><dl><dt><a href="#"><img src="img/tour.jpg" width="217" height="100" /></a></dt><dd><h2><a href="#">中国最美小镇凤凰古城+苗人谷1日游</a></h2> 推荐：凤凰古城九景旅游，沱江泛舟，黄永玉画室闲逛，虹桥上笑看人来人往……</dd></dl><dl><dt><a href="#"><img src="img/tour.jpg" width="217" height="100" /></a></dt><dd><h2><a href="#">中国最美小镇凤凰古城+苗人谷1日游</a></h2> 推荐：凤凰古城九景旅游，沱江泛舟，黄永玉画室闲逛，虹桥上笑看人来人往……</dd></dl><div class="clear"></div><dl><dt><a href="#"><img src="img/tour.jpg" width="217" height="100" /></a></dt><dd><h2><a href="#">中国最美小镇凤凰古城+331日游</a></h2>推荐：凤凰古城九景旅游，沱江泛舟，黄永玉画室闲逛，虹桥上笑看人来人往……</dd></dl><dl><dt><a href="#"><img src="img/tour.jpg" width="217" height="100" /></a></dt><dd><h2><a href="#">中国最美小镇凤凰古城+苗人谷1日游</a></h2> 推荐：凤凰古城九景旅游，沱江泛舟，黄永玉画室闲逛，虹桥上笑看人来人往……</dd></dl></div><!--end 推荐线路--><div class="picpan"><div class="title"><a href="#" class="more">更多>></a></div><div class="pan_c"><dl><dt><a href="#"><img src="img/attractions.jpg" width="142" height="108" /></a></dt><dd><a href="#">凤凰古城美景</a></dd></dl><dl><dt><a href="#"><img src="img/attractions.jpg" width="142" height="108" /></a></dt><dd><a href="#">凤凰古城美景</a></dd></dl><dl><dt><a href="#"><img src="img/attractions.jpg" width="142" height="108" /></a></dt><dd><a href="#">凤凰古城美景</a></dd></dl><dl><dt><a href="#"><img src="img/attractions.jpg" width="142" height="108" /></a></dt><dd><a href="#">凤凰古城美景</a></dd></dl><dl><dt><a href="#"><img src="img/attractions.jpg" width="142" height="108" /></a></dt><dd><a href="#">凤凰古城美景</a></dd></dl><dl><dt><a href="#"><img src="img/attractions.jpg" width="142" height="108" /></a></dt><dd><a href="#">凤凰古城美景</a></dd></dl></div></div><!--end 美图--></div><!--end left--><div class="right"><div class="videopan"><div><img src="data:images/video-bg.jpg" width="242" height="190" /></div><div class="video_txt">凤凰古城是国家历史文化名城，曾被新西兰著名作家路易艾黎称赞为中国最美丽的小城。这里与吉首的德夯苗寨，永顺的猛洞河，贵州的梵净山相毗邻，是...</div></div><div class="newspan"><div class="title"><a href="#" class="more">更多>></a></div><div class="pan_c"><ul class="li_fix"><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li><li><a href="#">凤凰古城过年:回归快乐可以如此简单</a></li></ul></div></div><!--end news--><div class="hdpan"><div class="title"><a href="#" class="more">更多>></a></div><div class="pan_c"><div id="pic_show"><div id="slide_b"><a href="#"><img src="img/showpic1.jpg" title="demo" alt="demo" /></a><a href="#"><img src="img/showpic2.jpg" title="demo" alt="demo" /> </a> <a href="#"><img src="img/showpic3.jpg" title="demo" alt="demo" /> </a> <div class="ico_b"></div></div></div></div></div><!--end 活动专区--><div class="tabpan"><ul class="tab"><li class="tab_on"><a href="#">媒体报道</a></li><li><a href="#">官方动态</a></li></ul><div class="tab_c"><div class="tab_c_on"><ul><li><a href="#">台湾旺旺中时媒体记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">台湾旺旺中时媒体记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">台湾旺旺中时媒体记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">台湾旺旺中时媒体记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">台湾旺旺中时媒体记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li></ul></div><div><ul><li><a href="#">2222体记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">22者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">2222记者凤凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">台222222222采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li><li><a href="#">222222凰采风</a><br /><span>[ 2012-01-02 ]</span> 日前，台湾旺旺中时媒体集团4名记者来到湖南，进行主题为“崛起中的湖南”专题报道。在湘西自治州台办工作人员的陪同下，他们来到凤凰古城进行拍摄报道。采访团一行先后参观了沈从文故居、古城博物馆、崇德堂、熊希龄故居、杨家祠堂、万寿宫等名胜古迹... </li></ul></div></div></div><!--end 切换--></div><!--end right--><div class="foodpan"><div class="title"><a href="#" class="more">更多>></a></div><div class="pan_c"><dl><dt><a href="#"><img src="img/eat1.jpg" width="137" height="98" /></a></dt><dd><a href="#">凤凰血浆鸭</a><br />推荐饭店-东坡肉店</dd></dl><dl><dt><a href="#"><img src="img/eat2.jpg" width="137" height="98" /></a></dt><dd><a href="#">凤凰血浆鸭</a><br />推荐饭店-东坡肉店</dd></dl><dl><dt><a href="#"><img src="img/eat3.jpg" width="137" height="98" /></a></dt><dd><a href="#">凤凰血浆鸭</a><br />推荐饭店-东坡肉店</dd></dl><dl><dt><a href="#"><img src="img/eat4.jpg" width="137" height="98" /></a></dt><dd><a href="#">凤凰血浆鸭</a><br />推荐饭店-东坡肉店</dd></dl><dl><dt><a href="#"><img src="img/eat5.jpg" width="137" height="98" /></a></dt><dd><a href="#">凤凰血浆鸭</a><br />推荐饭店-东坡肉店</dd></dl></div></div><!--end 特别推荐--><div class="adpan"><a href="#"><img src="data:images/huanlongdong.jpg" width="232" height="80" /></a><a href="#"><img src="data:images/zhangjiajie.jpg" width="232" height="80" /></a><a href="#"><img src="data:images/gunancheng.jpg" width="232" height="80" /></a></div><!--end 广告区--><div class="contactpan">即时联系通道：<span class="tel">400-xxxxx-xxx</span> | <span class="email">xxxx@china.com</span></div><div class="footer"><a href="#">网站首页</a> | <a href="#">凤凰概况</a> | <a href="#">景区介绍</a> | <a href="#">凤凰动态</a> | <a href="#">旅游指南</a> | <a href="#">旅游方案</a> | <a href="#">关于我们</a></div></div><!--end main--></div><!--end wrap--><div class="copyright">凤凰古城股份有限公司 Copyright 1999 - 2011 xxxxx.com All Rights Reserved | 湘ICP备05013084号
</div><div class="onlineQQ">
<ul>
<li class="kf"><a href="#">在线客服</a></li>
<li class="tel400">400-xx-xxx</li>
<li class="mail"><a href="mailto:xxxx@china.com">xxx@china.com</a></li>
</ul></div>
<script type="text/javascript" src="js/kf.js"></script><script type="text/javascript">$(document).ready(function(){//幻灯片$('div#slide_b').iFadeSlide({field: $('div#slide_b a'),icocon:$('div.ico_b'),hoverCls: 'high_b',curIndex: 2, //索引值0起始,故此处设置为第3项高亮interval: 4000});
});</script></body>
</html>包括上整站的PSD源码和HTML前端源码。
源文件：https://www.uihtm.com/psd/7521.html
大师级中国风复古景区网站设计及html前端源码相关推荐
- java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw
java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B ...
- JAVA毕业设计HTML5“牧经校园疫情防控网站”设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5"牧经校园疫情防控网站"设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"牧经校园疫情防控网站"设计 ...
- JAVA毕业设计HTML5“守护萌宠”网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"守护萌宠"网站设计与实现计算机源码 ...
- JAVA毕业设计高校教师个人主页网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计高校教师个人主页网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计高校教师个人主页网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: ...
- JAVA毕业设计英语学习网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计英语学习网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计英语学习网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目架构:B/S ...
- JAVA毕业设计H5新冠防疫宣传网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计H5新冠防疫宣传网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计H5新冠防疫宣传网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: ...
- 计算机毕业设计JAVA基于Bootstrap框架的读书网站设计与实现mybatis+源码+调试部署+系统+数据库+lw
计算机毕业设计JAVA基于Bootstrap框架的读书网站设计与实现mybatis+源码+调试部署+系统+数据库+lw 计算机毕业设计JAVA基于Bootstrap框架的读书网站设计与实现mybati ...
- java毕业设计基于Bootstrap框架的读书网站设计与实现mybatis+源码+调试部署+系统+数据库+lw
java毕业设计基于Bootstrap框架的读书网站设计与实现mybatis+源码+调试部署+系统+数据库+lw java毕业设计基于Bootstrap框架的读书网站设计与实现mybatis+源码+调 ...
- JAVA毕业设计Web精品课程网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Web精品课程网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Web精品课程网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目 ...
- JAVA毕业设计HTML5“忆红楼梦之味”网站设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计HTML5"忆红楼梦之味"网站设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计HTML5"忆红楼梦之味"网站设计与实现计 ...
最新文章
- 自然语言处理(NLP)之依存句法分析的可视化及图分析
- 从指南针到北斗：中国导航系统促进世界互联互通
- Docker的“谎言”
- python编写程序输出诗句_Python学习笔记（一）-- print语句
- Hive的基本操作-创建内部表
- 基于stm32的c语言程序设计,基于stm32的电子密码锁设计 main.c 代码奉上,做课设的直接用...
- iPhone 和 华为手机 ：手机端酷狗音乐提示 “导入歌曲不支持此操作” ----曲线解决导入问题
- C语言-第19课 - #pragma预处理分析
- 【深度学习】关于Inceprion v3网络对应的1001个类别
- 动态切换 web 报表中的统计图类型
- 直达号PK公众号的背后还有哪些市场空间？
- State Threads 回调终结者(ST线程库)
- 90个外国英文网站强力推荐 (转）
- csharp c++
- 区块链学习一--初始比特币
- android 动态渐变,Android 动态修改渐变 GradientDrawable
- 品牌服装电商HTML网页模板
- C++ Poco库编译方法
- Git命令练习 据说是90%
- 英文文献作者姓名写法