web 期末作业简单设计网页——“我的故乡”网站简单设计 ...

美丽的神话  金牌会员 | 2024-12-3 00:24:32 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 872|帖子 872|积分 2616

1、网页结果

首页


 
 七彩云南页


旅游攻略页

 


 
 
用户页面

 

2、源代码 

首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>首页</title>
  6.     <link rel="stylesheet" href="out.css">
  8. </head>
  9. <body>
  10. <div class="header w">
  11.     <div class="logo">
  12.         <img src="images/logo.png">
  13.     </div>
  14.     <div class="nav">
  15.         <ul>
  16.             <li><a href="index.html#">首页</a></li>
  17.             <li><a href="brief%20introduction.html#">七彩云南</a></li>
  18.             <li><a href="travel%20strategy.html#">旅游攻略</a></li>
  19.             <li><a href="user.html#">用户</a></li>
  20.         </ul>
  21.     </div>
  22.     <div class="search">
  23.         <input type="txt" value="输入关键词">
  24.         <button></button>
  25.     </div>
  26. </div>
  27. <div class="donghua">
  28.     <div id="photo">
  29.         <img src="images/lb1.png" >
  30.         <img src="images/lb2%20.png" >
  31.         <img src="images/lb3.png" >
  32.         <img src="images/lb4%20.png" >
  33.         <img src="images/lb5.png" >
  34.     </div>
  35. </div>
  36. <div class="zhuti">
  37.     <div id="zhuti-left">
  38.         <table>
  39.             <tr>
  40.                 <img src="images/xinwen.png" >
  41.             </tr>
  42.             <h4>最新资讯</h4>
  43.             <hr size="3" color="rgb(24,24,88)">
  44.             <a href="http://cn.iyunnan.travel/html/hctj/" target="_blank">详细信息</a>
  45.             <p>
  46.                 普洱翁基古寨：日落炊烟起 茶林入画来!
  47.             </p>
  48.             <p>
  49.                 正值春茶采摘季，云南普洱景迈山一片生机。夕阳下，坐落于此的布朗族村落翁基古寨炊烟袅袅，采茶而归的村民们陆续回到寨子里，摩托车后座上满载着一天的收获。夕阳余晖穿过干栏式民居，晾晒的新鲜茶叶透出金色光芒。不一会儿，夕阳慢慢隐入古茶林，村民们开始炒制茶叶，整个寨子茶香四起。
  50.             </p>
  51.         </table>
  52.     </div>
  53.     <div id="zhuti-right">
  54.         <table>
  55.             <tr>
  56.                 <h4>相关信息</h4>
  57.                 <hr size="3" color="rgb(24, 24, 88)">
  58.                 <p>
  59.                     <a href="https://www.yn.gov.cn/" target="_blank">政府部门信息</a>
  60.                 </p>
  61.                 <p>
  62.                    <a href="https://hrss.yn.gov.cn/zwfw/portal-online/#/modules/home/home" target="_blank">公共服务信息</a>
  63.                 </p>
  64.                 <p>
  65.                 <a href="https://www.yn.gov.cn/zwgk/zcwj/yzf/202205/t20220527_242589.html" target="_blank">文旅政策信息</a>
  66.                 </p>
  67.             </tr>
  68.             <tr>
  69.                 <br>
  70.                 <h4>家乡介绍</h4>
  71.                 <p>
  72.                     <a href="https://baike.baidu.com/item/%E6%8A%9A%E4%BB%99%E6%B9%96/19454902" target="_blank">抚仙湖</a>，位于澄江市、江川区、华宁县三县间，距昆明60多公里。湖面积212平方公里，仅次于滇池和洱海，为云南省第三大湖。最深处为155米，是云南省第一深水湖泊。抚仙湖是中国最大的深水型淡水湖泊。
  73.                 </p>
  74.                 <p>
  75.                     抚仙湖流域面积达1084平方公里，流域内土地肥沃，物产丰富，主产稻、麦、蚕豆、烤烟和油菜，是有名的滇中谷仓，又是闻名全国的云烟之乡。
  76.                 </p>
  77.                 <p>
  78.                     抚仙湖的水利资源相当丰富，蓄水量达185亿立方米，等于滇池和洱海总蓄水量的四倍。引湖水能灌溉沿岸良田，又有航运之便。出水口的海口河落差很大，河长仅15.25公里，落差达385米，可分六级建成梯级站。澄江和华宁两县人民已建成两级，为滇中工农业提供了动力。
  79.                 </p>
  80.                    <div class="lunbo">
  81.                            <img id="lunbo_img" src="images/jx1.jpg" alt="">
  82.                            <button id="prevBtn" class="overlay-btn"><</button>
  83.                            <button id="nextBtn" class="overlay-btn">></button>
  84.                    </div>
  85.             </tr>
  86.         </table>
  87.     </div>
  88. </div>
  89. <script>
  90.     var index = 1;
  91.     var intervalId;
  92.     var isPaused = false;
  93.     function changeImage() {
  94.         var img = document.getElementById("lunbo_img");
  95.         img.src = "images/jx" + index + ".jpg";
  96.     }
  97.     function lunbo() {
  98.         if (!isPaused) {
  99.             index++;
  100.             if (index > 6) {
  101.                 index = 1;
  102.             }
  103.             changeImage();
  104.         }
  105.     }
  106.     function startLunbo() {
  107.         intervalId = setInterval(lunbo, 2500);
  108.     }
  109.     function stopLunbo() {
  110.         isPaused = true;
  111.         clearInterval(intervalId);
  112.     }
  113.     function resumeLunbo() {
  114.         isPaused = false;
  115.         startLunbo();
  116.     }
  117.     function prevImage() {
  118.         index--;
  119.         if (index < 1) {
  120.             index = 6;
  121.         }
  122.         changeImage();
  123.     }
  124.     function nextImage() {
  125.         index++;
  126.         if (index > 6) {
  127.             index = 1;
  128.         }
  129.         changeImage();
  130.     }
  131.     var imgElement = document.getElementById("lunbo_img");
  132.     var prevBtn = document.getElementById("prevBtn");
  133.     var nextBtn = document.getElementById("nextBtn");
  135.     if (imgElement && prevBtn && nextBtn) {
  136.         imgElement.addEventListener('mouseenter', stopLunbo);
  137.         imgElement.addEventListener('mouseleave', resumeLunbo);
  138.         prevBtn.addEventListener('click', prevImage);
  139.         nextBtn.addEventListener('click', nextImage);
  140.         startLunbo();
  141.     }
  142. </script>
  143. </body>
  144. </html>
复制代码
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .w {
  6.     width: 1200px;
  7.     margin: auto;
  8. }
  9. body {
  10.     background-image: url("images/bj..png");
  11.     background-position: center;
  12.     background-repeat: no-repeat;
  13.     background-attachment: fixed;
  14.     background-size: cover;
  15. }
  16. a {
  17.     text-decoration: none;
  18. }
  19. li {
  20.     list-style: none;
  21. }
  22. .header {
  23.     height: 52px;
  24.     background-color: #3a8dea;
  25.     margin: 30px auto;
  26. }
  27. .logo {
  28.     float: left;
  29.     width:200px ;
  30.     height: 52px;
  31.     background-color: lightpink;
  32. }
  33. .nav {
  34.     float: left;
  35.     margin-left: 90px;
  36. }
  37. .nav ul li {
  38.     float:left;
  39.     margin: 0 15px;
  40. }
  41. .nav ul li a {
  42.     display: block;
  43.     height:52px;
  44.     padding: 0 10px;
  45.     line-height: 52px;
  46.     font-size: 20px;
  47.     color: black;
  48. }
  49. .nav ul li a:hover {
  50.     color: hotpink;
  51.     background-color: lightpink;
  52. }
  53. .search {
  54.     float: left;
  55.     width: 312px;
  56.     height: 52px;
  57.     background-color: skyblue;
  58.     margin-left: 50px;
  59. }
  60. .search input {
  61.     float: left;
  62.     width: 225px;
  63.     height: 48px;
  64.     border: 2px solid #00a4ff;
  65.     border-right: 0;
  66.     color: #bfbfbf;
  67.     font-size: 18px;
  68.     padding-left: 15px;
  69. }
  70. .search button {
  71.     float:left;
  72.     width: 70px;
  73.     height: 52px;
  74.     border: 0;
  75.     background: url(images/sousuo.png);
  76. }
  77. .donghua {
  78.     border-radius: 5px;
  79.     width: 67.5%;
  80.     height: 500px;
  81.     overflow: hidden;
  82.     margin: 10px 10px 20px 230px;
  83. }
  84. #photo {
  85.     display: block;
  86.     width: 5000px;
  87.     height: 500px;
  88.     animation: tp 10s linear infinite;
  89. }
  90. #photo img {
  91.     float: left;
  92.     width: 1000px;
  93.     height: 100%;
  94. }
  95. @keyframes tp {
  96.     0%,10% {
  97.         margin-left: 0;
  98.     }
  99.     18%,35% {
  100.         margin-left: -1000px;
  101.     }
  102.     43%,60% {
  103.         margin-left: -2000px;
  104.     }
  105.     68%,85% {
  106.         margin-left: -3000px;
  107.     }
  108.     93%,100% {
  109.         margin-left: -4000px;
  110.     }
  111. }
  112. .zhuti {
  113.     margin: 30px 100px 1px 100px;
  114. }
  115. #zhuti-left {
  116.     float: left;
  117.     padding: 5px;
  118.     width: 400px;
  119. }
  120. #zhuti-left img:hover {
  121.     transform: scale(1.1);
  122. }
  123. #zhuti-left a {
  124.     text-decoration: none;
  125.     color: rgb(64, 138, 236);
  126. }
  127. #zhuti-left a:hover {
  128.     color: #ec59da;
  129. }
  130. #zhuti-left p {
  131.     margin-top: 10px;
  132.     letter-spacing: 2px;
  133.     text-indent: 2em;
  134.     line-height: 1.5em;
  135. }
  136. #zhuti-right {
  137.     float: right;
  138.     width: 800px;
  139.     height: 438px;
  140.     padding: 5px;
  141.     margin-left: 30px;
  142. }
  144. #zhuti-right p {
  145.     letter-spacing: 2px;
  146.     text-indent: 2em;
  147.     line-height: 1.5em;
  148. }
  149. #zhuti-right a {
  150.     text-decoration: none;
  151.     color: rgb(64, 138, 236);
  152. }
  153. #zhuti-right a:hover {
  154.     color: #e348d1;
  155. }
  156. #zhuti-right div {
  157.     margin: 10px 50px 0 50px;
  158.     width: 600px;
  159.     height: 250px;
  160. }
  161. #zhuti-right div img {
  162.     width: 100%;
  163.     height: 100%;
  164. }
  165. .lunbo {
  166.     position: relative;
  167.     width: 300px;
  168.     height: 200px;
  169. }
  171. #lunbo_img {
  172.     width: 100%;
  173.     height: auto;
  174. }
  176. .overlay-btn {
  177.     position: absolute;
  178.     top: 85%;
  179.     background-color: rgba(0, 0, 0, 0.5);
  180.     color: white;
  181.     border: none;
  182.     padding: 10px 20px;
  183.     cursor: pointer;
  184.     z-index: 1;
  185. }
  187. #prevBtn {
  188.     left: 2px;
  189. }
  191. #nextBtn {
  192.     right: 2px;
  193. }
