基于Web html的“我的家乡”网站前端设计

野性酷女 2024-04-06 10:18 97阅读 0赞

目录  
1、各板块的静态页面，参考实验一和实验二 1  
3、家乡所在位置的地图显示，参考实验七 1  
大屏幕尺寸下 3  
index.html 3  
利用了link设置了标签栏图标 4  
大屏幕尺寸下 4  
customs.html 5  
main-bg采用了backgroun-image设置了页面的背景图 7  
利用after伪类为链接按钮添加了样式 9  
photo.html 12  
利用cookie和js实现了一个待办事项 13  
利用JSON.parse将获得的值转化成json数组 13  
利用remove将已经存在的列表去除 13  
利用css属性选择器做了更加细致的控制 13  
利用js插件做出了点击展示不同颜色心心的特效 14  
map.html 16  
本页面主要是使用了地图模块 16  
community.html 17  
利用table和input编写了界面和界面按钮 18  
利用addEventListener设置监听，当点击删除按钮的时候删除该条内容 18  
contact\_us.html 19  
本处主要是本处web大作业的相关信息 19  
利用和js实现了分享功能 19  
小结 21

实验概述  
【实验目的及要求】  
我的家乡  
详细介绍自己的家乡，要求包括以下部分板块：风土人情、家乡风貌、家乡土特产品、家乡经济、家乡教育、文化传承、历史名人大事、历史名胜古迹、家乡社区与论坛

要求模拟一个简单的论坛，完成的功能包括：

1、各板块的静态页面，参考实验一和实验二  
2、页面中的各种动态效果和交互，如家乡图片的切换显示，可以使用JS插件或者HTML5实现  
3、家乡所在位置的地图显示，参考实验七  
4、论坛可以发帖、回帖、删除，本文转载自http://www.biyezuopin.vip/onews.asp?id=15037所输入的内容在页面上有显示（不需要保存到数据库），参考实验五和实验六

以上内容，只需要使用HTML、CSS、Javascript（包括Prototype或者JQuery等库）、Cookie、Google Maps等知识，不需要使用PHP的相关知识

评分标准：源文件（20%），实验报告（20%），使用网页集进行完成（10%），文字、图片等内容正常排版（15%），具备JS交互功能（10%），正确显示地图（10%），简单论坛功能（15%）。其它未规定的功能酌情加分（10%）。美观度额外加分（5%）。总分不超过100分。

【实验环境】  
操作系统：Windows 10  
浏览器：chrome 83.0.4103.106、firefox 68.9.0esr、 Edge、小米手机浏览器、firefox lite手机版

<!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="format-detection" content="telephone=no" />
      <meta name="format-detection" content="email=no">
      <title>我的家乡</title>
      <link rel="icon" type="image/png" href="images/tab.png" />
      <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
      <link href="./css/hjj-style.css" rel="stylesheet" type="text/css" media="all"/>
      <link href="./css/hjj-header.css" rel="stylesheet" type="text/css" media="all"/>
      <link href="./css/hjj-screen.css" rel="stylesheet" type="text/css" media="screen">
       
      <script src="./js/jquery.min.js"></script>
      <script src="./js/bootstrap.min.js"></script>
      <script src="./js/hjj-header.js"></script>
      <script src="./js/hjj-footer.js"></script>
    
      <style type="text/css">
        *{
        margin: 0;padding: 0}
        html,body{
        height: 100%}
        .outer-wrap{
        height: 100%;position: relative;}
        .welcome-panel{
        
            width: 300px;
            height: 300px;
            background-color: rgba(255, 255, 255, 0.5);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 25%;
            text-align: center;
        }
        .welcome-panel .empty,
        .welcome-panel .text {
        
          display: inline-block;
          *display: inline;
          *zoom: 1;
          vertical-align: middle;
          font-family: FZShuTi, Arial, Helvetica, sans-serif; 
          font-size:2em;
        }
        .welcome-panel .empty {
        
          height: 100%;
        }
    </style>
    </head>
    <body class = "home-bg">
      <div class="outer-wrap">
        <div id = "div_header"> </div>
        <script> load_header("div_header") </script>
        <div class="welcome-panel">
          <span class="empty"></span>
          <span class="text">欢迎来到我的家乡<br/> 泉州</span>
        </div>
      </div>
    </body>
    </html>

