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

目录
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在这里插入图片描述

相关阅读:
一文以概之：Java类成员加载顺序
 【Dive into Deep Learning / 动手学深度学习】第十章 - 第一节：注意力提示
 英雄算法联盟 - 新九日集训人员招募规则
 Flink DataStream API
git 简单入门
 进程概述
 爬虫笔记：提高数据采集效率！代理池和线程池的使用
 < Python全景系列-7 > 提升Python编程效率：模块与包全面解读
 Synchronized
多线程进阶
原文地址：https://blog.csdn.net/newlw/article/details/126915187