复制代码
七彩云南页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>七彩云南</title>
  6.     <link rel="stylesheet" href="brief.css">
  7.     <style>
  8.         :target
  9.         {
  10.             background-image: url("images/tdbj.png");
  11.             border-radius: 20px;
  12.         }
  13.     </style>
  15. </head>
  16. <body>
  17. <div class="header w" id="h">
  18.     <div class="logo">
  19.         <img src="images/logo.png">
  20.     </div>
  21.     <div class="nav">
  22.         <ul>
  23.             <li><a href="index.html#">首页</a></li>
  24.             <li><a href="brief%20introduction.html#">七彩云南</a></li>
  25.             <li><a href="travel%20strategy.html#">旅游攻略</a></li>
  26.             <li><a href="user.html#">用户</a></li>
  27.         </ul>
  28.     </div>
  29.     <div class="search">
  30.         <input type="txt" value="输入关键词">
  31.         <button></button>
  32.     </div>
  33. </div>
  34. <div class="mulu">
  35.     <ul>
  36.         <li>
  37.             <div id="d1"><a href="#h">七彩云南</a></div>
  38.         </li>
  39.         <div id="d2">
  40.         <hr size="3" color="gray">
  41.         <p>
  42.             概况
  43.         </p>
  44.         <li><a href="#dili">地理<span>>></span></a></li>
  45.         <li><a href="#quhua">区划<span>>></span></a></li>
  46.         <li><a href="#qihou">气候<span>>></span></a></li>
  47.         <li><a href="#renkou">人口<span>>></span></a></li>
  48.         <p>
  49.             人文
  50.         </p>
  51.         <li><a href="#jieqing">节庆<span>>></span></a></li>
  52.         <li><a href="#mingzu">名族<span>>></span></a></li>
  53.         <li><a href="#lishi">历史<span>>></span></a></li>
  54.         <li><a href="#zongjiao">宗教<span>>></span></a></li>
  55.         </div>
  56.     </ul>
  57. </div>
  58. <div class="zhuti">
  59.     <div id="ship">
  60.         <embed src="xcp.mp4" width="600px" height="340px"
  61.                autostart="true" loop="true">
  62.         </embed>
  63.     </div>
  64.     <div id="dili">
  65.         <h4><a href="dili.mp4" target="_blank">地理</a></h4>
  66.         <p>
  67.             云南地处内陆高原，与东南亚的缅甸、老挝和越南三国接壤，边境线总长4060公里。云南，因“彩云现于南中”而得名，在云南的很多地方都能听到“彩云之南”的提法。
  68.         </p>
  69.         <p>
  70.             六大水系
  71.             云南境内有六大水系：金沙江——长江，南盘江——珠江，元江——红河，澜沧江——湄公河，怒江——萨尔温江，独龙江、大盈江、瑞丽江——伊洛瓦底江；它们分别注入三海——东海、南海、安达曼海和三湾——北部湾、莫塔马湾、孟加拉湾；并汇入两大洋——太平洋和印度洋。
  72.         </p>
  73.         <p>
  74.             云南“山的王国”
  75.             云南东部高原有轿子山、乌蒙山、梁王山、碘王山和六韶山等，西部排列着高大而狭长的高黎贡山、怒山和云岭等山脉。云南全省海拔2500米以上的主要山峰有30座。
  76.         </p>
  77.         <p>
  78.             云南湖泊众多
  79.             云南是我国湖泊最多的省份之一。东部主要有滇池、抚仙湖、阳宗海、杞麓湖及星云湖等，西部主要有洱海、程海、泸沽湖、剑湖、茈碧湖、纳帕海和碧塔海等，南部主要有异龙湖、长桥海和大屯海等。云南的湖泊多位于崇山峻岭之中，如明珠般散落，它们周围都山清水秀，风景如画。
  80.         </p>
  81.         <img src="images/dili.jpg">
  82.     </div>
  84.     <div id="quhua">
  85.         <h4><a href="https://baike.sogou.com/v76062142.htm?fromTitle=%E4%BA%91%E5%8D%97%E8%A1%8C%E6%94%BF%E5%8C%BA%E5%88%92#!" target="_blank">区划</a></h4>
  86.             <p>
  87.                 云南全省设16个州市，分别为昆明市、曲靖市、玉溪市、保山市、昭通市、丽江市、普洱市、临沧市、楚雄彝族自治州、红河哈尼族彝族自治州、文山壮族苗族自治州、西双版纳傣族自治州、大理白族自治州、德宏傣族景颇族自治州、怒江傈僳族自治州和迪庆藏族自治州。
  88.             </p>
  89.         <img src="images/quhua.jpg">
  90.     </div>
  91.     <div id="qihou">
  92.         <h4>气候</h4>
  93.         <p>
  94.             云南纬度较低，得到的太阳光热资源较多。“一山有四季，十里不同天”是对云南气候特征的形象描述，也是云南气候的一个主要特征。云南气候的另一个显著特征是“四季不分明，干湿季分明”，5～10月是一年中降雨量最集中的阶段，集中的降雨会对交通产生一定的影响。总体来说，云南气候条件优越，冬暖夏凉，四季如春，是四季皆宜的旅游胜地。
  95.         </p>
  96.         <p>
  97.             除了雨雪天气，云南并没有对旅行季节的明显限制，综合条件最佳的季节应该是4～7月、10～11月，这两个时段正逢春花秋月，冷暖适度，且保留了最本质的大自然色彩。
  98.         </p>
  99.     </div>
  100.     <div id="renkou">
  101.         <h4>人口</h4>
  102.         <p>
  103.             2022年，云南省总人口4693万人，比上年增加3万人。出生人口38.2万人，出生率8.14‰；死亡人口38.5万人，死亡率8.21‰；人口自然增长率-0.07‰。全省城镇人口2427万人，乡村人口2266万人，城镇化率51.72%，比上年提高0.67个百分点。
  104.         </p>
  105.         <img src="images/renkou.jpg">
  106.     </div>
  107.     <div id="jieqing">
  108.         <h4><a href="https://yn.yunnan.cn/cms_udf/2023/jqyn1/index.shtml" target="_blank">节庆</a></h4>
  109.         <p>
  110.             云南少数民族众多，每个民族都有自己的传统节日。白族人的节日非常多，除了迎送本主的本主节外，还有三月街、蝴蝶会、绕三灵、火把节等。此外，景颇族最隆重的目瑙纵歌节、傣族泼水节等节日也很有特色。
  111.         </p>
  112.         <h5><a href="https://baike.baidu.com/item/%E5%A4%A7%E7%90%86%E4%B8%89%E6%9C%88%E8%A1%97/4119259" target="_blank">三月街</a></h5>
  113.         <p>
  114.             又名“观音市”，是白族人民最盛大的节日，于每年农历三月十五日至二十一日在大理古城三月街举办，历时7天。它最初具有某些宗教活动的色彩，但是近年来已经演变为一个盛大的商贸活动。每逢三月街，街上人头攒动，各种商品琳琅满目，还有赛马等民族体育活动，非常热闹。
  115.         </p>
  116.         <img src="images/jieqing.jpg">
  117.         <h5><a href="https://baike.baidu.com/item/%E7%81%AB%E6%8A%8A%E8%8A%82/106484" target="_blank">火把节</a> </h5>
  118.         <p>
  119.             白族火把节于每年农历六月二十五日举行，是白族的传统节日，人们在这一天要进行祭祖、拜火把、点火把、耍火把和跳火把等活动，目的是祈求五谷丰登、风调雨顺。
  120.         </p>
  121.         <img src="images/huobajie.jpg">
  122.         <h5><a href="https://baike.baidu.com/item/%E6%99%AF%E9%A2%87%E6%97%8F%E7%9B%AE%E7%91%99%E7%BA%B5%E6%AD%8C/3436067" target="_blank">目瑙纵歌节</a> </h5>
  123.         <p>
  124.             目瑙纵歌节是景颇族最盛大、最隆重的节日，是中国西部地区的民族狂欢节，素有“天堂之舞”“万人狂欢舞”的美称。节日一般于每年的农历正月十五以后的9天之内举行，节期3～5天。节庆开始，村村寨寨的景颇人身穿节日盛装，从四面八方涌入目瑙广场。广场中央竖立着四根目瑙柱，广场四周用竹篱笆围起。舞蹈开始，由两名德高望重的老者带头（传统上由巫师带领），人们跟在后面通宵达旦地载歌载舞，热闹非凡。
  125.         </p>
  126.         <img src="images/munaozonggejie.jpg">
  127.         <h5><a href="https://www.bilibili.com/video/BV17z411i7Si?t=23.1">泼水节</a> </h5>
  128.         <p>
  129.             泼水节是傣历新年，也是傣族人最盛大的节日，傣语中称为“楞贺尚罕比买”，即“六月节”，时间是傣历每年的六月十三日到十五日，即公历的4月中旬左右。除了泼水活动之外，在3天的节庆期间，还有赛龙舟、放高升和孔明灯、赶摆等活动，其中丢包、民族歌舞和斗鸡、剽牛是最具民族风情的内容。
  130.         </p>
  131.         <img src="images/poshuijie.jpg">
  132.     </div>
  133.     <div id="mingzu">
  134.         <h4><a href="https://zhuanlan.zhihu.com/p/452853659" target="_blank">名族</a></h4>
  135.         <p>
  136.             云南省是全国世居少数民族最多、跨境民族最多、特有民族最多、人口较少民族最多、自治地方及实行民族区域自治的民族最多的省份。除汉族外，人口在5000人以上的世居少数民族总共有25个。云南的少数民族有彝族、白族、哈尼族、壮族、傣族、苗族、傈僳族、回族、拉祜族、佤族、纳西族、瑶族、藏族、景颇族、布朗族、普米族、怒族、阿昌族、基诺族、蒙古族、独龙族、满族、水族和布依族等。各民族的生活习惯和风俗虽然各不相同，但各民族和谐共处，形成了一道绚丽迷人的民族风情风景线。
  137.         </p>
  138.     </div>
  139.     <div id="lishi">
  140.         <h4><a href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97%E5%8E%86%E5%8F%B2/5627051" target="_blank">历史</a></h4>
  141.         <h5>云南元谋人</h5>
  142.         <p>
  143.             云南是人类文明重要的发祥地之一。云南元谋人生活在距今约170万年前，是我国历史上迄今为止发现的年代最早的猿人。到了新石器时代，在滇池、洱海附近形成了较大的村落，这里的人们使用石斧等简单的生产工具从事原始的农业生产。这时云南已进入了原始社会。
  144.         </p>
  145.         <h5>庄蹻入滇，建立了滇王国</h5>
  146.         <p>
  147.             但云南有文字记载的历史要从公元前3世纪（战国后期）开始。公元前286年左右，楚国人庄蹻率兵入滇，“以其众王滇，变服，从其俗，以长之”,在滇池一带建立了滇王国。在这一时期，云南和中原已经开始了文化和生产技术方面的交流。云南从此进入了奴隶社会。
  149.         </p>
  150.         <h5>秦设置郡县并开“五尺道”</h5>
  151.         <p>
  152.             公元前221年，秦始皇统一中国，在云南设置郡县，开“五尺道”，打通了咸阳经过四川和云南东部的联系之路，云南被纳入秦帝国版图。这标志着中央王朝对云南正式统治的开始。
  154.         </p>
  155.         <h5>汉武开滇</h5>
  156.         <p>
  157.             西汉时期，汉武帝派郭昌、卫广率兵入滇，设立益州郡，郡府设在滇池县（今晋宁县），云南为其中一个县，县城设在今祥云县的云南驿。汉武帝还派唐蒙扩建了“五尺道”，并改名为“西南夷道”。此外，汉王朝还开凿博南古道，促进了我国西南地区与东南亚各国，尤其是与缅甸、印度的贸易与文化交流。这就是历史上著名的“汉武开滇”。
  159.         </p>
  160.         <h5>三国时期的云南</h5>
  161.         <p>
  162.             三国时期，今云南、贵州和四川西南部被称为“南中”。公元225年，蜀汉丞相诸葛亮亲率大军入滇，七擒孟获，平定南中，使云南成为蜀汉的一部分。
  163.         </p>
  164.         <img src="images/lishi4.jpg"  alt="爨氏据滇" title="爨氏据滇">
  165.         <p>
  166.         公元317年，司马睿称帝，史称东晋。东晋初年，由内地迁至云南的爨氏势力逐渐强大，爨琛自立为王，统治滇池地区。爨氏统治历时400多年，其把滇池地区称作昆川（或昆卅），并与隋、唐王朝保持着经济文化联系。
  167.         </p>
  168.         <h5>六诏统一，南诏国统治</h5>
  169.         <p>
  170.             公元738年，唐王朝扶持蒙舍诏统一“六诏”，并封蒙舍诏诏主皮罗阁为云南王，建立了以洱海为中心的“南诏国”，南诏国统治云南的时间达200余年。南诏国内修制度，筑拓东城（今昆明），建崇圣寺三塔，发展经济，文化上积极学习先进的汉族文化，这使得云南范围内各地区、各民族间的经济文化联系空前密切。
  172.         </p>
  173.         <h5>大理国</h5>
  174.         <p>
  175.             公元897年，郑买嗣杀南诏王，建“大长和”；公元927年，杨干贞建“大义宁”；公元937年，段思平联络三十七部灭大义宁国，建立“大理国”政权。大理国政权基本上承袭了南诏以来的疆界，行政区划设有八府、四郡、三十七部，实行封建农奴制专政。大理国政权在云南的统治基本与中原的宋朝同期。大理王向宋朝称臣纳贡，其首领先后被宋朝封为“云南八国郡王”“大理王”等，并成为南宋王朝在西部战线抵御蒙古贵族的助手。在大理国统治期间，鄯阐城（今昆明）逐渐成为滇中最繁盛的一座城市。
  176.             建立云南行省
  177.             1253年，忽必烈“革囊渡江”，征服大理；1260年，忽必烈设“大理国总管”；1274年，忽必烈选派富有才干的回族人赛典赤到云南建立云南行省，任赛典赤为“云南行中书省平章政事”（相当于今省长），治中庆（今昆明）。云南行省的建立，使云南完全纳入了元朝的统一治理范围，开拓了云南历史的新局面。从此，“云南”之名便正式作为行省一级的机构出现在历史上。
  178.             明建政权1381年，明朝开国君主朱元璋派傅友德、蓝玉和沐英率大军西进平定云南，灭元朝梁王，1382年建立云南布政使司（相当于省政府）和都指挥司（相当于省军区），云南境内设府、州、县，实行以流官为主的统治；在边远地区则建立宣慰司、宣抚司、安抚司、长官司和“御夷”府州等，全由土司管辖。明朝时期，大量内地汉族人口入滇，这使得云南的经济得到迅速发展。
  179.         </p>
  180.         <h5>吴三桂进攻云南</h5>
  181.         <p>清朝初年，南明永历皇帝逃亡到云南。1659年，清王朝派平西王吴三桂追捕永历；1662年吴三桂从缅甸抓回永历皇帝，将其绞死在昆明金蝉寺（今华山西路“逼死坡”）。
  182.             清朝对云南的统治确立后，大量移民入滇。清政府推行“改土归流”，巩固了国家的统一，推进了边疆的开发。清代云南的矿冶业也有了较大的发展，并开始出现资本主义萌芽。
  183.         </p>
  184.         <h5>鸦片战争后的云南</h5>
  185.         <p>
  186.             鸦片战争后，云南与全国一道进入了半殖民地半封建社会，受到了以英法为首的帝国主义国家的侵略，云南各族人民展开了轰轰烈烈的反帝反封建斗争。1856年到1873年，云南回族人民以大理为中心建立了杜文秀政权。晚清时期，英国征服缅甸，法国征服越南，两国势力对云南产生了一定的影响。云南边境地区开放了几处通商口岸：腾冲、蒙自和思茅。1910年，法国投资的滇越铁路（中国境内部分今名昆河铁路）通车；1909年，清朝实行新政，云南编立新军，
  187.             资的滇越铁路（中国境内部分今名昆河铁路）通车；1909年，清朝实行新政，云南编立新军，成立陆军讲武堂；1911年10月30日（重阳节），蔡锷和唐继尧率新军发动重九起义，脱离清政府的统治；1915年12月25日，蔡锷、唐继尧又在此发动反对袁世凯的护国运动；之后滇军在云南形成割据局面，先后由唐继尧、龙云和卢汉等统治云南。
  188.         </p>
  189.         <img src="images/lishi5.jpg"alt="抗战时期的云南" title="抗战时期的云南">
  190.         <p>
  191.             1937年，抗日战争全面爆发，云南倾全力投入抗战，先后派出20万云南军队奔赴台儿庄和武汉等前线抗战，并投入10万多民工抢修滇缅公路，滇缅公路成为中国与境外联系的唯一交通线。美国将军陈纳德率领的飞虎队在云南境内对日作战，很多中国热血男儿也加入了飞虎队。滇缅公路被日军控制后，中美空军又开辟了飞越喜马拉雅山，从印度至中国昆明、成都和重庆的驼峰航线，以艰苦卓绝的物资空运支撑着国内的抗战；1942年，10多万中国远征军从云南
  192.             运支撑着国内的抗战；1942年，10多万中国远征军从云南进入缅甸配合英军与日军作战。日军击败英军，沿滇缅公路进至惠通桥，隔怒江与中国军队对峙两年。抗战后期，中国远征军在英美盟军的配合下展开缅北、滇西大反攻，获得全胜。1938年到1946年，坚持文化抗战的清华大学、北京大学和南开大学辗转西南各地，在昆明联合办学，校名为国立西南联合大学。
  193.         </p>
  194.         <p>1949年12月，云南宣布和平解放</p>
  195.     </div>
  196.     <div id="zongjiao">
  197.         <h4>宗教</h4>
  198.         <p>
  199.         云南一方面由于各少数民族不同程度地保存着原始宗教的诸多因素， 另一方面与缅甸、老挝、越南接壤，有16个民族跨境而居，为世界三大宗教的传播创造了有利条件，于是形成了多元、多层次的宗教文化，其内容和形式具有地域性、民族性特征。 云南人口在5000人以上的26个民族都有宗教信仰，除回族只信仰伊斯兰教外，其他民族的成员分别信仰两种或多种宗教。 各民族信奉的宗教种类有<a href="https://baike.baidu.com/item/%E4%BD%9B%E6%95%99/163332" target="_blank">佛教</a>、 <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E4%BC%8A%E6%96%AF%E5%85%B0%E6%95%99/1271312" target="_blank" >伊斯兰教</a>、<a href="https://www.chinacatholic.cn/" target="_blank">天主教</a> 、<a href="https://baike.baidu.com/item/%E5%9F%BA%E7%9D%A3%E6%95%99%E6%96%87%E5%8C%96/7315427" target="_blank">基督教</a> 、 <a href="https://baike.baidu.com/item/%E9%81%93%E6%95%99%E6%96%87%E5%8C%96/4715812" target="_blank">道教</a> 和<a href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97%E5%8E%9F%E5%A7%8B%E5%AE%97%E6%95%99/5628700" target="_blank">原始宗教</a> 六种。
  200.         </p>
  201.     </div>
  202. </div>
  203. </body>
  204. </html>
