HTML5期末大作业:我的家乡网站设计——我的家乡

1.网页作品简介 :

HTML期末大学生网页设计作业,可以替换文字图片满足不同的家乡

2.知识应用:

在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

3. 内容介绍:

《我的家乡》共有8个页面,分别为

首页:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>主页</title>
        <link rel="stylesheet" href="../css/Index.css" type="text/css">
        <link rel="stylesheet" href="../css/photoC.css" type="text/css">
        <link rel="stylesheet" href="../css/backtop.css" type="text/css"> 
    </head>
    <body>
        <div id="top">
            <a href="index.html">
            <img src="../image/logo1.png" class="img1"/>
            </a>
            <div id="top-right">
                <input type="text" name="search" placeholder="请输入关键字">
                <div id="search">搜索</div>
            </div>
            <div id="top-gov">
                <a href="https://www.longnan.gov.cn/">陇南政府官网</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.weather.com.cn/weather1d/101161010.shtml#input">陇南天气</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.lnszsks.com/">陇南教育</a>
            </div>
        </div>
        <hr style="height:10px;border:none;border-top:10px groove rgb(14,
            143, 194);" />
        <div id="top2">
            <div id="nav">
                <ul>
                    <li><a href="../html/Index.html">首页</a></li>
                    <li><a href="../html/History.html">历史</a></li>
                    <li><a href="../html/Culture.html">文化</a></li>
                    <li><a href="../html/Characters.html">人物</a></li>
                    <li><a href="../html/Foods.html">美食</a></li>
                    <li><a href="../html/Views.html">景点</a></li>
                    <li><a href="../html/Traffic.html">交通</a></li>
                    <li><a href="../html/Natural.html">资源</a></li>
                    <li><a href="../html/honor.html">荣誉</a></li>
                </ul>
            </div>
        </div>
        <hr style="height:1px;border:none;border-top:1px dashed goldenrod;"
            />
        <div id="top1">
            <div id="flash">
                <img src="../image/view2.jpg" style="display: block">
                <img src="../image/kangxian.jpeg">
                <img src="../image/wxd2.png">
                <img src="../image/wxtc1.png">
                <img src="../image/qbmc.png">
                <ul>
                    <li class="li_1"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="span-r">
                    <span>></span>
                </div>
                <div class="span-l">
                    <span></span>
                    </div>
                </div>
            </div>
            <hr style="height:1px;border:none;border-top:1px dashed
                goldenrod;" />
            <div id="center">
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        陇南市,古称“武都”,甘肃省辖地级市,位于甘肃省东南部,地处秦巴山区、黄土高原、青藏高原的交接区域,东接陕西,南通四川。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        陇南地域,夏商周属古雍州地,秦汉设立武都郡,新中国成立后为武都专区、武都地区,1985年更名为陇南地区,因地处陇山之南而得名, 2004年设立地级陇南市。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        陇南市扼甘陕川三省要冲,素称“秦陇锁钥,巴蜀咽喉”;又因地貌俊秀,气候宜人,素有“陇上江南”之称。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                    陇南是秦人的发祥地和摇篮,早在3000多年前,秦始皇的祖先在这里牧马狩猎,开化拓土,始国东进,最终雄霸中原,一统神州。礼县西汉水流域丰富的史前文化遗址及出土的大量珍贵文物为研究秦帝国建国的初创史提供了极其宝贵的资料。20世纪90年代初,礼县大堡子山春秋初期秦公陵墓的抢救性发掘与研究,确证今礼县东北部西汉水上游地区即是《史记》记载的从商末至春秋初期约400年间秦人的先世嬴姓部族与早期秦国的活动中心——西垂(西犬丘)之地,也是秦第一都邑和第一陵区所在地。
                </p>
                <video width="800" height="500" controls>
                    <source src="../video/LongNan.mp4" type="video/mp4">
                    <source src="../video/LongNan.ogg" type="video/ogg">
                    <source src="../video/LongNan.webm" type="video/webm">
                    <object data="../video/LongNan.mp4" width="800"
                        height="500">
                        <embed src="../video/LongNan.swf" width="800"
                            height="500">
                    </object>
                </video>
                <div id="center-rb">
                    <p>
                        陇南市,甘肃省辖地级市,位于甘肃省东南部,位于东经104°01′19″~106°35′20″、北纬32°35′45″~34°32′00″之间,总面积2.78万平方千米
                    </p>
                    <p>
                        陇南地处西秦岭东西向褶皱带发育的陇南山地,位于我国阶梯地形的过渡带。全市地势西北高,东南低。境内高山、深谷、丘陵、盆地依次分布,错落相间。
                    </p>
                    <p>
                        陇南是甘肃省唯一属于长江水系并拥有亚热带气候的地区,年降雨量在600毫米在右,平均气温16至18摄氏度。而甘肃其他地区多处于温带大陆性气候,降水量多在400毫米以下。甘肃全省平约气温也仅有0至15席。陇南不论在气候类型、年平均降雨量、气温等方面均相较甘肃其他地方更为温和湿润,更加接近南方地区的气候类型。
                    </p>
                </div>
            </div>
            <div id="bottom">
                Copyright © 2024&nbsp;&nbsp;小诸葛的博客&nbsp;&nbsp;小诸葛&nbsp;&nbsp;All rights reserved &nbsp;&nbsp;
                <a href="../html/Author.html">关于作者</a>
            </div>
            <div id="back-to-top">
                <a href="#top"><img src="../image/BackTop.png"></a>
            </div>
        </body>
        <script src="../js/photoC.js"></script>
        <script src="../js/backtop.js"></script>
    </html>

