基于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>

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

电子产品销销|基于WEB的电子产品商城网站的设计与实施
作者简介:全栈开发工程,从事Java.Python.前端.小程序方面的开发和研究,对大数据应用与开发比较感兴趣, 主要内容:Java项目.前端项目.Python项目.小程序开发.大数据项目.单片机收 ...
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你还 ...
Java计算机毕业设计体育网站前端设计源码+系统+数据库+lw文档
Java计算机毕业设计体育网站前端设计源码+系统+数据库+lw文档 Java计算机毕业设计体育网站前端设计源码+系统+数据库+lw文档本源码技术栈: 项目架构:B/S架构开发语言:Java语言开 ...
基于java的千千影评网站的设计与实现（论文+程序设计源码+数据库文件）
摘要:信息技术高度发达的今天,新闻业已经在互联网行业中占越发主导地位.而我们的生活也跟新闻息息相关,尤其是在高度发达的精神文化社会,人们对于电影的喜爱也越来越热衷,但想挑到自己喜爱的片子,就需要影评网 ...
java计算机毕业设计基于Web的社区商超系统的设计与实现源码+数据库+系统+lw文档+mybatis+运行部署
java计算机毕业设计基于Web的社区商超系统的设计与实现源码+数据库+系统+lw文档+mybatis+运行部署 java计算机毕业设计基于Web的社区商超系统的设计与实现源码+数据库+系统+lw文档 ...
计算机毕业设计ssm基于web的暗香小店系统的设计与实现80041系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于web的暗香小店系统的设计与实现80041系统+程序+源码+lw+远程部署计算机毕业设计ssm基于web的暗香小店系统的设计与实现80041系统+程序+源码+lw+远程部署 ...
基于jsp的塞北村镇旅游网站的设计与实现--【毕业论文】
文章目录本系列校训毕设的技术铺垫文章主体层次摘要示例摘要的写法英文摘要: 选题目的和意义: 与本课题相关的技术和方法综述: 系统分析经济上的可行性技术上的可行性操作上的可行性开发 ...
宠物狗站点html,宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)
宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)(论文11000字,网页代码) 摘要本设计将对宠物狗个性化服务网站前端设计开发与实现进行研究和探讨.借助网页设计与制作语 ...
d强制访问位置服务器的数据库w,基于WEB的分布式数据库系统的研究与设计-软件工程专业论文.docx...
基于WEB的分布式数据库系统的研究与设计-软件工程专业论文西北工业大学硕十论文西北工业大学硕十论文摘要摘要当今社会已进入了信息时代,人们将越来越多的信息存储在网络中的计算机上.如何更有效地存 ...
音乐相册源码php,基于PHP的DIY音乐相册网站的设计与实现(MySQL)(含录像)
基于PHP的DIY音乐相册网站的设计与实现(MySQL)(含录像)(开题报告,毕业论文8000字,程序代码,MySQL数据库) 本网站运用MYSQL作为后台数据库,以PHP为前端开发工具,实现了音乐相 ...

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

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

最新文章

热门文章