复制代码
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .w {
  6.     width: 1200px;
  7.     margin: auto;
  8. }
  9. body {
  10.     background-image: url("images/bj..png");
  11.     background-position: center;
  12.     background-repeat: no-repeat;
  13.     background-attachment: fixed;
  14.     background-size: cover;
  15. }
  16. li {
  17.     list-style: none;
  18. }
  19. a {
  20.     text-decoration: none;
  21. }
  22. .header {
  23.     height: 52px;
  24.     background-color: #3a8dea;
  25.     margin: 30px auto;
  26. }
  27. .logo {
  28.     float: left;
  29.     width:200px ;
  30.     height: 52px;
  31.     background-color: lightpink;
  32. }
  33. .nav {
  34.     float: left;
  35.     margin-left: 90px;
  36. }
  37. .nav ul li {
  38.     float:left;
  39.     margin: 0 15px;
  40. }
  41. .nav ul li a {
  42.     display: block;
  43.     height:52px;
  44.     padding: 0 10px;
  45.     line-height: 52px;
  46.     font-size: 20px;
  47.     color: black;
  48. }
  49. .nav ul li a:hover {
  50.     color: hotpink;
  51.     background-color: lightpink;
  52. }
  53. .search {
  54.     float: left;
  55.     width: 312px;
  56.     height: 52px;
  57.     background-color: skyblue;
  58.     margin-left: 50px;
  59. }
  60. .search input {
  61.     float: left;
  62.     width: 225px;
  63.     height: 48px;
  64.     border: 2px solid #00a4ff;
  65.     border-right: 0;
  66.     color: #bfbfbf;
  67.     font-size: 18px;
  68.     padding-left: 15px;
  69. }
  70. .search button {
  71.     float:left;
  72.     width: 70px;
  73.     height: 52px;
  74.     border: 0;
  75.     background: url(images/sousuo.png);
  76. }
  78. .mulu {
  79.     float: left;
  80.     width: 200px;
  81.     margin-top: 30px;
  82.     position: fixed;
  83.     font-family: 楷体;
  84.     font-weight: bold;
  85. }
  86. p {
  87.     font-family: 楷体;
  88.     font-weight: bold;
  89.     font-size: large;
  90.     padding: 10px;
  91. }
  92. #d1 {
  93.     font-size: 100%;
  94.     color: #4528b2;
  95.     float: left;
  96.     width: 70px;
  97.     height: 20px;
  98.     padding: 5px 5px;
  99.     margin: 4px;
  100. }
  101. #d2 {
  102.     clear: both;
  103. }
  105. .mulu ul li {
  106.     list-style-type: none;
  107. }
  109. .mulu ul {
  110.     margin: 0;
  111.     padding: 15px 10px 15px 10px;
  112. }
  114. .mulu ul li a {
  115.     display: block;
  116.     text-decoration: none;
  117.     color: rgb(87, 74, 197);
  118.     line-height: 30px;
  119.     border-bottom: 1px dashed black;
  120.     padding: 0 0 0 0;
  121. }
  123. .mulu ul li a:hover {
  124.     color: #0de53e;
  125. }
  127. .mulu span {
  128.     float: right;
  129. }
  131. .zhuti {
  132.     margin: 20px 180px 1px 240px;
  133. }
  134. .zhuti a:hover {
  135.     color: #0de53e;
  136. }
  137. h4 {
  138.     font-size: 25px;
  139.     font-weight: bold;
  140.     font-family: 楷体;
  141.     text-align: center;
  142.     color: dodgerblue;
  143. }
  144. h5 {
  145.     color: #1565ce;
  146.     font-size: 20px;
  147.     font-weight: bold;
  148.     font-family: 楷体;
  149.     text-align: center;
  150. }
  151. #ship {
  152.     text-align: center;
  153.     margin-top: 10px;
  154. }
  155. #dili {
  156.     clear: both;/*浮动清除*/
  157.     margin-top: 30px;
  158.     padding: 15px;
  159. }
  160. #dili img {
  161.     border-radius: 5%;
  162.     width: 400px;
  163.     height: 300px;
  164.     margin: 5px 100px 0 300px;
  165. }
  166. #dili img:hover {
  167.     transform: scale(1.5);
  168. }
  169. #dili p {
  170.     letter-spacing: 2px;
  171.     text-indent: 2em;
  172.     line-height: 1.5em;
  173. }
  174. #quhua {
  175.     clear: both;
  176.     margin-top: 20px;
  177.     padding: 15px;
  178. }
  179. #quhua img {
  180.     border-radius: 5%;
  181.     width: 400px;
  182.     height: 300px;
  183.     margin: 5px 100px 0 300px;
  184. }
  185. #quhua img:hover {
  186.     transform: scale(1.5);
  187. }
  188. #quhua p {
  189.     letter-spacing: 2px;
  190.     text-indent: 2em;
  191.     line-height: 1.5em;
  192. }
  193. #qihou {
  194.     clear: both;
  195.     margin-top: 30px;
  196.     padding: 15px;
  197. }
  198. #qihou p {
  199.     letter-spacing: 2px;
  200.     text-indent: 2em;
  201.     line-height: 1.5em;
  202. }
  203. #renkou {
  204.     clear: both;
  205.     margin-top: 30px;
  206.     padding: 15px;
  207. }
  208. #renkou img {
  209.     border-radius: 5%;
  210.     width: 400px;
  211.     height: 300px;
  212.     margin: 5px 100px 0 300px;
  213. }
  214. #renkou img:hover {
  215.     transform: scale(1.5);
  216. }
  217. #renkou p {
  218.     letter-spacing: 2px;
  219.     text-indent: 2em;
  220.     line-height: 1.5em;
  221. }
  222. #jieqing {
  223.     clear: both;
  224.     margin-top: 30px;
  225.     padding: 15px;
  226. }
  227. #jieqing img {
  228.     border-radius: 5%;
  229.     width: 400px;
  230.     height: 300px;
  231.     margin: 5px 100px 0 300px;
  232. }
  233. #jieqing img:hover {
  234.     transform: scale(1.2);
  235. }
  236. #jieqing p {
  237.     letter-spacing: 2px;
  238.     text-indent: 2em;
  239.     line-height: 1.5em;
  240. }
  241. #mingzu {
  242.     clear: both;
  243.     margin-top: 30px;
  244.     padding: 15px;
  245. }
  246. #mingzu p {
  247.     letter-spacing: 2px;
  248.     text-indent: 2em;
  249.     line-height: 1.5em;
  250. }
  251. #lishi {
  252.     clear: both;
  253.     margin-top: 30px;
  254.     padding: 15px;
  255. }
  256. #lishi img {
  257.     border-radius: 5%;
  258.     width: 200px;
  259.     height: 180px;
  260.     margin: 5px 100px 0 400px;
  261. }
  262. #lishi img:hover {
  263.     transform: scale(1.2);
  264. }
  265. #lishi p {
  266.     letter-spacing: 2px;
  267.     text-indent: 2em;
  268.     line-height: 1.5em;
  269. }
  270. #zongjiao {
  271.     clear: both;
  272.     margin-top: 30px;
  273.     padding: 15px;
  274. }
  275. #zongjiao p {
  276.     letter-spacing: 2px;
  277.     text-indent: 2em;
  278.     line-height: 1.5em;
  279. }