人物

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>人物</title>
        <link rel="stylesheet" href="../css/Index.css" type="text/css">
        <link rel="stylesheet" href="../css/characters.css" type="text/css">
        <link rel="stylesheet" href="../css/backtop.css" type="text/css"> 
    </head>
    <body>
        <div id="top">
            <a href="index.html">
                <img src="../image/logo1.png" class="img1"/>
            </a>
            <div id="top-right">
                <input type="text" name="search" placeholder="请输入关键字">
                <div id="search">搜索</div>
            </div>
            <div id="top-gov">
                <a href="https://www.longnan.gov.cn/">陇南政府官网</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.weather.com.cn/weather1d/101161010.shtml#input">陇南天气</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.lnszsks.com/">陇南教育</a>
            </div>
        </div>
        <hr style="height:10px;border:none;border-top:10px groove rgb(14,
            143, 194);" />
        <div id="top2">
            <div id="nav">
                <ul>
                    <li><a href="../html/Index.html">首页</a></li>
                    <li><a href="../html/History.html">历史</a></li>
                    <li><a href="../html/Culture.html">文化</a></li>
                    <li><a href="../html/Characters.html">人物</a></li>
                    <li><a href="../html/Foods.html">美食</a></li>
                    <li><a href="../html/Views.html">景点</a></li>
                    <li><a href="../html/Traffic.html">交通</a></li>
                    <li><a href="../html/Natural.html">资源</a></li>
                    <li><a href="../html/honor.html">荣誉</a></li>
                </ul>
            </div>
        </div>
        <hr style="height:1px;border:none;border-top:1px dashed goldenrod;"
            />
        <div id="C2-center">
            <div id="C2-centerC">
                <table>
                    <tr>
                        <td rowspan="2">
                            <img src="../image/shenzi.jpg">
                        </td>
                        <td rowspan="2">
                            <img src="../image/LDJJ1.jpg">
                        </td>
                        <td rowspan="2">
                            <img src="../image/shgxh.jpg">

                        </td>
                        <td rowspan="2">
                            <img src="../image/xiaogong.jpg">
                        </td>
                        <td rowspan="2">
                            <img src="../image/klld.jpg">
                        </td>
                        <td rowspan="2">
                            <img src="../image/keqing.jpg">
                        </td>
                    </tr>
                    <tr></tr>
                    <tr>
                        <td rowspan="3" valign="top">
                            <p>
                                八重神子
                            </p>
                            <p>
                                稻妻鸣神大社的宫司大人,掌管神社的一切事宜。兼任轻小说出版社“八重堂”总编。
                                永恒之神的眷属,也是与其关系最为密切的好友。
                            </p>
                            <p>
                                细究起来,八重神子的头衔竟与她的性情同样难测多变。出于各种目的试图搞清神子“真面目”的人,可以从天领奉行府一路排到“八重堂”门口,然而迄今为止,成功者依旧寥寥。
                                ——只需记得,她永远是那位“兼具智慧与美貌的八重神子大人”就好。
                            </p>
                            <p>
                                八重神子外貌艳丽动人,一头柔顺的粉色长发在发尾束起,象征其神使身份的狐耳上常年挂着镶嵌着紫色宝石的耳坠,右耳的耳坠上镶嵌的是她的雷属性的神之眼。身着以红白二色为主色调的巫女服,同色的振袖与上衣分隔,作为袖套固定于上臂。宽大的黑色腰结系在后腰,双腿裸露在外,脚上穿着一对木屐。
                            </p>
                        </td>
                        <td rowspan="3" valign="top">
                            <p>
                                雷电将军
                            </p>
                            <p>
                                成为将军之前,雷电影只是一介武人,负责履行前代的命令。
                            </p>
                            <p>
                                影也有和友人坐在樱树下玩歌牌的轻松时光。她从未做过最后的胜者,也没有品尝过狐斋宫大人为牌局赢家专门准备的奖励品。于是她将习武练刀的专注投入到歌牌的修习中,经常主动要求和真或是御舆千代进行歌牌对决,又或是一个人在月光下朗诵歌句。
                            </p>
                            <p>
                                影并不是贪图甜点。身为武人,她认定输掉的就要赢回来。这份糕点,更像是对她求胜之心的奖赏。可她很快又不自觉地笑了。糕点相当美味,如同胜利的滋味。至于她笨拙忍笑的模样,对友人们来说也是有趣的景象。时至今日,影仍时常回忆起那棵樱树。即便已经很久没去看过……即便那棵树下已经空无一人,她也希望时间能够永远停下。
                            </p>
                        </td>
                        <td rowspan="3" valign="top">
                            <p>
                                珊瑚宫心海
                            </p>
                            <p>
                                海祇岛的“现人神巫女”,意为以凡人之躯承载神的意志、代替神明守护这片土地之人,即——海祇岛最高领袖
                                人们普遍认为珊瑚宫心海是一名足智多谋、深不可测的领导者。因为她脸上总是带着恬静的笑容,谈笑间将所有事务安排得井井有条。 
                            </p>
                            <p>
                                “放心,有珊瑚宫大人在”,这句话也成为了海祇岛民众时常挂在嘴边的话语。
                            </p>
                            <p>
                                但其实,很少有人知道心海从前最大的梦想不过是做一个隐于幕后的军师。对她来说,与人聊天是极度消耗能量的事,每次演讲会不自觉地手抖,面对繁重的工作也会有退缩的念头。每天她最快乐的事情,就是完成工作后宅在家里,捧一本心仪的兵书独自研究。
                            </p>
                            <p>
                                年少登高位,对许多人而言都是莫大的幸运。可对心海来说,越在高处,越是如履薄冰
                            </p>
                        </td>
                        <td rowspan="3" valign="top">
                            <p>
                                宵宫
                            </p>
                            <p>
                                小时候的我曾经幻想,如果天空是一块巨大的蛋糕,那在空中绽放的烟花就是生日蜡烛了吧?
                            </p>
                            <p>
                                所以这次我准备了好久,制作了像生日蜡烛一样温暖的烟花!在这样的烟花下许愿,愿望也会更快实现吧。
                            </p>
                            <p>
                                嘿嘿,那么,该放烟花咯——
                            </p>
                            <p>
                                看,就是这里啦!常来烟花店的小孩子们跟我说,生日来这里许愿很灵的。
                            </p>
                            <p>
                                嗯……希望能做出更多漂亮的烟花,希望家人身体健康,希望有机会能再和你一起旅行。
                            </p>
                            <p>
                                怎么办,有好多好多想法,全写下来怕是要写到天黑了……欸,你要帮我吗?
                            </p>
                            <p>
                                嗯……想到了!就写这个。这样你只要陪我度过这个生日,就算是帮到我咯~!
                            </p>
                        </td>
                        <td rowspan="3" valign="top">
                            <p>
                                克洛琳德
                            </p>
                            <p>
                                在枫丹,所有嫌疑犯在上法庭之前,都有一次“维护名誉”的机会,可以提出向官方的决斗代理人发起决斗。打赢了就可以免被审判,打输了还是要乖乖登上法庭。决斗代理人是从整个国家中精挑细选出来的武力最强者,克洛琳德更是其中的最强者 。
                            </p>
                            <p>
                                克洛琳德是一位高冷威严的美人,留着一头略微偏蓝的黑色长发,刘海边发较长,眼睛是紫罗兰色。头戴蓝色侧边帽,有白色羽毛装饰,头发用黑色蝴蝶结扎着低马尾,头发侧面是浅蓝色的挑染。立领下戴着一条深蓝紫色的领带,雷属性的神之眼挂在颈处。身穿白色衬衫,后面有着多层互叠的深蓝色和黑色相间的披风,腰部穿着类似束腰的黑色腰带,腰下是黑色短裙摆。手上戴着白色的长手套。双腿穿着黑色连裤袜,大腿戴有黑色腿环,脚上穿着白色厚短袜与黑色的高跟鞋,鞋跟材质为金属。整体衣着为黑色搭蓝紫色
                            </p>
                        </td>
                        <td rowspan="3" valign="top">
                            <p>
                                刻晴
                            </p>
                            <p>
                                璃月七星之一,玉衡星。对“帝君一言而决的璃月”颇有微词——但实际上,神挺欣赏她这样的人 
                            </p>。
                            <p>
                                岩王帝君为璃月港带来繁荣昌盛,他的治世威名化作演义传记为人津津乐道。然而,身为离神最近的人之一,刻晴似乎是最缺乏敬畏心的那个。
                            </p>
                            <p>
                                璃月七星随时关注着港内的大小事情,岩王帝君每年却只降临一次。千年历史已经证明追随帝君的脚步是正确之举,但刻晴始终认为,生而为“人”就该有“人”的骄傲,“人”的想法同样该被重视。
                            </p>
                            <p>
                                因此,她经常发表与帝君不同的意见,并一马当先地将其付诸实践。如此激进的做法确实取得了不少杰出成果,但也引来了诸多岩王帝君虔诚信徒的反对声。这种反对在刻晴看来,无非是偷懒的借口——习惯于活在神明庇护之下,永不会主动思考人类的前景。可总有一个人要走在时代最前沿,亲手开创新的道路。玉衡星,自然当仁不让。   
                            </p>
                        </td>
                    </tr>
                    <tr></tr>
                    <tr></tr>
                </table>
            </div>
        </div>
        <div id="bottom">
            Copyright © 2024&nbsp;&nbsp;小诸葛的博客&nbsp;&nbsp;小诸葛&nbsp;&nbsp;All rights reserved &nbsp;&nbsp;
            <a href="../html/Author.html">关于作者</a>
        </div>
        <div id="back-to-top">
            <a href="#top"><img src="../image/BackTop.png"></a>
        </div>
    </body>
    <script src="../js/backtop.js"></script>
