大学生web课设--我的家乡网站

最新推荐文章于 2024-11-11 09:45:18 发布

2301_81370812

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量355

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/2301_81370812/article/details/135630690

版权

结构（img是图片可以自己找）

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/js1.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flex-container{
            width: 80%;
            margin: 10px auto;
            background-color: rgb(228, 232, 232);
            
           
        }
        .box-A{
            width: 100%;
            margin: 10px auto;
            background-color: rgb(204, 211, 211);
            color: #999999;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box-A a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            background-color: antiquewhite;
        }
        .box-B{
            width: 40%;
            height: 700px;
           overflow: scroll;
           
            background-image: url(img/a.jpg);
            float: left;

        }
        h3{
            text-align: center;
        }
       .box-C{
            width: 60%;
            height: 300px;
            
            float: left;
       }
       .box-C img{
        width: 100%;
        height: 100%;
       }
       .box-D{
            width: 60%;
            height: 400px;
            background-image: url(img/b.jpg);
            float: left;
            
       }
       .box-D a{
        display: block;
        margin: 18px;
        
       }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="box-A">
        <a href="Untitled-1.html" target="_self">首页</a>
        <a href="Untitled-2.html">页面1</a>
        <a href="Untitled-3.html">页面2</a>
        <a href="Untitled-4.html">页面3</a>
        <a href="Untitled-5.html">页面4</a>
    </div>
    <div class="box-B">
        <h3>南充</h3>
        <p>&nbsp&nbsp&nbsp&nbsp南充，又称“果城、绸都”，四川省辖地级市，四川第五大经济体、成渝城市群区域中心城市和川东北政治、经济、文化中心。位于四川省东北部、嘉陵江中游，由于古代地处充国南部得名；管辖3个区、5个县、代管1个县级市 [3]  [52]  ；幅员面积1.25万平方公里。 [4]  截至2021年底，全市常住人口556.2万</p>
        <p>&nbsp&nbsp&nbsp&nbsp南充历史悠久，源自汉高祖公元前202年设立的安汉，至今建成2220多年。春秋以来历为都、州、郡、府、道之治所；解放初期为川北行署区的驻地。南充是三国文化和春节文化的发祥地，民风淳朴，民俗优雅，三国文化、丝绸文化、红色文化和嘉陵江文化交融生辉。</p>
        <p>&nbsp&nbsp&nbsp&nbsp南充是成渝经济区北部中心城市 [57]  、II型大城市 [60]  、“一带一路”战略重要节点城市、川东北城市群重要节点城市、中国优秀旅游城市、 [1]  国家园林城市、全国清洁能源示范城市、南遂广城镇密集区中心城市、中国特色魅力城市200强之一 [2]  、国家重要的商品粮和农副产品生产基地、四川培育壮大的七大区域中心城市之一 [48]  、四川省石油天然气和能源化工基地、川东北区域科教文化中心、西部地区重要的交通枢纽城市，素有“水果之乡”、“丝绸之都”的美誉。2019年10月23日，被确定为“第三批城市黑臭水体治理示范城市”。 [5]  2020年，四川省人民政府同意设立南充临江新区。 [6]  2022年5月，被纳入巴蜀文化旅游走廊的规划范围</p>
    </div>
    <div class="box-C">
        <img src="img/a0.jpg" alt="" id="lunbo">
    </div>
    <div class="box-D">
        <a href="#">阆中古城</a>
        <a href="#">凌云山风景区</a>
        <a href="#">六合丝厂</a>
        <a href="#">滕王阁</a>
        <a href="#">风仪湾中法农业科技院</a>
        <a href="#">南充鹤鸣山旅游景区</a>
        <a href="#">朱德故里景区</a>
        <a href="#">白塔耍街</a>
        <a href="#">汉桓侯祠</a>
        <a href="#"> 西山风景区</a>
    </div>