![在这里插入图片描述][27ea225edb254664a8ddb8c10e7c2a86.png_pic_center]  
![在这里插入图片描述][0242fcc3b0634ade921066d170039938.png_pic_center]  
![在这里插入图片描述][f72b67c679f044638a44561901f31263.png_pic_center]  
![在这里插入图片描述][60a0349031cd438fbf8ee5c46bd20a78.png_pic_center]  
![在这里插入图片描述][ae0237edad744cbc9b0f63b198bb1a6d.png_pic_center]  
![在这里插入图片描述][6766af7c919140fc9c4afce75235a321.png_pic_center]  
![在这里插入图片描述][8c5adb5138d54c84a86c0bf413207ea7.png_pic_center]  
![在这里插入图片描述][5ce5365ae09d4655a6bf348a99ae3143.png_pic_center]  
![在这里插入图片描述][0aa7f85fea6c46a98483626e4c4b0385.png_pic_center]  
![在这里插入图片描述][773088d60fa64f0c8d478d17380cd018.png_pic_center]  
![在这里插入图片描述][551acc983606409bac323bc2f6da7e00.png_pic_center]  
![在这里插入图片描述][1bdb904d8e874c45aef3a4c1796d578b.png_pic_center]  
![在这里插入图片描述][2714ca2ae6b247438a5cae78ccfeb2c2.png_pic_center]  
![在这里插入图片描述][8c6cb0d7c5f945b2a94a7870b25ac386.png_pic_center]  
![在这里插入图片描述][21fa8b02afa0462cb9ff47d5c3ea35ab.png_pic_center]  
![在这里插入图片描述][04f2c9fec4b947de93e6c83ecec7e74f.png_pic_center]  
![在这里插入图片描述][3f873106a94542ee87cf4cd27549289c.png_pic_center]

[27ea225edb254664a8ddb8c10e7c2a86.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fe9b3a6b820e4954b463d6993b278795.png
[0242fcc3b0634ade921066d170039938.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e3969ad7ff8048f5bff3c30a644861c4.png
[f72b67c679f044638a44561901f31263.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6a7e647ccccc4c9cb2ccd072dd42d344.png
[60a0349031cd438fbf8ee5c46bd20a78.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1eb7068e0637442a9db4136d928cd94e.png
[ae0237edad744cbc9b0f63b198bb1a6d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/722cfc79eb324b89883a6b6fd92a89bd.png
[6766af7c919140fc9c4afce75235a321.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5c6a31c712c642b7a38793ba1b5af6bc.png
[8c5adb5138d54c84a86c0bf413207ea7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d92afd6965b041eaa61f1a23dc176a3a.png
[5ce5365ae09d4655a6bf348a99ae3143.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5ea27a7052cc4ea890e7690a93877b8d.png
[0aa7f85fea6c46a98483626e4c4b0385.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/71b4d01615cc4e97898fc604ff4002c7.png
[773088d60fa64f0c8d478d17380cd018.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/aa638007055d42b2a3f3a4d9f1911a47.png
[551acc983606409bac323bc2f6da7e00.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1461f02c4bd348b2b9cbc4d16ba24f6a.png
[1bdb904d8e874c45aef3a4c1796d578b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bc1c233e5054462d8c0279a218985434.png
[2714ca2ae6b247438a5cae78ccfeb2c2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/697e7abf80fb44f48fac6621ccfb26c1.png
[8c6cb0d7c5f945b2a94a7870b25ac386.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a33a84045cfc41a4bada30a05e11b348.png
[21fa8b02afa0462cb9ff47d5c3ea35ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2e8ac29599d3460594b8eb746201ba4c.png
[04f2c9fec4b947de93e6c83ecec7e74f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b5eb8e441a3447758718b0fb33fedfbf.png
[3f873106a94542ee87cf4cd27549289c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/db9d281aeb2e4de685b95fc4221c9d06.png