</html>

交通

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>交通</title>
        <link rel="stylesheet" href="../css/Index.css" type="text/css">
        <link rel="stylesheet" href="../css/traffic.css" type="text/css">
        <link rel="stylesheet" href="../css/backtop.css" type="text/css">
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=	9a7401993b99a43d7f5657f7c92cf9c2"></script>
        <script>
            function initMap() {
                var map = new AMap.Map('map', {
                    center: [104.955, 33.3694], // 设置中心点为陇南市
                    zoom: 10 // 设置缩放级别
                });
        
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(104.955, 33.3694) // 标记位置
                });
        
                // 添加点击事件
                marker.on('click', function(e) {
                    // 在新标签页中打开高德地图
                    window.open('https://ditu.amap.com/search?query=%E9%99%87%E5%8D%97%E5%B8%82');
                });
        
                map.add(marker);
            }
        </script>
        
        <style>
            #map {
                width: 100%;
                height: 560px;
                background-color: rgb(255, 255, 255); /* 确保背景为不透明 */
                opacity: 1 !important; /* 确保完全不透明 */
                z-index: 10; /* 设置一个比周围元素更高的层级 */
            }
        </style>
    </head>
    <body onload="initMap()">
        <div id="top">
            <a href="index.html">
                <img src="../image/logo1.png" class="img1"/>
            </a>
            <div id="top-right">
                <input type="text" name="search" placeholder="请输入关键字">
                <div id="search">搜索</div>
            </div>
            <div id="top-gov">
                <a href="https://www.longnan.gov.cn/">陇南政府官网</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.weather.com.cn/weather1d/101161010.shtml#input">陇南天气</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.lnszsks.com/">陇南教育</a>
            </div>
        </div>
        <hr style="height:10px;border:none;border-top:10px groove rgb(14, 143, 194);" />
        <div id="top2">
            <div id="nav">
                <ul>
                    <li><a href="../html/Index.html">首页</a></li>
                    <li><a href="../html/History.html">历史</a></li>
                    <li><a href="../html/Culture.html">文化</a></li>
                    <li><a href="../html/Characters.html">人物</a></li>
                    <li><a href="../html/Foods.html">美食</a></li>
                    <li><a href="../html/Views.html">景点</a></li>
                    <li><a href="../html/Traffic.html">交通</a></li>
                    <li><a href="../html/Natural.html">资源</a></li>
                    <li><a href="../html/honor.html">荣誉</a></li>
                </ul>
            </div>
        </div>
        <hr style="height:1px;border:none;border-top:1px dashed goldenrod;" />
        <div id="T-center">
            <div id="T-text1">
                <p style="font-size: 30px;">公路</p>
                <p>
                    陇南市构建“一廊、一圈、两中心、多直联”综合交通网主骨架,“铁公机”立体交通网络基本形成,成为甘陕川结合部新的交通物流枢纽。
                </p>
                <p style="font-size: 20px; line-height: 35px">
                    截至2022年末,陇南市境内公路2658条,其中普通国道5条、国家高速3条,省道39条、省级高速1条、县道49条、乡道182条、村道2379条。通车总里程19263.2千米,其中:高速公路644.8千米、一级公路2.6千米、二级公路906.8千米、三级公路1122.1千米、四级公路16008.4千米、等外公路578.5千米。
                </p>
            </div>
            <div id="T-map">
                <div id="map"></div>
            </div>
            <div id="T-text2">
                <p style="font-size: 30px;">铁路</p>
                <p>
                    铁道线路:兰渝铁路、宝成铁路、天平铁路南延线、阳平关至陇南至九寨沟铁路、合作至哈达铺至徽县铁路、兰州至天水至汉中城际铁路。
                </p>
                <p>
                    截至2018年末,陇南境内建有兰渝铁路、宝成铁路,规划有天平铁路南延线、阳平关至陇南至九寨沟铁路、合作至哈达铺至徽县铁路。兰渝铁路于2017年9月30日全线通车,陇南境内有222千米,设有陇南站、宕昌哈达铺站。2022年,陇南站完成旅客发送任务72.3万人,日运送旅客最高达7500多人次。正在新建天水至陇南铁路,全长208.2千米,全线设站18处,设计时速160千米/小时,项目概算总投资245.3亿元。
                </p>
                <p style="font-size: 30px;">航空</p>
                <p>
                    截至2018年3月,陇南有支线机场1处,规划有通用机场3处,风景区起降点4处。陇南成县机场于2018年通航运营,开通航线9条,通达北京、上海、深圳等13座城市,航线里程达到3.8万千米。2022年,完成运输起降2904架次,旅客吞吐量19.09万人次,货邮吞吐量108.8吨。
                </p>
                <p style="font-size: 30px;">航运</p>
                <p>
                    截至2015年底,陇南港有白龙湖、碧口2个港区,内河通航水域分别为白龙江航道、白水江航道、让水河航道,航道总里程194千米,均为通航航段。陇南港口共有码头25座、泊位31个。其中,白龙江汉王至曲水湾136千米航道,中庙至罐子沟16千米航道Ⅵ级;白水江关头坝——玉垒16千米航道Ⅵ级;让水河范坝—河口段24千米航道Ⅵ级。截至2015年底,陇南港口共有码头25座、泊位31个。根据《甘肃省秦巴山片区区域发展与扶贫攻坚实施规划(2016—2020年)》陇南港规划增建码头,建设白龙江碧口库区航运工程,努力实现白龙江主要区段通航。
                </p>
            </div>
        </div>
        <div id="bottom">
            Copyright © 2024&nbsp;&nbsp;小诸葛的博客&nbsp;&nbsp;小诸葛&nbsp;&nbsp;All rights reserved &nbsp;&nbsp;
            <a href="../html/Author.html">关于作者</a>
        </div>
        <div id="back-to-top">
            <a href="#top"><img src="../image/BackTop.png"></a>
        </div>
    </body>
    <script src="../js/backtop.js"></script>
