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

biyezuopinvip

已于 2024-05-01 18:34:14 修改

阅读量4.7k

点赞数 8

文章标签：前端 html Web 我的家乡网站个人网站源码报告

于 2022-09-18 11:07:06 首次发布

本文链接：https://blog.csdn.net/newlw/article/details/126915187

版权

目录
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>