复制代码
旅游攻略页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>travel strategy</title>
  6.     <link rel="stylesheet" href="strategy.css">
  7. </head>
  8. <body>
  9. <div class="header w" id="h">
  10.     <div class="logo">
  11.         <img src="images/logo.png">
  12.     </div>
  13.     <div class="nav">
  14.         <ul>
  15.             <li><a href="index.html#">首页</a></li>
  16.             <li><a href="brief%20introduction.html#">七彩云南</a></li>
  17.             <li><a href="travel%20strategy.html#">旅游攻略</a></li>
  18.             <li><a href="user.html#">用户</a></li>
  19.         </ul>
  20.     </div>
  21.     <div class="search">
  22.         <input type="txt" value="输入关键词">
  23.         <button></button>
  24.     </div>
  25. </div>
  26.     <div class="mulu">
  27.         <ul>
  28.             <li>
  29.                 <div id="d1"><a href="#h">旅游攻略</a></div>
  30.             </li>
  31.             <div id="d2">
  32.             <hr size="3" color="gray">
  33.             <li><a href="#dianzhong">滇中地区<span>>></span></a></li>
  34.             <li><a href="#dianxibei">滇西北地区<span>>></span></a></li>
  35.             <li><a href="#dianxi">滇西地区<span>>></span></a></li>
  36.             <li><a href="#diannan">滇南地区<span>>></span></a></li>
  37.             </div>
  38.         </ul>
  39.     </div>
  40. <div class="box">
  41.     <img src="images/R-C.gif" width="100px" height="100px">
  42. </div>
  43.     <div class="zhuti">
  44.         <div id="dianzhong">
  45.             <h2>滇中地区</h2>
  46.             <p class="important">
  47.                 <b>
  48.                 滇中地区由昆明市、玉溪市和楚雄彝族自治州组成，其中昆明为该区的中心。这里的旅游资源很丰富，有石林、滇池/海埂公园、翠湖公园、云南大学、金马碧鸡坊等景点。
  49.                 </b>
  50.             </p>
  51.             <table border="2">
  52.                 <tr>
  53.                     <th>
  54.                         <div id="shilin">
  55.                             <img src="images/shilin.jpg" alt="石林" title="被誉为“天下第一奇观”">
  56.                             <h2>石林</h2>
  57.                             <p>
  58.                                 石林，意指石头的森林。石林形成于2亿多年前，是石灰岩长期被水冲刷溶蚀而形成的，属于典型的喀斯特地貌，其被誉为“天下第一奇观”。
  59.                             </p>
  60.                             <span>
  61.                                 <a href="http://www.shilin.com.cn/public/protal/zh-CHS/index.html" target="_blank">
  62.                                     <p>>>>
  63.                                     </p>
  64.                                 </a>
  65.                             </span>
  66.                         </div>
  67.                     </th>
  68.                 </tr>
  69.                 <tr>
  70.                     <th>
  71.                         <div id="dianchi">
  72.                         <img src="images/haigen.jpg" alt="滇池/海埂公园" title="风景秀丽的自然公园">
  73.                         <h2>滇池/海埂公园</h2>
  74.                             <p>
  75.                                 湖面开阔的滇池，在西山的衬托下，景色如画一般美丽。冬天，很多人来此看红嘴鸥，但除了此景，漫步在滇池的长提上，也是很好的享受。
  76.                             </p>
  77.                             <span>
  78.                                 <a href="https://baike.baidu.com/item/%E7%BF%A0%E6%B9%96%E5%85%AC%E5%9B%AD/6515620" target="_blank">
  79.                                     <p>
  80.                                         >>>
  81.                                     </p>
  82.                                 </a>
  83.                             </span>
  84.                         </div>
  85.                     </th>
  86.                 </tr>
  87.                 <tr>
  88.                     <th>
  89.                         <div id="cuihu">
  90.                         <img src="images/cuihu.jpg" alt="翠湖公园" title="赏海鸥的最佳之地">
  91.                         <h2>翠湖公园</h2>
  92.                             <p>
  93.                                 翠湖公园以冬天的红嘴鸥为主要看点。每年的11月到次年3月，从西伯利亚长途跋涉而来的红嘴鸥就会在昆明过冬。
  94.                             </p>
  95.                             <span>
  96.                                 <a href="https://baike.baidu.com/item/%E5%98%89%E9%99%B5%E6%B1%9F%E6%BA%90%E5%A4%B4%E9%A3%8E%E6%99%AF%E5%8C%BA/9076000?fromtitle=%E5%98%89%E9%99%B5%E6%B1%9F%E6%BA%90%E5%A4%B4&fromid=7970677" target="_blank">
  97.                                     <p>>>>
  98.                                     </p>
  99.                                 </a>
  100.                             </span>
  101.                         </div>
  102.                     </th>
  103.                 </tr>
  104.                 <tr>
  105.                     <th>
  106.                         <div id="jwt">
  107.                             <img src="images/jwt.jpg" alt="讲武堂" title="培育将帅的摇篮">
  108.                             <h2>讲武堂</h2>
  109.                             <p>
  110.                                 讲武堂是中国近现代史上最重要的军事院校，从这里走出的许多将帅承担了很长时间的中国革命和国防的历史重任，可谓中国将帅的摇篮。
  111.                             </p>
  112.                             <span>
  113.                                 <a href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97%E9%99%86%E5%86%9B%E8%AE%B2%E6%AD%A6%E5%A0%82/901480" target="_blank">
  114.                                     <p>>>>
  115.                                     </p>
  116.                                 </a>
  117.                             </span>
  118.                         </div>
  119.                     </th>
  120.                 </tr>
  121.                 <tr>
  122.                     <th>
  123.                         <div id="bwg">
  124.                         <img src="images/ynsbwg.jpg" alt="云南省博物馆" title="具有地方特色综合性博物馆">
  126.                         <h2>云南省博物馆</h2>
  127.                             <p>
  128.                                 云南省博物馆是人们了解古滇国历史的最佳去处，其发达的青铜文明展示了古滇国先民的智慧，此外这里还有云南省各少数民族的风情展示。
  129.                             </p>
  130.                             <span>
  131.                                 <a href="https://ynmuseum.org/index.html" target="_blank">
  132.                                     <p>>>>
  133.                                     </p>
  134.                                 </a>
  135.                             </span>
  136.                         </div>
  137.                     </th>
  138.                 </tr>
  139.                 <tr>
  140.                     <th>
  141.                         <div id="jmbjf">
  142.                         <img src="images/jmbjf.jpg" alt="金马碧鸡坊" title="有“金碧交辉”之奇观">
  143.                             <h2>金马碧鸡坊</h2>
  144.                             <p>
  145.                                 至今已有近400年的历史的金马碧鸡坊，地处昆明闹市，作为昆明的象征，至今这里仍然是游人到访昆明的必游之处，尤其是黄昏时分，很多摄影爱好者都会来此拍照。
  146.                             </p>
  147.                             <span><a href="https://baike.baidu.com/item/%E9%87%91%E9%A9%AC%E7%A2%A7%E9%B8%A1%E5%9D%8A/902721" target="_blank">
  148.                                     <p>>>>
  149.                                     </p>
  150.                                 </a>
  151.                             </span>
  152.                         </div>
  153.                     </th>
  154.                 </tr>
  155.                 <tr>
  156.                     <th>
  157.                         <ul>
  158.                             <li><a href="#dianzhongluxian">滇中旅游路线推荐<span>>></span></a></li>
  159.                             <li><a href="#dianzhongms">滇中美食<span>>></span></a></li>
  160.                         </ul>
  161.                     </th>
  162.                 </tr>
  163.             </table>
  164.         </div>
  165.         <div id="dianxibei">
  166.             <h2>滇西北地区</h2>
  167.             <p class="important">
  168.                 <b>
  169.                 滇西北地区有风花雪月的大理、丽江、世外桃源般的地方——香格里拉。这些都是游客心目中最佳的旅游目的地，其中丽江已经蜚声海内外，成为云南旅游不可不去的地方。
  170.                 </b>
  171.             </p>
  172.             <table border="2">
  173.                 <tr>
  174.                     <th>
  175.                         <div id="dlgc">
  176.                             <img src="images/dlgc.jpg" alt="大理古城" title="洱海边，苍山下，一座保持着明清时期格局的古城">
  177.                             <h2>大理古城</h2>
  178.                             <p>
  179.                                 大理古城的魅力，不在于路过时看到的浮光掠影，而是苍山洱海亘古不变的古朴。大理古城属大理市的大理镇，是国务院首批24个历史文化名城之一。著名景点有古城、苍山、洱海、崇圣寺三塔、蝴蝶泉、白族风情等。
  180.                             </p>
  181.                             <span>
  182.                                 <a href="https://baike.baidu.com/item/%E5%A4%A7%E7%90%86%E5%8F%A4%E5%9F%8E/1874828" target="_blank">
  183.                                     <p>>>>
  184.                                     </p>
  185.                                 </a>
  186.                             </span>
  187.                         </div>
  188.                     </th>
  189.                 </tr>
  190.                 <tr>
  191.                     <th>
  192.                         <div id="slz">
  193.                         <img src="images/slz.jpg" alt="双廊镇" title="洱海边人气最旺的一个古镇">
  194.                         <h2> 双廊镇</h2>
  195.                             <p>
  196.                                 双廊镇风景宜人，古镇一直都是背包客的最爱。从双廊镇中心到洱海边，有一座南诏风情岛，是比较高档的度假区。在古镇的高处可以俯瞰风情岛，也是摄影采风的观景台。
  197.                             </p>
  198.                             <span>
  199.                                 <a href="https://baike.baidu.com/item/%E5%8F%8C%E5%BB%8A%E9%95%87/10094494" target="_blank">
  200.                                     <p>
  201.                                         >>>
  202.                                     </p>
  203.                                 </a>
  204.                             </span>
  205.                         </div>
  206.                     </th>
  207.                 </tr>
  208.                 <tr>
  209.                     <th>
  210.                         <div id="cssst">
  211.                         <img src="images/cssst.jpg" alt="崇圣寺三塔" title="大理的标志性建筑">
  212.                         <h2>崇圣寺三塔</h2>
  213.                             <p>
  214.                                 大理三塔，巍峨壮观，虽门票不菲，但还是很值得人们进去看看，在外围远远地扫一下着实不能尽兴。要拍摄三塔，应先去三塔倒影公园，且必须是早上，因为此时的光线角度和风向都是最佳，能拍到三塔倒影。
  215.                             </p>
  216.                             <span>
  217.                                 <a href="https://baike.baidu.com/item/%E5%B4%87%E5%9C%A3%E5%AF%BA%E4%B8%89%E5%A1%94/413481" target="_blank">
  218.                                     <p>
  219.                                         >>>
  220.                                     </p>
  221.                                 </a>
  222.                             </span>
  223.                         </div>
  224.                     </th>
  225.                 </tr>
  226.                 <tr>
  227.                     <th>
  228.                         <div id="hdqgy">
  229.                             <img src="images/hdq.jpg" alt="蝴蝶泉公园" title="以蝴蝶泉而闻名">
  230.                             <h2>蝴蝶泉公园</h2>
  231.                             <p>
  232.                                 蝴蝶泉是电影《五朵金花》中阿鹏、金花对歌谈情的地方。300多年前，徐霞客在游记中就写道：“蝴蝶泉之异，余闻之已久。”蝴蝶泉有三绝：泉、蝶、树。每年4月，蝴蝶泉边合欢树花开如蝶，清香扑鼻，花飞蝶舞，成蝴蝶泉的一大奇观。
  233.                             </p>
  234.                             <span>
  235.                                 <a href="https://baike.baidu.com/item/%E8%9D%B4%E8%9D%B6%E6%B3%89/5562" target="_blank">
  236.                                     <p>>>>
  237.                                     </p>
  238.                                 </a>
  239.                             </span>
  240.                         </div>
  241.                     </th>
  242.                 </tr>
  243.                 <tr>
  244.                     <th>
  245.                         <div id="lgh">
  246.                         <img src="images/lgh.jpg" alt="泸沽湖" title="享有“高原明珠” 之称">
  247.                         <h2>泸沽湖</h2>
  248.                             <p>
  249.                                 泸沽湖是摩梭人的故乡，湖上散落着大大小小的岛屿，女儿国和摩梭文化给这里蒙上了一层神秘的面纱。游人可以坐上猪槽船在湖中穿行，看美丽的摩梭姑娘跳舞，听摩梭人动人悦耳的歌声，看日出日落。
  250.                             </p>
  251.                             <span>
  252.                                 <a href="https://baike.baidu.com/item/%E6%B3%B8%E6%B2%BD%E6%B9%96/396555" target="_blank">
  253.                                     <p>>>>
  254.                                     </p>
  255.                                 </a>
  256.                             </span>
  257.                         </div>
  258.                     </th>
  259.                 </tr>
  260.                 <tr>
  261.                     <th>
  262.                         <div id="slgy">
  263.                         <img src="images/pdc.jpg" alt="普达措国家森林公园" title="中国第一个真正意义上的国家公园">
  264.                             <h2>普达措国家森林公园</h2>
  265.                             <p>
  266.                                 普达措国家森林公园位于“三江并流”的世界自然遗产中心地带，由原来的碧塔海自然保护区和红山片区属都湖景区构成。湖边美不胜收的草原，鲜花遍开，湖中有小岛装饰，犹如仙境。公园以高原湖泊、草甸、森林和峡谷为主的自然景观，还有散养的牲畜，是人们喜闻乐见的滇西北风光。
  267.                             </p>
  268.                             <span><a href="https://www.pdcuo.com/" target="_blank">
  269.                                     <p>>>>
  270.                                     </p>
  271.                                 </a>
  272.                             </span>
  273.                         </div>
  274.                     </th>
  275.                 </tr>
  276.                 <tr>
  277.                     <th>
  278.                         <ul>
  279.                             <li><a href="#dianxibeiluxian">滇西北旅游路线推荐<span>>></span></a></li>
  280.                             <li><a href="#dianxibeims">滇西北美食<span>>></span></a></li>
  281.                         </ul>
  282.                     </th>
  283.                 </tr>
  284.             </table>
  285.         </div>
  286.         <div id="dianxi">
  287.             <h2>滇西地区</h2>
  288.             <p class="important">
  289.                 <b>
  290.                 僳族自治州。这里地处横断山南部，境内地形复杂多样，地势北高南低。腾冲是著名的侨乡、古西南丝绸之路的要冲，也是一座历史文化名城。临沧有着灿烂的民族文化和神奇的古代文明，显示着厚重的文化积淀，是佤族文化的荟萃之地。瑞丽是一座美丽的边境口岸城市。
  291.                 滇西地区旅游资源非常丰富，有众多的人文遗迹和神秘的民族风情。过去这里并非旅游热点，近年来这里的旅游业正逐步升温。
  292.                 </b>
  293.             </p>
  294.             <table border="2">
  295.                 <tr>
  296.                     <th>
  297.                         <div id="rh">
  298.                             <img src="images/rh.jpg" alt="热海" title="因其高温、滚烫而闻名">
  299.                             <h2>热海</h2>
  300.                             <p>
  301.                                 世界上有温泉的地方很多，但像热海这样面积之大、泉眼之多、温度之高，在全球都比较少见。热海中最典型的是“大滚锅”,它的直径约3米，水深1.5米，水温达97℃，昼夜翻滚沸腾，四季热气蒸腾。
  302.                             </p>
  303.                             <span>
  304.                                 <a href="https://baike.baidu.com/item/%E8%85%BE%E5%86%B2%E7%83%AD%E6%B5%B7%E9%A3%8E%E6%99%AF%E5%8C%BA/7724098" target="_blank">
  305.                                     <p>>>>
  306.                                     </p>
  307.                                 </a>
  308.                             </span>
  309.                         </div>
  310.                     </th>
  311.                 </tr>
  312.                 <tr>
  313.                     <th>
  314.                         <div id="mlrdyl">
  315.                         <img src="images/mlrd.jpg" alt="莫里热带雨林景区" title="一个天然森林大氧吧">
  316.                         <h2>莫里热带雨林景区</h2>
  317.                             <p>
  318.                                 莫里热带雨林景区是集热带雨林、宗教圣地、度假娱乐为一体的景区。走进莫里，游客会感到一种神秘感始终追随，据说，这里是我国负氧离子最高的一个天然森林氧吧。整个景区以扎朵瀑布最为闻名
  319.                             </p>
  320.                             <span>
  321.                                 <a href="https://www.mlrdyl.cn/" target="_blank">
  322.                                     <p>
  323.                                         >>>
  324.                                     </p>
  325.                                 </a>
  326.                             </span>
  327.                         </div>
  328.                     </th>
  329.                 </tr>
  330.                 <tr>
  331.                     <th>
  332.                         <div id="hsgz">
  333.                         <img src="images/cuihu.jpg" alt="和顺古镇" title="因华侨很多，故有“和顺侨乡”之称">
  334.                         <h2>和顺古镇</h2>
  335.                             <p>
  336.                                 和顺古镇入口正对的一处高台阶上有一座院落，这里是我国第一个民间出资建设、民间收藏、以滇西抗战为主题的博物馆，博物馆的旁边就是和顺人为之自豪的和顺图书馆，和顺人爱读书，重教育。小小的图书馆里蕴藏着和顺人对知识的尊重和对未来寄予的希望。
  337.                             </p>
  338.                             <span>
  339.                                 <a href="http://www.tchsgz.com/" target="_blank">
  340.                                     <p>>>>
  341.                                     </p>
  342.                                 </a>
  343.                             </span>
  344.                         </div>
  345.                     </th>
  346.                 </tr>
  347.                 <tr>
  348.                     <th>
  349.                         <div id="njdyw">
  350.                             <img src="images/njdyw.jpg" alt="怒江第一湾" title="怒江大峡谷的标志性景观">
  351.                             <h2>怒江第一湾</h2>
  352.                             <p>
  353.                                 怒江第一湾景观只在丙中洛能观赏到。由于王箐大悬岩绝壁的阻隔，江水的流向从由北向南改为由东向西，流出300余米后，又被丹拉大山挡住去路，只好再次调头由西向东急转，在这里形成了一个半圆形大湾，为怒江第一湾。
  354.                             </p>
  355.                             <span>
  356.                                 <a href="https://baike.baidu.com/item/%E6%80%92%E6%B1%9F%E7%AC%AC%E4%B8%80%E6%B9%BE/8948664" target="_blank">
  357.                                     <p>>>>
  358.                                     </p>
  359.                                 </a>
  360.                             </span>
  361.                         </div>
  362.                     </th>
  363.                 </tr>
  364.                 <tr>
  365.                     <th>
  366.                         <ul>
  367.                             <li><a href="#dianxiluxian">滇西旅游路线推荐<span>>></span></a></li>
  368.                             <li><a href="#dianxims">滇西美食<span>>></span></a></li>
  369.                         </ul>
  370.                     </th>
  371.                 </tr>
  372.             </table>
  373.         </div>
  374.         <div id="diannan">
  375.             <h2>滇南地区</h2>
  376.             <p class="important">
  377.                 <b>
  378.                 滇南地区，主要有西双版纳傣族自治州、红河哈尼族彝族自治州、文山壮族苗族自治州、普洱市。西双版纳被称为“物种基因库”和“植物王国皇冠上的绿宝石”，是北回归线沙漠带上唯一的一片绿洲。红河呈现一派南亚热带风光，在这里既可游览建水古城，又能体会到独特的哈尼族风情。文山壮族苗族自治州享有“三七之乡”的美誉。普洱曾是“茶马古道”上重要的驿站，如今是我国普洱茶的重要产地之一。
  379.                 滇南地区有元阳梯田、热带雨林等自然风光，还有建水古镇、迤萨古镇等人文景点，甚至还可以体验少数民族风情，如傣族泼水节、哈尼歌舞。
  380.                 </b>
  381.             </p>
  382.             <table border="2">
  383.                 <tr>
  384.                     <th>
  385.                         <div id="xsbn">
  386.                             <img src="images/yxg.jpg" alt="西双版纳野象谷" title="因野象出没而得名">
  387.                             <h2>西双版纳野象谷</h2>
  388.                             <p>
  389.                                 西双版纳野象谷是动物园和植物园的完美结合，游客可观赏蟒蛇园、蝴蝶园、猴园和百鸟园，还可以观赏驯象表演、中国第一所驯象学校的大象按摩等精彩表演，并可入住树上旅馆。
  390.                             </p>
  391.                             <span>
  392.                                 <a href="https://baike.baidu.com/item/%E9%87%8E%E8%B1%A1%E8%B0%B7/874579" target="_blank">
  393.                                     <p>>>>
  394.                                     </p>
  395.                                 </a>
  396.                             </span>
  397.                         </div>
  398.                     </th>
  399.                 </tr>
  400.                 <tr>
  401.                     <th>
  402.                         <div id="gz">
  403.                         <img src="images/gz.jpg" alt="迤萨古镇" title="茶马古道上的一座旧城">
  404.                         <h2>迤萨古镇</h2>
  405.                             <p>
  406.                                 一座颇有故事的茶马古道上的旧城，马帮盛况早已不再，各种风格的建筑物展示着曾经的富足殷实。那些来自遥远地区的建筑元素，显示了马帮闯荡的路途之远。
  407.                             </p>
  408.                             <span>
  409.                                 <a href="https://culture.yunnan.cn/system/2022/12/07/032379945.shtml" target="_blank">
  410.                                     <p>
  411.                                         >>>
  412.                                     </p>
  413.                                 </a>
  414.                             </span>
  415.                         </div>
  416.                     </th>
  417.                 </tr>
  418.                 <tr>
  419.                     <th>
  420.                         <div id="gnbb">
  421.                         <img src="images/gnbb.jpg" alt="广南八宝" title="享有“高原小桂林”之美称">
  422.                         <h2>广南八宝</h2>
  423.                             <p>
  424.                                 八宝风景区素来号称“高原小桂林”，在桂林能看到的山水景观，这里几乎都有。八宝河两岸，分布着许多壮族村庄，此处领略到的壮乡风情并不输于桂林阳朔。
  425.                             </p>
  426.                             <span>
  427.                                 <a href="https://baike.baidu.com/item/%E5%85%AB%E5%AE%9D%E9%95%87/3524268" target="_blank">
  428.                                     <p>>>>
  429.                                     </p>
  430.                                 </a>
  431.                             </span>
  432.                         </div>
  433.                     </th>
  434.                 </tr>
  435.                 <tr>
  436.                     <th>
  437.                         <div id="bm">
  438.                             <img src="images/bm.jpg" alt="坝美" title="堪称现实中的世外桃源">
  439.                             <h2>坝美</h2>
  440.                             <p>
  441.                                 各种桃园圣地多少都显得有自封之嫌，坝美倒是一处颇值得称道的秘境，坝美的地势环境与《桃花源记》中所描写的景观极其接近，这个壮族村寨也成为背包客们去滇南的必到之处。
  443.                             </p>
  444.                             <span>
  445.                                 <a href="https://zhuanlan.zhihu.com/p/609181730" target="_blank">
  446.                                     <p>>>>
  447.                                     </p>
  448.                                 </a>
  449.                             </span>
  450.                         </div>
  451.                     </th>
  452.                 </tr>
  453.                 <tr>
  454.                     <th>
  455.                         <div id="bnyssl">
  456.                         <img src="images/xsbnysslgy.jpg"  alt="西双版纳原始森林公园" title="呼吸新鲜的空气，体验民族风情">
  457.                         <h2>西双版纳原始森林公园</h2>
  458.                             <p>
  459.                                 远离城市的喧嚣，在西双版纳原始森林公园呼吸新鲜的空气，体验民族风情。在公园内可以欣赏孔雀放飞、民间服装展演、九龙飞瀑、少数民族乐器表演、泼水欢歌活动等项目。
  460.                             </p>
  461.                             <span>
  462.                                 <a href="https://baike.baidu.com/item/%E8%A5%BF%E5%8F%8C%E7%89%88%E7%BA%B3%E5%8E%9F%E5%A7%8B%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9B%AD/6598675" target="_blank">
  463.                                     <p>>>>
  464.                                     </p>
  465.                                 </a>
  466.                             </span>
  467.                         </div>
  468.                     </th>
  469.                 </tr>
  470.                 <tr>
  471.                     <th>
  472.                         <div id="qbpzh">
  473.                         <img src="images/pzh.jpg"  alt="丘北普者黑" title="《爸爸去哪儿》第一季的外景拍摄地之一">
  474.                             <h2>丘北普者黑</h2>
  475.                             <p>
  476.                                 普者黑是文山境内著名的彝乡，其开发比较早，游乐项目的门票也很贵。普者黑以喀斯特地貌和湖景为主要景观，适合摄影采风，湖里出产的鲜鱼也极有吸引力。
  477.                             </p>
  478.                             <span><a href="http://www.qbpzh.net/">
  479.                                     <p>>>>
  480.                                     </p>
  481.                                 </a>
  482.                             </span>
  483.                         </div>
  484.                     </th>
  485.                 </tr>
  486.                 <tr>
  487.                     <th>
  488.                         <ul>
  489.                             <li><a href="#diannanluxian">滇南旅游路线推荐<span>>></span></a></li>
  490.                             <li><a href="#diannanms">滇南美食<span>>></span></a></li>
  491.                         </ul>
  492.                     </th>
  493.                 </tr>
  494.             </table>
  495.         </div>
  496.         <div id="dianzhongluxian">
  497.             <h2>滇中路线推荐 </h2>
  498.             <img src="images/dzlx.jpg"  alt="滇中地区旅行交通示意图" >
  499.             <p>滇中地区的旅游资源丰富且交通很便捷，游客可以以昆明为中心设计自己的游览线路。若想游玩滇中地区的昆明、玉溪、楚雄和曲靖四个城市的景点，则需要花费数十日了。</p>
  500.             <h5>昆明休闲一日游</h5>
  501.             <p>这一天主要在昆明市内活动，四个地方相距很近，步行前往即可，走在浓密的树阴下很惬意。景点周边小吃很多，还有好吃的米线，中午和晚上吃饭很方便。DAY1: 翠湖公园—云南陆军讲武堂—云南大学—金马碧鸡坊</p>
  502.                 <h5>昆明市经典一日游</h5>
  503.             <p> 这条路线上的景点都在昆明近郊，在金殿乘坐缆车可直接到达世博园，两个景点游玩一个上午即可。下午再世博园乘坐47路公交车在环城南路口站下车，换乘44路，可直达海埂公园，车程大约1小时40分钟。DAY1: 金殿风景区—世界园艺博览会—滇池/海埂公园</p>
  504.             <h5>昆明石林一日游</h5>
  505.             <p>昆明汽车东部客运站每半小时就有一趟去往石林的大巴，车程约2小时，石林景区面积较大，在大石林景区徒步走一圈需要三四个小时，小石林景区则需要2小时左右。因此，建议给石林这个景点单独预留一天游玩时间。</p>
  506.             <h5>九乡溶洞一日游</h5>
  507.             <p>从昆明去九乡，需要昆明火车站或茶苑宾馆附近，有中巴车直达景区；昆明汽车北站、或东部汽车站，坐车到宜良，再转乘车到九乡。由于距离较远，路途上比较浪费时间。</p>
  508.         </div>
  509.         <div id="dianxibeiluxian">
  510.             <h2>滇西北路线推荐 </h2>
  511.             <img src="images/dxblx.jpg" alt="滇西北地区旅行交通示意图" >
  512.             <p>滇西北地区以大理、丽江、香格里拉、德钦为主要旅行地，人们常称之为滇西北黄金旅行路线以及大香格里拉地区，这条路线拥有国内最为精彩的风景，在五彩缤纷的云南，这条线也具备最大的旅行价值。</p>
  513.             <h5>大理二日游</h5>
  514.             <p>大理古城几近完美，值得多待几天。三月街是大理白族自治州很著名的集市，赶集时间平均每月有四次，差不多每周都能赶上一次。苍山是大理的地标景观，玉带云游路是安全可靠的山路，适合徒步。
  515.                 大理三塔，隽秀挺拔，巍峨壮观，值得人们进去看看。游览三塔主景区需要两个小时，然后出来去双廊镇，这样可以一路饱览洱海风光。
  516.                 DAY1: 大理古城—三月街会场—苍山
  517.                 DAY2: 崇圣寺三塔—洱海—双廊镇</p>
  518.                 <h5>丽江三日游</h5>
  519.             <p> 在丽江古城，抬头可见玉龙雪山美丽至极。白沙古镇的白沙细乐，经常有三五个老人在镇中心吹拉弹唱。这条线可全程骑行，在一天之内走完，下午5点返回，推荐游客夜宿束河古镇，感受这里的宁静。
  520.                 泸沽湖之旅至少需要2天时间，如果愿意，待上一个星期都可以。泸沽湖拥有中国顶级的湖光山色，这里诞生了无数精美的摄影大作。
  521.                 DAY1: 丽江古城—束河古镇—白沙古镇
  522.                 DAY2~3: 泸沽湖</p>
  523.             <h5>迪庆二日游</h5>
  524.             <p>纳帕海距离香格里拉县城不远，游客可以骑车前往。下午可回到县城，住在独克宗古城。这座古城也是茶马古道上的古驿站，很有感觉，还可参观松赞林寺。早上从香格里拉出发，上午可到达白水台，游览完毕后可乘坐去往丽江方向的过路车。
  525.                 DAY1: 纳帕海—独克宗古城—松赞林寺
  526.                 DAY2: 白水台</p>
  527.         </div>
  528.         <div id="dianxiluxian">
  529.             <h2>滇西路线推荐 </h2>
  530.             <img src="images/dxlx.jpg" alt="滇西地区旅行交通示意图" >
  531.             <p>在腾冲和瑞丽花几日就可以游玩到所有景点，但如果在怒江傈僳族自治州则需要预留数十日才能体验到真正的旅行。
  532.             </p>
  533.             <h5>腾冲一日游</h5>
  534.             <p>和顺乡有一个雅号叫银杏村，大约在每年的11月会有最美的银杏林景观。和顺图书馆是和顺侨乡文风昌盛的标志。腾冲火山群国家地质公园最适合地理专业的旅行者前去，此处有丰富的地热，游客可以在这里泡上几次温泉，洗去一身的疲惫。
  535.                 DAY1: 和顺乡—和顺图书馆—腾冲火山群国家地质公园
  536.             </p>
  537.                 <h5>瑞丽二日游</h5>
  538.             <p> 纯正的傣族风情，第一天全都在瑞丽，饱览南国风光、建筑艺术，晚上可在大等喊民族村住宿。中缅边境之旅，可很方便地出入国门，在两方的口岸淘一些物美价廉的民族工艺品。因此这条线对旅行者的吸引力不言而喻。
  539.                 DAY1: 瑞丽姐勒大金塔—喊萨奘寺—大等喊民族村
  540.                 DAY2: 姐告—畹町
  541.             </p>
  542.             <h5>怒江傈僳族自治州十日游</h5>
  543.             <p>一旦决定进入怒江大峡谷、独龙江流域，就需要预备至少10天的时间，这里的游览路线需要好几天的徒步。怒江大峡谷、废城（知子罗）、片马、驼峰航线飞机残骸、听命湖、丙中洛、独龙江、察瓦龙和碧罗雪山都是暴走族的路标，其精彩程度远远超过茶马古道徒步。
  544.                 DAY1~10: 怒江傈僳族自治州。</p>
  545.         </div>
  546.         <div id="diannanluxian">
  547.             <h2>滇南路线推荐 </h2>
  548.             <img src="images/dnlx.jpg" width="400" height="300" alt="滇中地区旅行交通示意图" >
  549.             <p>人们到云南旅游的时候，恐怕西双版纳是必游之地。游客需要花费2日的时间好好参观一下西双版纳野象谷、西双版纳原始森林公园。建水古城和元阳梯田作为红河州最著名的景点，享誉中外。
  550.             </p>
  551.             <h5>西双版纳二日游</h5>
  552.             <p>西双版纳野象谷观赏蟒蛇园、蝴蝶园、猴园和百鸟园，还可以观赏驯象表演、中国第一所驯象学校的大象按摩等精彩表演。西双版纳原始森林公园主要欣赏项目有孔雀放飞、民间服装展演、九龙飞瀑、少数民族乐器表演、泼水欢歌活动、勐泐文化园和乘索道穿越“一江串六国”的澜沧江，晚上可考虑参加这里的篝火晚会。
  553.                 DAY1: 西双版纳野象谷
  554.                 DAY2: 西双版纳原始森林公园</p>
  555.                 <h5>红河二日游</h5>
  556.             <p> 建水古城、朝阳楼、建水文庙都集中在建水县城内，步行即可。古城面积不大，但可逛的地方很多，老房子、老街道，都值得游览。元阳梯田是云南必游的一处景观。
  557.                 DAY1: 建水古城—朝阳楼—建水文庙
  558.                 DAY2: 元阳梯田</p>
  559.         </div>
  560.         <div id="dianzhongms">
  561.             <h2>滇中美食 </h2>
  562.             <p>昆明人的口味偏咸，菜多麻辣。昆明街头到处是来自全国各地的风味餐馆，从东北菜、四川菜到广东粤菜，无论你想吃什么，都可以在昆明找到不错的饭馆。当然，游客到了昆明，首先要去尝的就是地道的云南菜：过桥米线、汽锅鸡等，还有昆明最著名的野山菌。因此，昆明街头最常见的还是省内各地少数民族的风味菜馆。</p>
  563.         <a href="https://baike.baidu.com/item/%E8%BF%87%E6%A1%A5%E7%B1%B3%E7%BA%BF/120893" target="_blank"><img src="images/gqmx.jpg" title="过桥米线 点我了解更多！"></a>
  564.         <a href="https://baike.baidu.com/item/%E6%B1%BD%E9%94%85%E9%B8%A1/951391" target="_blank"><img src="images/qgj.jpg" title="汽锅鸡 点我了解更多！"></a>
  565.         <a href="https://zhuanlan.zhihu.com/p/144347994" target="_blank"><img src="images/ysj.jpg" title="野生菌 点我了解更多！"></a>
  566.         </div>
  567.         <div id="dianxibeims">
  568.             <h2>滇西北美食</h2>
  569.             <h4>大理特色美食三道茶 </h4>
  570.             <p>三道茶是白族人招待贵宾的一种礼仪。“一苦，二甜，三回味”，代表了人生的三种境界。大理古城的文献楼和喜洲严家大院都可以尝到三道茶。
  571.             </p>
  572.             <p>第一道茶是苦茶，用大理特产沱茶在火塘上烤，至香气四散开来的时候，冲入滚烫的开水。这道茶虽香，但茶浓味酽，入口苦涩，意味着人生的逆境苦况。</p>
  573.             <p>第二道茶名为甜茶，顾名思义，甜茶味甜，是用大理名茶“感通茶”制成，茶中加入大理特产乳扇及核桃仁、红糖等辅料，香甜甘口，代表的是人生的苦尽甘来之境。</p>
  574.             <p>第三道茶叫回味茶，甘苦过后，用苍山雪绿茶冲饮，加蜂蜜和少许花椒、姜片、桂皮等，因而茶味甜中有辣，辣中似乎又还有些苦，回味悠长，所以叫回味茶。这道茶代表的是人生的高峰低谷风起云涌过后，心中那淡泊的明净。启发人们了悟生命的本质，达到宠辱不惊的境界。</p>
  575.             <a href="https://baike.baidu.com/item/%E7%99%BD%E6%97%8F%E4%B8%89%E9%81%93%E8%8C%B6/2698099" target="_blank" ><img src="images/sdc.jpg" title="三道茶 点我了解更多！"></a>
  576.             <h4>乳扇</h4>
  577.             <p>大理街头到处都可以看到烤乳扇或者新鲜乳扇。乳扇是一种奶制品，“云南十八怪”里面“牛奶做成扇子卖”指的就是这种小吃。当地人将乳扇抹上豆沙或蜂蜜等并用炭火烤熟，一串大概是2元钱，好吃不贵。</p>
  578.             <a href="https://baike.baidu.com/item/%E4%B9%B3%E6%89%87/3169283" target="_blank"><img src="images/rs.jpg" title="乳扇 点我了解更多！"></a>
  579.             <h4>生皮</h4>
  580.             <p>生皮在白语中称为“海格儿”，是大理独有的，非常著名。屠宰后的猪并不急于用开水烫毛，而是用稻草或麦秸烧火烤猪的外皮，至表层发黄，此时皮已经有九成熟，但里面的肉还是生的，切成细丝，用调料拌食，或者配制蘸水蘸食。它名为生皮，实际上皮已经差不多熟了，但肉还是生的，所以很多人不敢下口。吃生皮要注意一定要选用经过检疫的猪肉。</p>
  581.             <a href="https://baike.baidu.com/item/%E7%99%BD%E6%97%8F%E7%94%9F%E7%9A%AE/2843491" target="_blank"><img src="images/sp.jpg" title="生皮 点我了解更多！"></a>
  582.             <h4>酸辣鱼</h4>
  583.             <p>用洱海的鲫鱼、白木瓜和洱海活水制作，红红的一盆端上来，让人胃口大开。味道酸中带辣，又有些微甜，回味无穷。博爱路上，靠近博爱门有一家皇城根庭院餐厅，环境优美，酸辣鱼是招牌菜。坐在盛放的三角梅树下，吃着酸辣鱼，如果再配上苍山山泉酿造的大理啤酒，一天的烦恼将会一扫而空。</p>
  584.             <a href="https://baike.baidu.com/item/%E5%A4%A7%E7%90%86%E9%85%B8%E8%BE%A3%E9%B1%BC/10745233" target="_blank"><img src="images/sly.jpg" title="酸辣鱼 点我了解更多！"></a>
  585.             <h4>雕梅、梅子</h4>
  586.             <p>雕梅因在青梅果上雕刻花纹而得名。雕梅既是大理地区的一种美食，又是精心雕琢的手工艺品。当地白族姑娘大都从小就学做雕梅，因此这项手艺往往成为衡量一个姑娘是否心灵手巧的标志。当地风俗，在她们出嫁之前，呈献给婆家的见面礼中就有一盘精心雕制的雕梅。新婚之夜，新娘要“摆果酒”招待宾客，而雕梅的制作技艺和味道如何，便成为宾客们评头论足的话题。</p>
  587.             <a href="https://baike.baidu.com/item/%E9%9B%95%E6%A2%85/3169460" target="_blank"><img src="images/diaomei.jpg" title="雕梅 点我了解更多！"></a>
  588.         </div>
  589.         <div id="dianxims">
  590.             <h2>滇西美食</h2>
  591.             <p>腾冲菜的口味在云南算是独树一帜的，它完全区别于其他滇味，具有油而不腻、酸辣有度、香而爽口的特点，不可不尝。</p>
  592.             <h4>三滴水</h4>
  593.             <p>“三滴水”是当地，特别是和顺乡一带最高级别的筵席，一般是接待重要客人的宴请形式，几乎囊括了腾冲所有的特色美食。第一滴：点心、开胃类食品，如干果和凉菜类。第二滴：八大碗，主要是腾冲的特色风味，比如火烧、口袋豆腐等。第三滴：甜点类的餐后点心，如甜白酒、水果。现在已经很少能吃到十分地道的“三滴水”了，即使有也多是经过改良的。</p>
  594.             <a href="https://zhuanlan.zhihu.com/p/579198898" target="_blank"><img src="images/sds.jpg" title="三滴水 点我了解更多！"></a>
  595.             <h4>锅子</h4>
  596.             <p>“锅子”也是腾冲风味中十分重要的品种，为腾冲独有。它本来是腾冲人祭祖之后的食物，又称土锅子，因为其所用的锅是用当地的一种陶土烤制而成的，故而得名。做法是先用鸡和排骨熬成汤，加入盐、草果粉等调料，接着将芋头、白萝卜、胡萝卜、笋片、黄条、酥肉、泡皮等十几种材料按一定顺序放入锅中煮制，最后放蛋卷，再以葱花点缀，造型美观且味道鲜美、营养丰富。除了在当地人家中，在腾冲食府也能吃到不错的锅子。</p>
  597.             <a href="https://baike.baidu.com/item/%E8%85%BE%E5%86%B2%E5%9C%9F%E9%94%85%E5%AD%90/9138665" target="_blank"><img src="images/gz..png" title="锅子 点我了解更多！"></a>
  598.             <h4>大薄片</h4>
  599.             <p>“大薄片”是一道考验厨师刀技的菜，是将煮熟放凉的猪头肉切成透明且薄如窗纸的片，蘸上配好的调料食用。“大薄片”的调料非常讲究，有咸、酸、辣、麻、香多种滋味，混合在一起一定会使你胃口大开，那滋味尝一下就忘不了。腾冲县城一街有家著名的武氏大薄片，敢以姓氏做招牌绝对不会错。</p>
  600.             <a href="https://baike.baidu.com/item/%E5%A4%A7%E8%96%84%E7%89%87/9143583" target="_blank"><img src="images/dbp.jpg" title="大薄片 点我了解更多！"></a>
  601.             <h4>稀豆粉</h4>
  602.             <p>稀豆粉也非常有名，稀豆粉是将豌豆磨成粉，再拌上芝麻、生姜、油辣椒、花椒油、蒜泥、青蒜叶、味精、酱油等制成，非常好吃。腾冲卖稀豆粉的小吃店很多，叠水河景区旁有一家人气非常旺，早上去的时候需要排队等候。另外腾冲法院附近有一家周记百年老店，已经传了三代，声名远扬。</p>
  603.            <a href="https://baike.baidu.com/item/%E7%A8%80%E8%B1%86%E7%B2%89/10007782" target="_blank"><img src="images/xdf.jpg" title="稀豆粉 点我了解更多！"></a>
  604.             <p>腾冲还有很多名特风味，如火烧、酸辣汤、青辣子拌鸡枞、擦粉等，在街上随处可见，有时间可以一一品尝。
  605.                 过去和顺乡出产一种用松树上的松粉制作的糕点，清香扑鼻，远近闻名。后因松粉的采集对松树生长的破坏性很大，被禁止生产。
  606.                 晚上不妨到县城的腾越食府（夜市）去转转，那里的小吃品种非常多。</p>
  607.         </div>
  608.         <div id="diannanms">
  609.             <h2>滇南美食</h2>
  610.             <p>
  611.                 西双版纳的居民以傣族为主，来到这里当然要试试傣家菜。傣家菜的特点是酸、辣、甜，多以糯米、烧烤肉类、水产品为主，用野生或栽培的植物做调料和香料，滋味非常独特。因为气候的关系，傣味还有一个特点就是爽口，吃了不上火，于是苦味的东西也就比较多一点，不习惯这里口味的人会觉得有点儿怪。到了西双版纳无论如何都要尝一尝那里的菜肴，否则真是一种遗憾。
  612.             </p>
  613.             <p>
  614.                 其实随着商品流通的发展，在全国各地都可以吃到傣味菜，但是，任何一种特色口味一旦离开了它所赖以存在的自然环境，其特色就会随之减弱，比如吃川菜还是要去四川，吃粤菜当然要到广东。对于傣味来说这个特点尤为突出，因为它的原料来源完全依赖这片神奇的土地。傣味菜中最具代表性的有酸笋煮鱼（鸡）、香茅草烤鱼、香竹饭、“南秘”（“南秘”是一种用各种调料调好的“蘸水”，酸辣口味，用来蘸黄瓜之类）等。傣家菜中以烧烤方式制作的肉食非常多，还有看起来非常吓人的“剁生”“白旺”“肉芽”等，就要看你够不够老饕的标准、敢不敢吃了。
  615.             </p>
  616.             <h4>香竹饭</h4>
  617.             <p>
  618.                 香竹饭又称竹筒饭，是一种放在竹筒里用火烘烤致熟的米饭。当地人到竹林里砍些竹节很长的香竹，将洗净的糯稻米装到竹筒里，用冷水浸泡几个小时，再用芭蕉叶把筒口封住，然后把香竹筒放到火塘上烘烤。吃的时候，需要先捶打竹筒至外壳裂开，竹筒内的一层薄皮会贴在饭上，再轻轻一掰，香竹饭就从竹筒中脱露出来，香气扑鼻。这种米饭口感细腻、营养丰富，傣族人用它来招待贵客。
  619.                 到饭店里吃饭，有两种米饭可以选择：一种是饭米，另一种是糯米。饭米与我们平时常吃的米饭没有多少区别，而糯米却是我们很少能吃到的。在西双版纳吃糯米饭要先洗手，因为要用手捏饭，捏的时间越长，吃时的口感越好。本地人开玩笑说，吃糯米饭的时候，要一边摸头，一边捏饭，越吃越香。这是一种调侃，意思是在捏的时候加上一点油，吃起来口感会更好。
  620.             </p>
  621.             <a href="https://baike.baidu.com/item/%E7%AB%B9%E7%AD%92%E9%A5%AD/4332280" target="_blank"><img src="images/xzf.jpg" title="香竹饭 点我了解更多！"></a>
  622.             <h4>香茅草烤鱼</h4>
  623.             <p>
  624.                 香茅草烤鱼是傣家菜中必不可少的一道菜，而且在西双版纳吃到的这种烤鱼特别香，原因就在于作为原材料的香茅草十分新鲜。香茅草是生长在亚热带的一种茅草，带有柠檬香味，傣族人最喜欢用它做调味料。香茅草烤鱼的制作方法是：去掉鱼鳞，用刀剖开鱼肚，去掉鱼的内脏，然后洗净，加入葱、芫荽、辣椒、盐等作料，将鱼肚合拢，再用香茅草捆扎住鱼，用青竹夹住鱼放在炭火上烘烤。烤好的鱼有竹子的清香，又有香茅草独特的鲜香，食之微辣回甜，美味无穷。这是一道只有在傣族聚居区，比如西双版纳和德宏才能吃到的风味菜。
  625.             </p>
  626.            <a href="https://baike.baidu.com/item/%E5%82%A3%E6%97%8F%E9%A6%99%E8%8C%85%E8%8D%89%E7%83%A4%E9%B1%BC/5754507" target="_blank"><img src="images/xmcky.jpg" title="香茅草烤鱼 点我了解更多！"></a>
  627.            <h4>喃咪</h4>
  628.             <p>
  629.                 喃咪是傣语，其实就是我们常说的酱。“喃”可称为汁：“咪”是将西红柿在炭火上烧熟、去皮，然后与葱、蒜、芫荽、香蓼草、野花椒、剁碎的小米椒、盐拌和而成。喃咪通常与一些煎炸的食品共吃，如果再加上一种当地产的酸果，配合着这种植物的酸味就更加可口了。
  630.             </p>
  631.             <a href="https://m.thepaper.cn/baijiahao_14099408" target="_blank"><img src="images/nanmi.jpg" title="喃咪 点我了解更多！"></a>
  632.            <h4>炸牛皮</h4>
  633.             <p>
  634.                 这是一道必须与喃咪相配的菜肴。炸牛皮的制作过程十分精细：将刮洗干净的水牛皮放进锅里煮熟，用刀切成约半尺长、2寸宽的小块晒干备用。食用时，把油烧热，然后把晒干的牛皮放进油锅里慢慢地炸，待牛皮炸泡、变黄，即可取出食用。蘸上喃咪，酸辣清香，即可下酒食用，也可以用来下米线、米干等，令人胃口大开。
  635.             </p>
  636.            <a href="https://baike.baidu.com/item/%E5%82%A3%E6%97%8F%E6%B2%B9%E7%82%B8%E7%89%9B%E7%9A%AE/5754560" target="_blank"><img src="images/znp.jpg" title="炸牛皮 点我了解更多！"></a>
  637.             <h4>酸笋</h4>
  638.             <p>
  639.                 这是用竹笋腌制的一种傣族特色菜，通常与鸡肉或鱼肉放入锅里同煮。将辣椒、姜、葱放入油锅里炒热，再把酸笋煮鸡（鱼）倒入锅里回锅后，即可食用。这道菜的特点是酸辣可口。不过很多人不能接受酸笋的味道，会觉得味道有点怪，但只要吃过的人大多非常喜欢，因为酸笋的加入会把油腻化解掉。
  640.             </p>
  641.                 <a href="https://www.bilibili.com/video/BV1Lx411B7yy/?spm_id_from=333.337.search-card.all.click&vd_source=778b1db64f142026a63b5f5b17d272be" target="_blank"><img src="images/ss.jpg" title="酸笋 点我了解更多！"></a>
  642.             <h4>罗嗦</h4>
  643.             <p>
  644.                 罗嗦”是傣语，就是我们平时吃的年糕。将浸泡过的糯米磨成浆，制成吊浆面，将花生、芝麻炒香，研细加红糖放入吊浆面拌匀，然后用芭蕉叶包住吊浆面，在蒸笼里蒸熟。这是傣族的一种小甜食，街头常有当地人出售，喜欢吃甜食的人会特别喜欢。
  645.                 以上介绍的是几种一般人都能接受的口味，在西双版纳还有很多口味更为特殊的菜肴，比如炸苔藓和臭菜炒鸡蛋，而最奇怪的要算“撒撇”。
  646.             </p>
  647.             <a href="https://baijiahao.baidu.com/s?id=1760038442486539210" target="_blank"><img src="images/hls.jpg" title="豪啰嗦 点我了解更多！"></a>
  648.                 <h4>撒撇</h4>
  649.             <p>
  650.                 “撒撇”是一种用牛反刍的东西做成的菜，一般人听到就会瞠目结舌，这道菜也只有在西双版纳才能吃到。“撒撇”用牛小肠中已经经过胃的消化、与肠液和胆汁搅和过的东西取出，挤压出其中深绿色的液体，与剁碎的牛里脊肉、蒜、葱、辣椒等各种调料拌匀后即可上桌。这道菜味道特殊，在西双版纳当地也不见得能经常吃到。可将“撒撇”同米线拌在一起吃。
  651.                 其实傣家菜多有生吃的，“撒撇”是其中最特殊的一种。有一种青蛙肉生吃，是将剁细的蛙肉与切细的葱、姜、芫荽、花椒、辣椒面、盐等拌匀，再放入少量柠檬水搅匀，将生猪皮刮洗干净，置于火上烤，待肉皮变成乳白色，略带透明的时候即取出切成薄片与青蛙肉拌和而成，鲜甜清脆，酸辣开胃。其他如猪肉剁生、牛肉剁生、鱼肉剁生、马鹿肉剁生……在傣家菜中，凡是肉食都可做剁生，要旨在于肉的新鲜。
  652.             </p>
  653.                 <a href="https://baike.baidu.com/item/%E6%92%92%E6%92%87/6186629" target="_blank"><img src="images/qiguai.jpg" title="撒撇 点我了解更多！"></a>
  654.             <p>
  655.                 剁生没问题的话，可以再试试“白旺”。傣族的“白旺”即生血，先将调料准备好，杀猪时将血注入盆中，用勺不停搅拌直到热血凝固变成块。
  656.             </p>
  657.             <a href="https://zhuanlan.zhihu.com/p/595866029" target="_blank"><img src="images/baiwang.jpg" title="白旺 点我了解更多！"></a>
  658.             <p>
  659.                 西双版纳的“虫菜”非常有名，以各种昆虫入馔，闻之即令人色变，却是高蛋白、高营养的美味佳肴，黄蚂蚁蛋是基诺人喜爱的菜肴。油炸花蜘蛛则是布朗族的风味佳肴。花蜘蛛体型比一般蜘蛛大，浑身长满花斑，所以叫作花蜘蛛。看起来吓人，吃起来却香气扑鼻，比炸蚕蛹还可口。花蜘蛛还有解毒的功效，可以治疗淋巴结核、疔疮、蜜蜂或毒蝎的蜇伤。版纳炸竹虫是将寄生在竹筒内的竹虫油炸，金黄油亮、酥脆芳香。
  660.             </p>
  661.             <a href="https://zhuanlan.zhihu.com/p/612696918" target="_blank"><img src="images/chongcai.jpg" title="虫菜 点我了解更多！"></a>
  662.             <p>
  663.                 曼景兰风味一条街原是景洪东南边的一个傣族寨子，后辟为傣族风味街，街道两边都是饭馆，而且席间还有歌舞表演，表演者都是没有经过任何专业训练的本地人。傣家少女的婀娜与妩媚会令女人感慨“此生枉为女人”，男人们自然是口福眼福一起得到满足。在流沙河大桥终点站下车，再往前一点就到了。
  664.             </p>
  665.             <p>
  666.                 金沙滩是热闹的烧烤夜市，因为景洪气温高，那里的人有在外乘凉吃烧烤的习惯。这里是景洪市区内规模最大的一个夜市，入夜人声鼎沸，好不热闹，晚饭最好少吃，甚至不吃，这样每个品种都能尝一点儿。
  667.             </p>
  668.         </div>
  669.     </div>
  670. </body>
  671. </html>
