今天分享一个珍藏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="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="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="images/huanlongdong.jpg" width="232" height="80" /></a><a href="#"><img src="images/zhangjiajie.jpg" width="232" height="80" /></a><a href="#"><img src="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前端源码。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
