HTML5+CSS大作业——大学生活记录个人主页(12页)

最新推荐文章于 2024-04-23 12:43:10 发布

web领域优质创作者-网页设计

最新推荐文章于 2024-04-23 12:43:10 发布

阅读量1.6k

点赞数 3

分类专栏： web期末作业设计网页 HTML5期末大作业大学生毕业设计源码文章标签： html5 html css3 个人作业

本文链接：https://blog.csdn.net/m0_46321522/article/details/121633932

版权

web期末作业设计网页同时被 3 个专栏收录

946 篇文章 90 订阅

订阅专栏

HTML5期末大作业

742 篇文章 370 订阅

订阅专栏

大学生毕业设计源码

376 篇文章 111 订阅

订阅专栏

HTML5+CSS大作业——大学生活记录个人主页(12页)

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<title>大学生活-留言板</title>
		<link rel="stylesheet" href="css/layui_1.css">
		<link rel="stylesheet" href="css/index_1.css">
	</head>

	<body>
		<!-- nav部分 -->
		<div class="nav">
			<div class="layui-container">
				<!-- logo -->
				<div class="nav-logo">
					<a href="index.html">
						<img src="picture/logo_1.png" style="width: 200px" height="80px" alt="类友网络">
					</a>
				</div>
				<div class="nav-list">
					<button>
          <span></span><span></span><span></span>
        </button>
					<ul class="layui-nav" lay-filter="">
						<li class="layui-nav-item">
							<a href="index.html">首页</a>
						</li>
						<li class="layui-nav-item">
							<a href="grjs.html">个人介绍</a>
						</li>
						<li class="layui-nav-item">
							<a href="kysh.html">课余生活</a>
						</li>
						<li class="layui-nav-item">
							<a href="xx.html">学校</a>
						</li>
						<li class="layui-nav-item">
							<a href="zygh.html">职业规划</a>
						</li>
						<li class="layui-nav-item layui-this">
							<a href="lyb.html">留言板</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- banner部分 -->
		<div class="banner lyb">
			<div class="title">
				<p>留言板</p>
				<p class="en">About Us</p>
			</div>
		</div>
		<!-- main部分 -->
		<div class="lyb1">
		<textarea id="memo" cols="60" rows="10"></textarea>
		<input type="button" value="追加内容" onclick="saveStorage('memo')" />
		<input type="button" value="初始化" onclick="clearStorage('msg')" />
		<hr />
		<p id="msg"></p>
		<script type="text/javascript">
			function saveStorage(id) {
				//获取textarea的value值
				var data = document.getElementById(id).value;
				//获取当前时间戳
				var time = new Date().getTime();
				//将时间戳作为键值，textarea的value值作为键值的内容保存在本地数据库
				localStorage.setItem(time, data);
				//保存成功后提示成功
				console.log("数据已保存");
				//设置loadStorage函数的传参（ID值）
				loadStorage('msg');
			}

			function loadStorage(id) {
				var result = '<table border="1">';
				//遍历本地数据所有内容
				for(var i = 0; i < localStorage.length; i++) {
					//获取每一条新增的键值
					var kes = localStorage.key(i);
					//获取新增键值的内容
					var value = localStorage.getItem(kes);
					//获取时间对象
					var date = new Date();
					//将时间戳转化为正常时间 Mon Jun 19 1972 11:12:44 GMT+0800 (中国标准时间) 的格式
					date.setTime(kes);
					//将转化后的内容变成字符串
					var datestr = date.toGMTString();
					//将所有新增内容添加到result变量中
					result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>'
				}
				result += '</table>';
				var target = document.getElementById(id);
				//将所有内容添加到元素中显示
				target.innerHTML = result;

			}

			function clearStorage() {
				//清除本地储存所有内容
				localStorage.clear();
				console.log("清除完毕");
			}
		</script>
		</div>
		<div class="footer">
			<div class="layui-container">
				<p class="footer-web">
					<a href="http://www.ccyl.org.cn/">共青团中央</a>
					<a href="http://www.ccyl.org.cn/organs/institution/xxb/">团中央学校部</a>
					<a href="http://www.gdcyl.org/Index.html">广东共青团</a>
					<a href="http://www.gdcyl.org/xxb/">广东学联</a>
					<a href="http://www.qygqt.org/">清远共青团</a>
					<a href="http://www.qypt.com.cn/">清远职业技术学院</a>
				</p>
				<div class="layui-row footer-contact">
					<div class="layui-col-sm2 layui-col-lg1"><img src="picture/erweima_1.png"></div>
					<div class="layui-col-sm10 layui-col-lg11">
						<div class="layui-row">
							<div class="layui-col-sm6 layui-col-md8 layui-col-lg9">
								<p class="contact-top">本站部分文章、资源来自互联网，版权归原作者及网站所有</p>
								<p class="contact-bottom">如果侵犯了您的权利，请及时致信告知我站</p>
							</div>
							<div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
								<p class="contact-top"><span class="right">XXX</span></p>
								<p class="contact-bottom"><span class="right">Copyright&nbsp;©&nbsp;2018-2020 XXX</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/layui_1.js"></script>
		<!--[if lt IE 9]>
  <script src="js/html5.min_1.js"></script>
  <script src="js/respond.min_1.js"></script>
<![endif]-->
		<script>
			layui.config({
				base: '../res/static/js/'
			}).use('firm');
		</script>
	</body>

</html>

四、获取更多源码

PC电脑端关注我们

五、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、更多源码

PC电脑端关注我们

HTML5期末考核大作业源码* 包含 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

web领域优质创作者-网页设计

关注

3
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5+CSS大作业——大学生活记录个人主页(12页)

HTML5+CSS大作业——大学生活记录个人主页(12页)常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!获取更多源码PC电脑端关注我们????作者主页-更多源码????
复制链接

扫一扫