</div>    
</body>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flex-container{
            width: 80%;
            margin: 10px auto;
            /* background-color: rgb(187, 39, 39); */
            
           
        }
        .box-A{
            width: 100%;
            margin: 10px auto;
            background-color: rgb(204, 211, 211);
            color: #999999;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box-A a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            background-color: antiquewhite;
        }
        .box-B{
            width: 300px;
            height: 300px;
            margin: 150px auto;
            /* border: 1px solid #000;             */
        }
        .B{
            width: 300px;
            height: 300px;
            transform-style:preserve-3d ;
            /*transform: rotateX(45deg) rotateY(45deg);*/
            animation: ro 4s linear infinite;

        }
        @keyframes ro{
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .page{
            width: 300px;
            height: 300px;
            position: absolute;
            transform-style:preserve-3d ;
        }
        .top{
            /* background-color: red; */
            transform: translateZ(150px);
        }
        .bottom{
            /* background-color: green; */
            transform: translateZ(-150px) rotateY(180deg);
            
        }
        .left{
            /* background-color: orange; */
            transform:translateX(-150px) rotateY(-90deg);
            
        }
        .right{
            /* background-color: pink; */
            transform: translateX(150px) rotateY(90deg) ;

        }
        .before{
            /* background-color: blue; */
            transform:translateY(150px) rotateX(-90deg) ;
        }
        .after{
            /* background-color: yellow; */
            transform:translateY(-150px) rotateX(90deg) ;
        }
        .page div:nth-child(1){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(2){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(3){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(4){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(5){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(6){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(7){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(8){
            animation: si 4s linear infinite;
        }
        .page div:nth-child(9){
            animation: si 4s linear infinite;
        }
        @keyframes si{
            0%{
                transform: translateZ(0px) scale(1) rotateX(0deg);
            }
            20%{
                transform: translateZ(300px) scale(0) rotateX(720deg);
            }
            90%{
                transform: translateZ(0px) scale(1) rotateX(0deg);
            }
           100%{
            transform: translateZ(0px) scale(1) rotateX(0deg);
            }
        }
       .box-C{
        font-family:"Times New Roman",Georgia,Serif;
        line-height: 2;
       }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="box-A">
            <a href="Untitled-1.html" target="_self">首页</a>
        <a href="Untitled-2.html" target="_self">页面1</a>
        <a href="Untitled-3.html" target="_self">页面2</a>
        <a href="Untitled-4.html" target="_self">页面3</a>
        <a href="Untitled-5.html" target="_self">页面4</a>
        </div>
        <div class="box-B">
            <div class="B">
                <div class="page top"></div>
                <div class="page bottom"></div>
                <div class="page left"></div>
                <div class="page right"></div>
                <div class="page before"></div>
                <div class="page after"></div>
            </div>
        </div>
        <script src="js/js2.js"></script>
        <div class="box-C">
            滕王阁是一座唐代风格的歇山式双垂檐屋顶建筑，同时建筑的还有玉台观，清代以来合称滕王阁。在滕王阁上可俯瞰阆中城区的全貌，晚上欣赏夜景也是不错的选择。

            游客可以坐公交车直达滕王阁，然后要登许多层的台阶到达滕王阁，爬楼梯的同时也可以锻炼身体。到达滕王阁后向下俯瞰，一边是城市美景，一边是江水风景，在这拍照取景非常不错。
            
            唐代诗圣杜甫两次旅居阆中，多次登临滕王阁赋诗抒怀，在《滕王亭子》、《玉台山》等名篇中，留下了“君王台榭枕巴山，万丈丹梯尚可攀，春日莺啼修竹里，佩家犬吠白云间”的佳句。
        </div>
    </div>
</body>
</html>

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flex-container{
            width: 80%;
            margin: 10px auto;
            
        }
        .box-A{
            width: 100%;
            margin: 10px auto;
            background-color: rgb(204, 211, 211);
            color: #999999;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box-A a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            background-color: antiquewhite;
        }
        .box-B{
            width: 900px;
            height: 300px;
            margin: 20px auto;
            position: relative;
            transform-style:preserve-3d ;
           
        }
        .box-B div:nth-child(1){
            animation: si 3s ;
        }
        .box-B div:nth-child(2){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(3){
            animation: si 3s ;
        }
        .box-B div:nth-child(4){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(5){
            animation: si 3s ;
        }
        .box-B div:nth-child(6){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(7){
            animation: si 3s ;
        }
        .box-B div:nth-child(8){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(9){
            animation: si 3s ;
        }
        .box-B div:nth-child(10){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(11){
            animation: si 3s ;
        }
        .box-B div:nth-child(12){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(13){
            animation: si 3s ;
        }
        .box-B div:nth-child(14){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(15){
            animation: si 3s ;
        }
        .box-B div:nth-child(16){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(17){
            animation: si 3s ;
        }
        .box-B div:nth-child(18){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(19){
            animation: si 3s ;
        }
        .box-B div:nth-child(20){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(21){
            animation: si 3s ;
        }
        .box-B div:nth-child(22){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(23){
            animation: si 3s ;
        }
        .box-B div:nth-child(24){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(25){
            animation: si 3s ;
        }
        .box-B div:nth-child(26){
            animation: si 3.5s ;
        }
        .box-B div:nth-child(27){
            animation: si 3s ;
        }
        @keyframes si{
          
            0%{
                transform: translateX(300px) scale(0) rotate(720deg);
            }
           
            90%{
                transform: translateZ(0px) scale(0.9) rotateX(0deg);
            }
           100%{
            transform: translateZ(0px) scale(1) rotateX(0deg);
            }
        }
       .box-C{
        width: 100%;
        height: 500px;

       }
       .c1{
        width: 40%;
        height: 500px;
        background-color: bisque;
        float: left;
        border:2px solid #fff;
        box-sizing:border-box;
       }
       .c2{
        width: 60%;
        height: 250px;
        background-color: azure;
        float: left;
        border:2px solid #fff;
        box-sizing:border-box;
    
       }
       .c3{
        width: 60%;
        height: 250px;
        background-color: rgb(164, 245, 245);
        float: left;
        border:2px solid #fff;
        box-sizing:border-box;
       }
       p{
        font-size: medium;
        font-style: italic;
        line-height: 3;
       }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="box-A">
            <a href="Untitled-1.html" target="_self">首页</a>
        <a href="Untitled-2.html" target="_self">页面1</a>
        <a href="Untitled-3.html" target="_self">页面2</a>
        <a href="Untitled-4.html" target="_self">页面3</a>
        <a href="Untitled-5.html" target="_self">页面4</a>
        </div>
        <div class="box-B">
           
        </div>
        <script src="js/js3.js"></script>
        <div class="box-C">
            <div class="c1"> 
                <p>位于南充市高坪区内，藏有一处古老的文化名山，拥有着深厚的蜀汉文化，同时塔文化历史悠久。历史回旋，沧海桑田，既保留了山水之美，又有白塔词赋的文化之美，这就是南充市高坪区的鹤鸣山旅游景区</p>
            <img src="img/a9.png" alt="" srcset="" style="width: 60%;height: 250px;">
            </div>
            <div class="c2">
                <p>占地230余亩的鹤鸣山景区依山而建，沿江而造，当历史文化与自然风光交互融合的时候，就展现出了不一样的风姿。在很多当地人的心里，鹤鸣山旅游景区已经不仅仅是家门口的公园那么简单了 ，更是一种归属。</p>
            </div>
            <div class="c3">
                <p>鹤鸣山景区是以宋代白塔为主景，以蜀汉文化，塔文化，宗教文化为内涵的综合性公园。白塔始建于北宋建隆年间，如今已有千年历史，还有重建于康熙十一年的宝寿寺，也有白塔晨钟、鹤鸣湖、古井潭、王平墓、文化艺术墙、望江长廊等等地方，是休闲娱乐的好去处</p>
            </div>
        </div>
    </div>
</body>
</html>

4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        .flex-container{
            width: 80%;
            margin: 10px auto;
            
        }
        .box-A{
            width: 100%;
            margin: 10px auto;
            background-color: rgb(204, 211, 211);
            color: #999999;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box-A a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            background-color: antiquewhite;
        }
        .box-B{
            width: 50%;
            height: 800px;
            background-color: antiquewhite;
            float: left;
            border:5px solid #fff;
        box-sizing:border-box;
        animation: si 3s ;
        }
        .box-C{
            width: 50%;
            height: 400px;
            background-color: azure;
            float: left;
            border:5px solid #fff;
        box-sizing:border-box;
        animation: si 3s ;
        }
        .box-D{
            width: 50%;
            height: 400px;
            background-color: beige;
            float: left;
            border:5px solid #fff;
        box-sizing:border-box;
        animation: si 3s ;
        }
        @keyframes si{
          
          0%{
              transform:  scale(0) ;
          }
         
       
         100%{
          transform: scale(1) ;
          }
      }
      p{
        line-height: 2.5;
      }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="box-A">
            <a href="Untitled-1.html" target="_self">首页</a>
        <a href="Untitled-2.html" target="_self">页面1</a>
        <a href="Untitled-3.html" target="_self">页面2</a>
        <a href="Untitled-4.html" target="_self">页面3</a>
        <a href="Untitled-5.html" target="_self">页面4</a>
        </div>
        <div class="box-B">
          <p>汉桓侯祠，俗称张飞庙，明代又称雄威庙，是全国重点文物保护单位，三国文化旅游线上的一颗璀璨明珠。

            张飞为三国蜀汉“五虎上将”之一，刘备攻取四川后，封张飞为车骑将军领司隶校尉，并任巴西太守镇守阆中。在镇守阆中7年间，张飞保境安民，发展农桑。章武元年（公元221年），张飞被属下张达、范强所害，谥为桓侯，葬于阆中。张飞遇害后人们敬其忠勇，为他筑冢建祠，以示纪念，从初建时算起汉桓侯祠已有1700多年历史。
            
            据阆州刺史崔善《新建巴西太守张桓侯祠记》，张飞死后即建起桓侯祠，虽历遭兵火毁坏，但累毁累建，“土宇几更，墓田如故”。明代典膳黎重，在墓冢四周增筑围墙47丈。此后还有多次续修。现在的桓侯祠为明清时重建的四合庭院式古建筑群，占地5000多平方米，规模恢宏，建造精美，由山门、敌万楼、左右牌坊、东西厢房、大殿、后殿、墓亭、墓冢组成，建筑面积达2200平方米，为三国文化的一大胜迹</p>
            <img src="img/a9.png" alt="" srcset="" style="width: 60%;height: 300px;">
        </div>
        <div class="box-C">
      <img src="img/a6.jpg" alt="" srcset="" style="width: 100%; height: 100%;">
        </div>
        <div class="box-D">
            <p>西山风景区位于南充市西郊，山上绿树环绕，空气质量很高，周末和家人、朋友来此登山锻炼、休闲赏景是一个不错的选择。景区内可爬山也可乘索道上下山，游客可根据实际情况自行选择。山上有个游乐场，爬山爬累了可以去射箭、开碰碰车，小孩子会非常喜欢。爬到山顶的风景是美的，远处南充市的城市美景尽收眼底，在这拍照很是不错。
                优待政策</p>
        </div>
    </div>
</body>
</html>

5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        .flex-container{
            width: 80%;
            margin: 10px auto;
            
        }
        .box-A{
            width: 100%;
            margin: 10px auto;
            background-color: bisque;
            color: #999999;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box-A a{
            text-decoration: none;
            color: #000;
        }
        a:hover{
            background-color: antiquewhite;
        }
        .box-B{
            width: 100%;
            height: 800px;
            background-color: bisque;
            text-align: center;
        }
        h1{
            margin: 20px auto;
        }
        textarea{
            width:80%;
            height: 500px;
           margin: 20px auto;
        }
        .C input{
            width: 100px;
            height: 40px;
            color: rgb(130, 17, 235);
            font-size: large;
            margin:100px auto ;
        }
    </style>
</head>
<body >
    <div class="flex-container" id="1">
        <div class="box-A">
            <a href="Untitled-1.html" target="_self">首页</a>
        <a href="Untitled-2.html" target="_self">页面1</a>
        <a href="Untitled-3.html" target="_self">页面2</a>
        <a href="Untitled-4.html" target="_self">页面3</a>
        <a href="Untitled-5.html" target="_self">页面4</a>
        </div>
        <div class="box-B">
            <h1 id="">反馈</h1>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <div class="C"><input type="button" value="提交" id="666" onclick=""></div>
        </div>
    </div>
    <div id="2" style="font-size: 500px;"></div>
    <script src="js/js5.js"></script>
</body>
</html>

1.js

var index = 0;
function lunbo(){
    index ++ ;
    
    if(index > 6){
        index = 0;
    }
    //获取img对象
    var img = document.getElementById("lunbo");
    img.src = "img/a"+index+".jpg";
}
//2.定义定时器
setInterval(lunbo,2000);

2.js

var arr=document.querySelectorAll(".page");
//遍历6个面
for(var n=0;n<arr.length;n++){
    //外层循环
    for(var r=0;r<3;r++){
        //内层循环
        for(var c=0;c<3;c++){
            var divs=document.createElement("div");
            divs.style.cssText="width:100px;height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image:url(img/a"+n+".jpg); background-size:300px 300px;";
            arr[n].appendChild(divs);
            //设置偏移属性
            divs.style.left=c*100+"px";
            divs.style.top=r*100+"px";

            divs.style.backgroundPositionX=-c*100+"px";
            divs.style.backgroundPositionY=-r*100+"px";
        }
    }
}

3.js

var arr=document.querySelector(".box-B");
    //外层循环
    for(var r=0;r<3;r++){
        //内层循环
        for(var c=0;c<9;c++){
            var divs=document.createElement("div");
            divs.style.cssText="width:100px;height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image:url(img/a8.png); background-size:900px 300px;";
            arr.appendChild(divs);
            //设置偏移属性
            divs.style.left=c*100+"px";
            divs.style.top=r*100+"px";

            divs.style.backgroundPositionX=-c*100+"px";
            divs.style.backgroundPositionY=-r*100+"px";
        }
    }

5.js

var bon=document.getElementById("666");
var b=document.getElementById("1");
var i=document.createElement("img");
var c=document.getElementById("2");
bon.onclick=function(){
   b.parentNode.removeChild(b);
   i.src="img/a10.png";
    c.appendChild(i);
    

}