复制代码
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .w {
  6.     width: 1200px;
  7.     margin: auto;
  8. }
  9. .box {
  10.     width: 10px;
  11.     height: 10px;
  12.     position: fixed;
  13.     top:10px;
  14. }
  15. body {
  16.     background-image: url("images/bj..png");
  17.     background-position: center;
  18.     background-repeat: no-repeat;
  19.     background-attachment: fixed;
  20.     background-size: cover;
  21. }
  22. li {
  23.     list-style: none;
  24. }
  25. a {
  26.     text-decoration: none;
  27. }
  28. .header {
  29.     height: 52px;
  30.     background-color: #3a8dea;
  31.     margin: 30px auto;
  32. }
  33. .logo {
  34.     float: left;
  35.     width:200px ;
  36.     height: 52px;
  37.     background-color: lightpink;
  38. }
  39. .nav {
  40.     float: left;
  41.     margin-left: 90px;
  42. }
  43. .nav ul li {
  44.     float:left;
  45.     margin: 0 15px;
  46. }
  47. .nav ul li a {
  48.     display: block;
  49.     height:52px;
  50.     padding: 0 10px;
  51.     line-height: 52px;
  52.     font-size: 20px;
  53.     color: black;
  54. }
  55. .nav ul li a:hover {
  56.     color: hotpink;
  57.     background-color: lightpink;
  58. }
  59. .search {
  60.     float: left;
  61.     width: 312px;
  62.     height: 52px;
  63.     background-color: skyblue;
  64.     margin-left: 50px;
  65. }
  66. .search input {
  67.     float: left;
  68.     width: 225px;
  69.     height: 48px;
  70.     border: 2px solid #00a4ff;
  71.     border-right: 0;
  72.     color: #bfbfbf;
  73.     font-size: 18px;
  74.     padding-left: 15px;
  75. }
  76. .search button {
  77.     float:left;
  78.     width: 70px;
  79.     height: 52px;
  80.     border: 0;
  81.     background: url(images/sousuo.png);
  82. }
  84. .mulu {
  85.     float: left;
  86.     width: 200px;
  87.     margin-top: 30px;
  88.     position: fixed;
  89.     font-family: 楷体;
  90.     font-weight: bold;
  91. }
  93. #d1 {
  94.     font-size: 100%;
  95.     color: #4528b2;
  96.     float: left;
  97.     width: 70px;
  98.     height: 20px;
  99.     padding: 5px 5px;
  100.     margin: 4px;
  101. }
  102. #d2 {
  103.     clear: both;
  104. }
  106. .mulu ul li {
  107.     list-style-type: none;
  108. }
  110. .mulu ul {
  111.     margin: 0;
  112.     padding: 15px 10px 15px 10px;
  113. }
  115. .mulu ul li a {
  116.     display: block;
  117.     text-decoration: none;
  118.     color: rgb(87, 74, 197);
  119.     line-height: 30px;
  120.     border-bottom: 1px dashed black;
  121.     padding: 0 0 0 0;
  122. }
  124. .mulu ul li a:hover {
  125.     color: #0de53e;
  126. }
  128. .mulu span {
  129.     float: right;
  130. }
  132. .zhuti {
  133.     text-align: center;
  134.     margin: 30px 180px 1px 240px;
  135. }
  136. .zhuti a:hover {
  137.     color: #0de53e;
  138. }
  139. .zhuti h2 {
  140.     color: dodgerblue;
  141.     font-family: 楷体;
  142.     margin-top: 20px;
  143. }
  144. #shilin {
  145.     margin-top: 20px;
  146.     height: 200px;
  147.     font-size: x-large;
  148.     padding: 10px;
  149.     font-family: 楷体;
  150. }
  151. #shilin p {
  152.     letter-spacing: 2px;
  153.     text-indent: 2em;
  154.     line-height: 1.5em;
  155.     font-size: large;
  156. }
  157. #shilin img {
  158.     height: 200px;
  159.     width: 300px;
  160.     float: left;
  161.     margin: 0 10px 0 0;
  162. }
  163. #shilin img:hover {
  164.     transform: scale(1.2);
  165. }
  166. #dianchi {
  167.     margin-top: 20px;
  168.     height: 200px;
  169.     font-size: x-large;
  170.     padding: 10px;
  171.     font-family: 楷体;
  172. }
  173. #dianchi p {
  174.     letter-spacing: 2px;
  175.     text-indent: 2em;
  176.     line-height: 1.5em;
  177.     font-size: large;
  178. }
  179. #dianchi img {
  180.     height: 200px;
  181.     width: 300px;
  182.     float: left;
  183.     margin: 0 10px 0 0;
  184. }
  185. #dianchi img:hover {
  186.     transform: scale(1.2);
  187. }
  188. #cuihu {
  189.     margin-top: 20px;
  190.     height: 200px;
  191.     font-size: x-large;
  192.     padding: 10px;
  193.     font-family: 楷体;
  194. }
  195. #cuihu p {
  196.     letter-spacing: 2px;
  197.     text-indent: 2em;
  198.     line-height: 1.5em;
  199.     font-size: large;
  200. }
  201. #cuihu img {
  202.     height: 200px;
  203.     width: 300px;
  204.     float: left;
  205.     margin: 0 10px 0 0;
  206. }
  207. #cuihu img:hover {
  208.     transform: scale(1.2);
  209. }
  210. #jwt {
  211.     margin-top: 20px;
  212.     height: 200px;
  213.     font-size: x-large;
  214.     padding: 10px;
  215.     font-family: 楷体;
  216. }
  217. #jwt p {
  218.     letter-spacing: 2px;
  219.     text-indent: 2em;
  220.     line-height: 1.5em;
  221.     font-size: large;
  222. }
  223. #jwt img {
  224.     height: 200px;
  225.     width: 300px;
  226.     float: left;
  227.     margin: 0 10px 0 0;
  228. }
  229. #jwt img:hover {
  230.     transform: scale(1.2);
  231. }
  232. #bwg {
  233.     margin-top: 20px;
  234.     height: 200px;
  235.     font-size: x-large;
  236.     padding: 10px;
  237.     font-family: 楷体;
  238. }
  239. #bwg {
  240.     letter-spacing: 2px;
  241.     text-indent: 2em;
  242.     line-height: 1.5em;
  243.     font-size: large;
  244. }
  245. #bwg img {
  246.     height: 200px;
  247.     width: 300px;
  248.     float: left;
  249.     margin: 0 10px 0 0;
  250. }
  251. #bwg img:hover {
  252.     transform: scale(1.2);
  253. }
  254. #jmbjf {
  255.     margin-top: 20px;
  256.     height: 200px;
  257.     font-size: x-large;
  258.     padding: 10px;
  259.     font-family: 楷体;
  260. }
  261. #jmbjf p {
  262.     letter-spacing: 2px;
  263.     text-indent: 2em;
  264.     line-height: 1.5em;
  265.     font-size: large;
  266. }
  267. #jmbjf img {
  268.     height: 200px;
  269.     width: 300px;
  270.     float: left;
  271.     margin: 0 10px 0 0;
  272. }
  273. #jmbjf img:hover {
  274.     transform: scale(1.2);
  275. }
  276. #dlgc {
  277.     margin-top: 20px;
  278.     height: 200px;
  279.     font-size: x-large;
  280.     padding: 10px;
  281.     font-family: 楷体;
  282. }
  283. #dlgc p {
  284.     letter-spacing: 2px;
  285.     text-indent: 2em;
  286.     line-height: 1.5em;
  287.     font-size: large;
  288. }
  289. #dlgc img {
  290.     height: 200px;
  291.     width: 300px;
  292.     float: left;
  293.     margin: 0 10px 0 0;
  294. }
  295. #dlgc img:hover {
  296.     transform: scale(1.2);
  297. }
  298. #slz {
  299.     margin-top: 20px;
  300.     height: 200px;
  301.     font-size: x-large;
  302.     padding: 10px;
  303.     font-family: 楷体;
  304. }
  305. #slz p {
  306.     letter-spacing: 2px;
  307.     text-indent: 2em;
  308.     line-height: 1.5em;
  309.     font-size: large;
  310. }
  311. #slz img {
  312.     height: 200px;
  313.     width: 300px;
  314.     float: left;
  315.     margin: 0 10px 0 0;
  316. }
  317. #slz img:hover {
  318.     transform: scale(1.2);
  319. }
  320. #cssst {
  321.     margin-top: 20px;
  322.     height: 200px;
  323.     font-size: x-large;
  324.     padding: 10px;
  325.     font-family: 楷体;
  326. }
  327. #cssst p {
  328.     letter-spacing: 2px;
  329.     text-indent: 2em;
  330.     line-height: 1.5em;
  331.     font-size: large;
  332. }
  333. #cssst img {
  334.     height: 200px;
  335.     width: 300px;
  336.     float: left;
  337.     margin: 0 10px 0 0;
  338. }
  339. #cssst img:hover {
  340.     transform: scale(1.2);
  341. }
  342. #hdqgy {
  343.     margin-top: 20px;
  344.     height: 200px;
  345.     font-size: x-large;
  346.     padding: 10px;
  347.     font-family: 楷体;
  348. }
  349. #hdqgy p {
  350.     letter-spacing: 2px;
  351.     text-indent: 2em;
  352.     line-height: 1.5em;
  353.     font-size: large;
  354. }
  355. #hdqgy img {
  356.     height: 200px;
  357.     width: 300px;
  358.     float: left;
  359.     margin: 0 10px 0 0;
  360. }
  361. #hdqgy img:hover {
  362.     transform: scale(1.2);
  363. }
  364. #lgh {
  365.     margin-top: 20px;
  366.     height: 200px;
  367.     font-size: x-large;
  368.     padding: 10px;
  369.     font-family: 楷体;
  370. }
  371. #lgh p {
  372.     letter-spacing: 2px;
  373.     text-indent: 2em;
  374.     line-height: 1.5em;
  375.     font-size: large;
  376. }
  377. #lgh img {
  378.     height: 200px;
  379.     width: 300px;
  380.     float: left;
  381.     margin: 0 10px 0 0;
  382. }
  383. #lgh img:hover {
  384.     transform: scale(1.2);
  385. }
  386. #slgy {
  387.     margin-top: 20px;
  388.     height: 200px;
  389.     font-size: x-large;
  390.     padding: 10px;
  391.     font-family: 楷体;
  392. }
  393. #slgy p {
  394.     letter-spacing: 2px;
  395.     text-indent: 2em;
  396.     line-height: 1.5em;
  397.     font-size: large;
  398. }
  399. #slgy img {
  400.     height: 200px;
  401.     width: 300px;
  402.     float: left;
  403.     margin: 0 10px 0 0;
  404. }
  405. #slgy img:hover {
  406.     transform: scale(1.2);
  407. }
  408. #rh {
  409.     margin-top: 20px;
  410.     height: 200px;
  411.     font-size: x-large;
  412.     padding: 10px;
  413.     font-family: 楷体;
  414. }
  415. #rh p {
  416.     letter-spacing: 2px;
  417.     text-indent: 2em;
  418.     line-height: 1.5em;
  419.     font-size: large;
  420. }
  421. #rh img {
  422.     height: 200px;
  423.     width: 300px;
  424.     float: left;
  425.     margin: 0 10px 0 0;
  426. }
  427. #rh img:hover {
  428.     transform: scale(1.2);
  429. }
  430. #mlrdyl {
  431.     margin-top: 20px;
  432.     height: 200px;
  433.     font-size: x-large;
  434.     padding: 10px;
  435.     font-family: 楷体;
  436. }
  437. #mlrdyl p {
  438.     letter-spacing: 2px;
  439.     text-indent: 2em;
  440.     line-height: 1.5em;
  441.     font-size: large;
  442. }
  443. #mlrdyl img {
  444.     height: 200px;
  445.     width: 300px;
  446.     float: left;
  447.     margin: 0 10px 0 0;
  448. }
  449. #mlrdyl img:hover {
  450.     transform: scale(1.2);
  451. }
  452. #hsgz {
  453.     margin-top: 20px;
  454.     height: 200px;
  455.     font-size: x-large;
  456.     padding: 10px;
  457.     font-family: 楷体;
  458. }
  459. #hsgz p {
  460.     letter-spacing: 2px;
  461.     text-indent: 2em;
  462.     line-height: 1.5em;
  463.     font-size: large;
  464. }
  465. #hsgz img {
  466.     height: 200px;
  467.     width: 300px;
  468.     float: left;
  469.     margin: 0 10px 0 0;
  470. }
  471. #hsgz img:hover {
  472.     transform: scale(1.2);
  473. }
  474. #njdyw {
  475.     margin-top: 20px;
  476.     height: 200px;
  477.     font-size: x-large;
  478.     padding: 10px;
  479.     font-family: 楷体;
  480. }
  481. #njdyw p {
  482.     letter-spacing: 2px;
  483.     text-indent: 2em;
  484.     line-height: 1.5em;
  485.     font-size: large;
  486. }
  487. #njdyw img {
  488.     height: 200px;
  489.     width: 300px;
  490.     float: left;
  491.     margin: 0 10px 0 0;
  492. }
  493. #njdyw img:hover {
  494.     transform: scale(1.2);
  495. }
  496. #xsbn {
  497.     margin-top: 20px;
  498.     height: 200px;
  499.     font-size: x-large;
  500.     padding: 10px;
  501.     font-family: 楷体;
  502. }
  503. #xsbn p {
  504.     letter-spacing: 2px;
  505.     text-indent: 2em;
  506.     line-height: 1.5em;
  507.     font-size: large;
  508. }
  509. #xsbn img {
  510.     height: 200px;
  511.     width: 300px;
  512.     float: left;
  513.     margin: 0 10px 0 0;
  514. }
  515. #xsbn img:hover {
  516.     transform: scale(1.2);
  517. }
  518. #gz {
  519.     margin-top: 20px;
  520.     height: 200px;
  521.     font-size: x-large;
  522.     padding: 10px;
  523.     font-family: 楷体;
  524. }
  525. #gz p {
  526.     letter-spacing: 2px;
  527.     text-indent: 2em;
  528.     line-height: 1.5em;
  529.     font-size: large;
  530. }
  531. #gz img {
  532.     height: 200px;
  533.     width: 300px;
  534.     float: left;
  535.     margin: 0 10px 0 0;
  536. }
  537. #gz img:hover {
  538.     transform: scale(1.2);
  539. }
  540. #gnbb {
  541.     margin-top: 20px;
  542.     height: 200px;
  543.     font-size: x-large;
  544.     padding: 10px;
  545.     font-family: 楷体;
  546. }
  547. #gnbb p {
  548.     letter-spacing: 2px;
  549.     text-indent: 2em;
  550.     line-height: 1.5em;
  551.     font-size: large;
  552. }
  553. #gnbb img {
  554.     height: 200px;
  555.     width: 300px;
  556.     float: left;
  557.     margin: 0 10px 0 0;
  558. }
  559. #gnbb img:hover {
  560.     transform: scale(1.2);
  561. }
  562. #bm {
  563.     margin-top: 20px;
  564.     height: 200px;
  565.     font-size: x-large;
  566.     padding: 10px;
  567.     font-family: 楷体;
  568. }
  569. #bm p {
  570.     letter-spacing: 2px;
  571.     text-indent: 2em;
  572.     line-height: 1.5em;
  573.     font-size: large;
  574. }
  575. #bm img {
  576.     height: 200px;
  577.     width: 300px;
  578.     float: left;
  579.     margin: 0 10px 0 0;
  580. }
  581. #bm img:hover {
  582.     transform: scale(1.2);
  583. }
  584. #bnyssl {
  585.     margin-top: 20px;
  586.     height: 200px;
  587.     font-size: x-large;
  588.     padding: 10px;
  589.     font-family: 楷体;
  590. }
  591. #bnyssl p {
  592.     letter-spacing: 2px;
  593.     text-indent: 2em;
  594.     line-height: 1.5em;
  595.     font-size: large;
  596. }
  597. #bnyssl img {
  598.     height: 200px;
  599.     width: 300px;
  600.     float: left;
  601.     margin: 0 10px 0 0;
  602. }
  603. #bnyssl img:hover {
  604.     transform: scale(1.2);
  605. }
  606. #qbpzh {
  607.      margin-top: 20px;
  608.      height: 200px;
  609.      font-size: x-large;
  610.      padding: 10px;
  611.      font-family: 楷体;
  612. }
  613. #qbpzh p {
  614.     letter-spacing: 2px;
  615.     text-indent: 2em;
  616.     line-height: 1.5em;
  617.     font-size: large;
  618. }
  619. #qbpzh img {
  620.     height: 200px;
  621.     width: 300px;
  622.     float: left;
  623.     margin: 0 10px 0 0;
  624. }
  625. #qbpzh img:hover {
  626.     transform: scale(1.2);
  627. }
  628. #dianzhongluxian {
  629.     clear: both;/*浮动清除*/
  630.     margin-top: 30px;
  631.     padding: 15px;
  632. }
  633. #dianzhongluxian img {
  634.     border-radius: 5%;
  635.     width: 400px;
  636.     height: 300px;
  637.     float: left;
  638.     margin: 5px 10px 0 5px;
  639. }
  640. #dianzhongluxian img:hover {
  641.     transform: scale(1.5);
  642. }
  643. #dianzhongluxian p {
  644.     letter-spacing: 2px;
  645.     text-indent: 2em;
  646.     line-height: 1.5em;
  647.     font-family: 楷体;
  648.     font-weight: bold;
  649.     font-size: large;
  650. }
  651. #dianxibeiluxian {
  652.     clear: both;/*浮动清除*/
  653.     margin-top: 30px;
  654.     padding: 15px;
  655. }
  656. #dianxibeiluxian img {
  657.     border-radius: 5%;
  658.     width: 400px;
  659.     height: 300px;
  660.     float: left;
  661.     margin: 5px 10px 0 5px;
  662. }
  663. #dianxibeiluxian img:hover {
  664.     transform: scale(1.5);
  665. }
  666. #dianxibeiluxian p {
  667.     letter-spacing: 2px;
  668.     text-indent: 2em;
  669.     line-height: 1.5em;
  670.     font-family: 楷体;
  671.     font-weight: bold;
  672.     font-size: large;
  673. }
  674. #dianxiluxian {
  675.     clear: both;/*浮动清除*/
  676.     margin-top: 30px;
  677.     padding: 15px;
  678. }
  679. #dianxiluxian img {
  680.     border-radius: 5%;
  681.     width: 400px;
  682.     height: 300px;
  683.     float: left;
  684.     margin: 5px 10px 0 5px;
  685. }
  686. #dianxiluxian img:hover {
  687.     transform: scale(1.5);
  688. }
  689. #dianxiluxian p {
  690.     letter-spacing: 2px;
  691.     text-indent: 2em;
  692.     line-height: 1.5em;
  693.     font-family: 楷体;
  694.     font-weight: bold;
  695.     font-size: large;
  696. }
  697. #diannanluxian {
  698.     clear: both;
  699.     margin-top: 30px;
  700.     padding: 15px;
  701. }
  702. #diannanluxian img {
  703.     border-radius: 5%;
  704.     width: 400px;
  705.     height: 300px;
  706.     float: left;
  707.     margin: 5px 10px 0 5px;
  708. }
  709. #diannanluxian img:hover {
  710.     transform: scale(1.5);
  711. }
  712. #diannanluxian p {
  713.     letter-spacing: 2px;
  714.     text-indent: 2em;
  715.     line-height: 1.5em;
  716.     font-family: 楷体;
  717.     font-weight: bold;
  718.     font-size: large;
  719. }
  720. #dianzhongms {
  721.     clear: both;
  722.     margin-top: 30px;
  723.     padding: 15px;
  724. }
  725. #dianzhongms img {
  726.     border-radius: 5%;
  727.     width: 300px;
  728.     height: 200px;
  729.     float: left;
  730.     margin: 5px 10px 0 5px;
  731. }
  732. #dianzhongms img:hover {
  733.     transform: scale(0.8);
  734. }
  735. #dianzhongms p {
  736.     letter-spacing: 2px;
  737.     text-indent: 2em;
  738.     line-height: 1.5em;
  739.     font-family: 楷体;
  740.     font-weight: bold;
  741.     font-size: large;
  742. }
  743. #dianxibeims {
  744.     clear: both;
  745.     margin-top: 30px;
  746.     padding: 15px;
  747. }
  748. #dianxibeims img {
  749.     border-radius: 5%;
  750.     width: 300px;
  751.     height: 200px;
  752.     margin: 5px 10px 0 5px;
  753. }
  754. #dianxibeims img:hover {
  755.     transform: scale(0.8);
  756. }
  757. #dianxibeims p {
  758.     letter-spacing: 2px;
  759.     text-indent: 2em;
  760.     line-height: 1.5em;
  761.     font-family: 楷体;
  762.     font-weight: bold;
  763.     font-size: large;
  764. }
  765. #dianxims {
  766.     clear: both;
  767.     margin-top: 30px;
  768.     padding: 15px;
  769. }
  770. #dianxims img {
  771.     border-radius: 5%;
  772.     width: 300px;
  773.     height: 200px;
  774.     margin: 5px 10px 0 5px;
  775. }
  776. #dianxims img:hover {
  777.     transform: scale(0.8);
  778. }
  779. #dianxims p {
  780.     letter-spacing: 2px;
  781.     text-indent: 2em;
  782.     line-height: 1.5em;
  783.     font-family: 楷体;
  784.     font-weight: bold;
  785.     font-size: large;
  786. }
  787. #diannanms {
  788.     clear: both;
  789.     margin-top: 30px;
  790.     padding: 15px;
  791. }
  792. #diannanms img {
  793.     border-radius: 5%;
  794.     width: 300px;
  795.     height: 200px;
  796.     margin: 5px 10px 0 5px;
  797. }
  798. #diannanms img:hover {
  799.     transform: scale(0.8);
  800. }
  801. #diannanms p {
  802.     letter-spacing: 2px;
  803.     text-indent: 2em;
  804.     line-height: 1.5em;
  805.     font-family: 楷体;
  806.     font-weight: bold;
  807.     font-size: large;
  808. }
  809. .important {
  810.     font-family: 楷体;
  811.     font-size: large;
  812. }
  813. th {
  814.     padding: 5px;
  815. }