</html>

景点:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>主页</title>
        <link rel="stylesheet" href="../css/Index.css" type="text/css">
        <link rel="stylesheet" href="../css/photoC.css" type="text/css">
        <link rel="stylesheet" href="../css/backtop.css" type="text/css"> 
    </head>
    <body>
        <div id="top">
            <a href="index.html">
            <img src="../image/logo1.png" class="img1"/>
            </a>
            <div id="top-right">
                <input type="text" name="search" placeholder="请输入关键字">
                <div id="search">搜索</div>
            </div>
            <div id="top-gov">
                <a href="https://www.longnan.gov.cn/">陇南政府官网</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.weather.com.cn/weather1d/101161010.shtml#input">陇南天气</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.lnszsks.com/">陇南教育</a>
            </div>
        </div>
        <hr style="height:10px;border:none;border-top:10px groove rgb(14,
            143, 194);" />
        <div id="top2">
            <div id="nav">
                <ul>
                    <li><a href="../html/Index.html">首页</a></li>
                    <li><a href="../html/History.html">历史</a></li>
                    <li><a href="../html/Culture.html">文化</a></li>
                    <li><a href="../html/Characters.html">人物</a></li>
                    <li><a href="../html/Foods.html">美食</a></li>
                    <li><a href="../html/Views.html">景点</a></li>
                    <li><a href="../html/Traffic.html">交通</a></li>
                    <li><a href="../html/Natural.html">资源</a></li>
                    <li><a href="../html/honor.html">荣誉</a></li>
                </ul>
            </div>
        </div>
        <hr style="height:1px;border:none;border-top:1px dashed goldenrod;"
            />
        <div id="top1">
            <div id="flash">
                <img src="../image/view2.jpg" style="display: block">
                <img src="../image/kangxian.jpeg">
                <img src="../image/wxd2.png">
                <img src="../image/wxtc1.png">
                <img src="../image/qbmc.png">
                <ul>
                    <li class="li_1"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="span-r">
                    <span>></span>
                </div>
                <div class="span-l">
                    <span></span>
                    </div>
                </div>
            </div>
            <hr style="height:1px;border:none;border-top:1px dashed
                goldenrod;" />
            <div id="center">
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        陇南市,古称“武都”,甘肃省辖地级市,位于甘肃省东南部,地处秦巴山区、黄土高原、青藏高原的交接区域,东接陕西,南通四川。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        陇南地域,夏商周属古雍州地,秦汉设立武都郡,新中国成立后为武都专区、武都地区,1985年更名为陇南地区,因地处陇山之南而得名, 2004年设立地级陇南市。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        陇南市扼甘陕川三省要冲,素称“秦陇锁钥,巴蜀咽喉”;又因地貌俊秀,气候宜人,素有“陇上江南”之称。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                    陇南是秦人的发祥地和摇篮,早在3000多年前,秦始皇的祖先在这里牧马狩猎,开化拓土,始国东进,最终雄霸中原,一统神州。礼县西汉水流域丰富的史前文化遗址及出土的大量珍贵文物为研究秦帝国建国的初创史提供了极其宝贵的资料。20世纪90年代初,礼县大堡子山春秋初期秦公陵墓的抢救性发掘与研究,确证今礼县东北部西汉水上游地区即是《史记》记载的从商末至春秋初期约400年间秦人的先世嬴姓部族与早期秦国的活动中心——西垂(西犬丘)之地,也是秦第一都邑和第一陵区所在地。
                </p>
                <video width="800" height="500" controls>
                    <source src="../video/LongNan.mp4" type="video/mp4">
                    <source src="../video/LongNan.ogg" type="video/ogg">
                    <source src="../video/LongNan.webm" type="video/webm">
                    <object data="../video/LongNan.mp4" width="800"
                        height="500">
                        <embed src="../video/LongNan.swf" width="800"
                            height="500">
                    </object>
                </video>
                <div id="center-rb">
                    <p>
                        陇南市,甘肃省辖地级市,位于甘肃省东南部,位于东经104°01′19″~106°35′20″、北纬32°35′45″~34°32′00″之间,总面积2.78万平方千米
                    </p>
                    <p>
                        陇南地处西秦岭东西向褶皱带发育的陇南山地,位于我国阶梯地形的过渡带。全市地势西北高,东南低。境内高山、深谷、丘陵、盆地依次分布,错落相间。
                    </p>
                    <p>
                        陇南是甘肃省唯一属于长江水系并拥有亚热带气候的地区,年降雨量在600毫米在右,平均气温16至18摄氏度。而甘肃其他地区多处于温带大陆性气候,降水量多在400毫米以下。甘肃全省平约气温也仅有0至15席。陇南不论在气候类型、年平均降雨量、气温等方面均相较甘肃其他地方更为温和湿润,更加接近南方地区的气候类型。
                    </p>
                </div>
            </div>
            <div id="bottom">
                Copyright © 2024&nbsp;&nbsp;小诸葛的博客&nbsp;&nbsp;小诸葛&nbsp;&nbsp;All rights reserved &nbsp;&nbsp;
                <a href="../html/Author.html">关于作者</a>
            </div>
            <div id="back-to-top">
                <a href="#top"><img src="../image/BackTop.png"></a>
            </div>
        </body>
        <script src="../js/photoC.js"></script>
        <script src="../js/backtop.js"></script>
    </html>

如需获取项目源代码,可点击下方卡片,扫码关注微信公众号:小诸葛的博客,回复 702

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值