HTML5+CSS大作业——大学生活记录个人主页(12页)
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
- HTML5+CSS大作业——大学生活记录个人主页(12页)
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!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://wwwyl/">共青团中央</a>
<a href="http://wwwyl/organs/institution/xxb/">团中央学校部</a>
<a href="http://www.gdcyl/Index.html">广东共青团</a>
<a href="http://www.gdcyl/xxb/">广东学联</a>
<a href="http://www.qygqt/">清远共青团</a>
<a href="http://www.qypt/">清远职业技术学院</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 © 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>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
期末作业代码网页设计HTML5+CSS大作业——大学生活记录个人主页(12页)
发布评论