复制代码
 用户页
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册页面</title>
  6.     <link rel="stylesheet" href="user.css">
  7.     <style>
  8.         h2 {
  9.             font-size: x-large;
  10.             text-align: center;
  11.             margin-top: 15px;
  12.             font-family: 楷体;
  13.             font-weight: bold;
  14.         }
  15.         input:checked {
  16.             width: 40px;
  17.             height: 15px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div class="header w">
  23.     <!--头部-->
  24.     <div class="logo">
  25.         <img src="images/logo.png">
  26.     </div>
  27.     <div class="nav">
  28.         <!--导航栏-->
  29.         <ul>
  30.             <li><a href="index.html#">首页</a></li>
  31.             <li><a href="brief%20introduction.html#">七彩云南</a></li>
  32.             <li><a href="travel%20strategy.html#">旅游攻略</a></li>
  33.             <li><a href="user.html#">用户</a></li>
  34.         </ul>
  35.     </div>
  36.     <!--搜索模块-->
  37.     <div class="search">
  38.         <input type="txt" value="输入关键词">
  39.         <button></button>
  40.     </div>
  41. </div>
  42. <div class="demo">
  43. <form action="http://www.baidu.com" method="get" name="registForm">
  44.     <!--该表单提交给某服务器的地址；以get（明文）/post（暗文）形式提交-->
  45.     <h2 class="title">注册</h2>
  46.     <table width="500">
  47.         <tr>
  48.             <td>性别</td>
  49.             <td>
  50.                 <input type="radio" checked="checked" name="sex" id="nan"><label for="nan"><img src="images/man.png" width="30" height="30">男</label>
  51.                 <input type="radio" name="sex" id="nv"><label for="nv"><img src="images/woman.png" width="30" height="30">女</label>
  52.             </td>
  53.         </tr>
  54.         <tr>
  55.             <td>生日</td>
  56.             <td>
  57.                 <select>
  58.                     <option>--请选择年份--</option>
  59.                     <option>2000</option>
  60.                     <option>2001</option>
  61.                     <option>2002</option>
  62.                 </select>
  63.                 <select>
  64.                     <option>--请选择月份--</option>
  65.                     <option>1</option>
  66.                     <option>2</option>
  67.                     <option>3</option>
  68.                     <option>4</option>
  69.                     <option>5</option>
  70.                     <option>6</option>
  71.                     <option>7</option>
  72.                     <option>8</option>
  73.                     <option>9</option>
  74.                     <option>10</option>
  75.                     <option>11</option>
  76.                     <option>12</option>
  77.                 </select>
  78.                 <select>
  79.                     <option>--请选择日--</option>
  80.                     <option>1</option>
  81.                     <option>2</option>
  82.                     <option>3</option>
  83.                 </select>
  84.             </td>
  85.         </tr>
  86.         <tr>
  87.             <td>所在地区</td>
  88.             <td><input style="background: transparent;height: 20px;width: 200px;border-radius: 15px; border: 1px dotted #1d5ba1" type="txt" ></td>
  89.         </tr>
  90.         <tr>
  91.             <td>喜欢的风景类型</td>
  92.             <td>
  93.                 <select>
  94.                     <option>--自然景观--</option>
  95.                     <option>地文景观</option>
  96.                     <option>水域风观</option>
  97.                     <option>生物景观</option>
  98.                     <option>气候天象</option>
  99.                 </select>
  100.                 <select>
  101.                     <option>--人文景观--</option>
  102.                     <option>文物古迹</option>
  103.                     <option>革命活动地</option>
  104.                     <option>现代经济技术景观</option>
  105.                     <option>现代艺术科学活动景观</option>
  106.                 </select>
  107.             </td>
  108.         </tr>
  109.         <tr>
  110.             <td>喜欢的运动</td>
  111.             <td>
  112.                 <input type="checkbox">田径
  113.                 <input type="checkbox">球类
  114.                 <input type="checkbox">游泳
  115.                 <input type="checkbox">武术
  116.                 <input type="checkbox">登山
  117.                 <input type="checkbox">滑冰
  118.                 <input type="checkbox">举重
  119.                 <input type="checkbox">摔跤
  120.                 <input type="checkbox">自行车
  121.                 其它：<input style="background: transparent;height: 20px;width: 200px;border-radius: 15px; border: 1px dotted #2b59bd" type="txt">
  122.             </td>
  123.         </tr>
  124.         <tr>
  125.             <td>个人介绍</td>
  126.             <td>
  127.                 <textarea style="background: transparent;height: 40px;width: 250px;border-radius: 15px; border: 1px dotted rgb(33,100,176)" ></textarea>
  128.             </td>
  129.         </tr>
  130.         <tr>
  131.             <td>用户名</td>
  132.             <td>
  133.                 <input style="background: transparent;height: 20px;width: 200px;border-radius: 15px; border: 1px dotted #1e548f" type="text">
  134.             </td>
  135.         </tr>
  136.         <tr>
  137.             <td>手机号</td>
  138.             <td>
  139.                 <input style="background: transparent;height: 20px;width: 200px;border-radius: 15px; border: 1px dotted #2261a8" type="text">
  140.             </td>
  141.         </tr>
  142.         <tr>
  143.             <td>密码</td>
  144.             <td>
  145.                 <input style="background: transparent;height: 20px;width: 200px;border-radius: 15px; border: 1px dotted #2469b6" type="password">
  146.             </td>
  147.         </tr>
  148.         <tr >
  149.             <td></td>
  150.             <td>
  151.                 <input type="submit" value="免费注册">
  152.             </td>
  153.         </tr>
  154.         <tr id="h">
  155.             <td></td>
  156.             <td>
  157.                 <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
  158.             </td>
  159.         </tr>
  160.         <tr id="hh">
  161.             <td></td>
  162.             <td>
  163.                 <a href="#">我是会员，立即登录</a>
  164.             </td>
  165.         </tr>
  166.     </table>
  167. </form>
  168. </div>
  169. </body>
  170. </html>
复制代码
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .w {
  6.     width: 1200px;
  7.     margin: auto;
  8. }
  9. body {
  10.     background-image: url("images/bj..png");
  11.     background-position: center;
  12.     background-repeat: no-repeat;
  13.     background-attachment: fixed;
  14.     background-size: cover;
  15. }
  16. li {
  17.     list-style: none;
  18. }
  19. a {
  20.     text-decoration: none;
  21. }
  22. .header {
  23.     height: 52px;
  24.     background-color: #3a8dea;
  25.     margin: 30px auto;
  26. }
  27. .logo {
  28.     float: left;
  29.     width:200px ;
  30.     height: 52px;
  31.     background-color: lightpink;
  32. }
  33. .nav {
  34.     float: left;
  35.     margin-left: 90px;
  36. }
  37. .nav ul li {
  38.     float:left;
  39.     margin: 0 15px;
  40. }
  41. .nav ul li a {
  42.     display: block;
  43.     height:52px;
  44.     padding: 0 10px;
  45.     line-height: 52px;
  46.     font-size: 20px;
  47.     color: black;
  48. }
  49. .nav ul li a:hover {
  50.     color: hotpink;
  51.     background-color: lightpink;
  52. }
  53. .search {
  54.     float: left;
  55.     width: 312px;
  56.     height: 52px;
  57.     background-color: skyblue;
  58.     margin-left: 50px;
  59. }
  60. .search input {
  61.     float: left;
  62.     width: 225px;
  63.     height: 48px;
  64.     border: 2px solid #00a4ff;
  65.     border-right: 0;
  66.     color: #bfbfbf;
  67.     font-size: 18px;
  68.     padding-left: 15px;
  69. }
  70. .search button {
  71.     float:left;
  72.     width: 70px;
  73.     height: 52px;
  74.     border: 0;
  75.     background: url(images/sousuo.png);
  76. }
  77. .demo {
  78.     margin: 30px 200px 1px 450px;
  79.     width: 600px;
  80.     height: 700px;
  81.     border-style: dotted;
  82.     border-width: 2px;
  83.     border-radius: 15px;
  84.     border-color: #9799fa;
  85.     background-image: url("images/dlzc.png");
  86.     text-align: center;
  87. }
  88. td {
  89.     padding: 10px;
  90. }
  91. td:hover {
  92.     background-image: url("images/bj..png");
  93. }
  94. select {
  95.     background: transparent;
  96.     border-color: #00a4ff;
  97.     border-style: dotted;
  98.     border-width: 2px;
  99.     border-radius: 15px;
  100. }
复制代码
 
 

 
 

 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

美丽的神话

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表