期末大作业 | ToDoList网页设计一个晚上一个奇迹用户登录界面

一、简要说明

二、登录页核心代码

三、CSS样式代码

四、JavaScript脚本代码

五、页面效果截图

六、我的心得

一、简要说明

在当今这样一个快节奏的时代，每个人的时间都很紧迫，就算是刚刚好的时间，也会因为这样或是那样的“意外”情况，而变成那个慌张赶着截止时间交作业的人，这样的事情发生太多了。其实，只需要十分钟，生活就会变得更加从容而愉快。也许，十分钟只够喝一杯水，刷一条短视频，甚至是随意地发个呆，十分钟就过去了，十分钟都不够打一个电话。但是，给制定计划预留十分钟的时间，生活可能会变得更加舒适又随和。所以，我选择制作一个可以规划生活事项的小网页，希望大家可以让时间慢下来，去做自己真正想做的事，去过自己喜欢的生活。

本程序实现的大致功能：

用户登录。实现用户个人空间登录的功能，满足更改密码、立即注册的账户管理要求；
番茄钟。按照科学的番茄钟时间管理进行程序设计，为计划的实现提供25min的时间安排；
备忘录。记录每日需要完成的工作或学习任务，并提供打卡清单的功能；
纪念日。实现网页内部的考研倒计时功能的使用；
日记本。以电子日记的形式写下每天的想法或创意，完成记录生活的功能实现；
关于我。简单介绍一下自己。

接下来先记录一下我的登录页。

二、登录页核心代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>ToDoList我欲摘星斗</title><!-- 各个栏目的CSS样式 --><link href="css/denglu.css" rel="stylesheet" type="text/css" /><!-- 登录格式验证的js文件 --><script src="js/denglu.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 导航栏 --><div><ul class="to3"><li>TODOLIST&nbsp;|&nbsp;我欲摘星斗</li></ul><ul class="to1"><!-- 登录引导 --><li class="to2" onclick="alert('注册登录后尽享全部功能！')">首页</li><li class="to2" onclick="alert('注册登录后尽享全部功能！')">番茄钟</li><li class="to2" onclick="alert('注册登录后尽享全部功能！')">备忘录</li><li class="to2" onclick="alert('注册登录后尽享全部功能！')">纪念日</li><li class="to2" onclick="alert('注册登录后尽享全部功能！')">日记本</li><li class="to2" onclick="alert('注册登录后尽享全部功能！')">关于我</li></ul></div><!-- banner开始通栏 --><div><div class="banner"><!--左侧布局--><div class="left"><div class="content_left"><p class="school_en">ToDoList</p><p class="school_ch">我欲摘星斗</p><p class="advertise">来日纵是千千晚星，亮过今晚月亮<br>今晚的月光会记得你眼睛里的海和你心里的帆船</p><ul class="style_a"><li class="current"><a href="img/banner图.jpg"></a></li><li class="current"><a href="img/banner图1.jpg"></a></li><li class="current"><a href="img/banner图2.jpg"></a></li><li class="current"><a href="img/banner图3.jpg"></a></li><li class="current"><a href="img/banner图4.jpg"></a></li></ul></div></div><!--右侧布局--><div class="right"><div class="content_right"><h4>禁止摸鱼，快去学习！<br>INTRODUCTION</h4><ul class="style_icon"><li><a title="番茄钟" onclick="alert('注册登录后尽享全部功能！')"><img src="img/g1.jpg"></a></li><li><a title="备忘录" onclick="alert('注册登录后尽享全部功能！')"><img src="img/g6.jpg"></a></li><li><a title="纪念日" onclick="alert('注册登录后尽享全部功能！')"><img src="img/g2.jpg"></a></li><li><a title="日记本" onclick="alert('注册登录后尽享全部功能！')"><img src="img/g4.jpg"></a></li><li><a title="关于我" onclick="alert('注册登录后尽享全部功能！')"><img src="img/g5.jpg"></a></li></ul><br /><p class="cl">你所谓的迷茫<br>不过是清醒地看着自己沉沦<br>没有人会为你踏雪而来<br>喜欢的风景要自己去看</p></div></div></div></div><!-- 登录注册 --><div class="main_login"><div class="login_page"><!-- 登录头像，可以像大网站一样，和后台的注册信息库相关联，登录后变成注册时的自定义头像 --><div class="login_img"><img src="img/3.png" alt="image"></div><br /><div class="login_1"><table align="center" aborder="0" cellspacing="5" cellpadding="10" width="500px"><tr class="login_2"><!--用户名和密码--><td colspan="5"><form action="首页.html" onsubmit="return fn()"><input type="text" class="login_3" name="userName" placeholder="用户名/手机号/邮箱"/><div class="login_4" style="z-index: 1;"></div><input type="password" class="login_6" name="passWord" placeholder="密码"/><!-- 登录按钮变换为小箭头，也可以直接回车进行登录 --><button type="submit" class="login7"><h2 style="font-weight: bolder;">→</h2></button><div class="login_4" style="z-index: 1;"></div></form></td></tr><!-- 访客账号提示 --><tr class="login_2" style="height: 30px;"><td colspan="5" style="text-align: center;"><h5 style="font-size: 20px;color: #000;">访客账号：1910034217 默认密码：123123</h5></td></tr><tr class="login_2"><td></td><td></td><!--忘记密码--><td><button class="login"><h2><a href="修改密码.html">忘记密码</a></h2></button></td><td></td><!--立即注册--><td><button class="login"><h2><a href="注册.html">立即注册</a></h2></button></td></tr></table></div></div></div><!-- banner结尾通栏 --><div class="end"><!-- 左侧通栏 --><div class="end_left"><ul class="end_title"><li class="end1"><img src="img/3.png" />TODOLIST&nbsp;|&nbsp;我欲摘星斗</li><li class="end2">由xxx设计推出，让每一个有自律愿望的用户能够养成自律的习惯，奠定实现梦想的基础。</li></ul></div><!-- 右侧通栏 --><div class="end_right"><p>联系我们<br />邮箱：3xxx@qq.com<br />电话：18811012138(工作日周一至周五：8:30-11:30，13:00-17:00)</p><p class="end_state">所有页面中的部分文字、图片来源于网络（侵删）。</p></div></div></body>
</html>

三、CSS样式代码

/*全局控制*/
body {width: 2275px;height: 1240px;font-family: "汉仪南宫体";font-size: 12px;color: white;background-image: linear-gradient(to bottom right,#245c00, #b2de81, #fcfefe);
}@font-face {font-family: "微软雅黑";src: url(dqc.ttf);
}/*重置浏览器的默认样式*/
body,
p,
ul,
li,
h4.img {margin: 0;padding: 0;border: 0;list-style: none;
}/*导航通栏样式*/
.to1 {list-style-type: none;align-content: center;float: right;margin: 30px 100px 20px 0;
}.to2 {text-align: center;color: #ffffff;font-size: 30px;font-family: "微软雅黑";float: left;margin: 12px;align-content: center;
}.to3 {text-align: center;font-size: 40px;list-style-type: none;font-family: "微软雅黑";align-content: center;float: left;margin: 30px 0px 30px 100px;
}a:link,
a:visited,
a:active,
a:hover {color: #ffffff;text-decoration: none;
}/* banner通栏格式 */
.banner {width: 2180px;height: 838px;margin: 50px auto 15px auto;overflow: hidden;
}.left {width: 1646px;height: 838px;font-weight: bold;background: url(../img/banner图.jpg);position: relative;float: left;
}.content_left {position: absolute;top: 400px;right: 45px;text-align: right;
}.school_en {font-size: 60px;font-family: "arial black";
}.school_ch {font-size: 100px;font-family: "楷体";border-right: 5px solid #f90;padding-right: 10px;
}.advertise {margin-top: 20px;font-size: 40px;
}ul.style_a {margin-top: 25px;margin-left: 120px;list-style: none;overflow: hidden;
}ul.style_a li {float: left;margin-left: 10px;
}ul.style_a li a {background: #fff;width: 46px;height: 3px;text-align: center;line-height: 22px;display: block;font-size: 18px;opacity: 0.3;
}ul.style_a li.current a {opacity: 0.8;
}.right {width: 534px;height: 838px;background: rgba(3, 53, 54, 0.8);float: right;position: relative;
}.content_right {position: absolute;top: 50px;left: 30px;
}h4 {font-size: 28px;font-family: "微软雅黑";
}ul.style_icon {margin-top: 10px;
}ul.style_icon li {float: left;margin-right: 30px;
}.cl {font-size: 28px;margin-top: 80px;margin-right: 30px;line-height: 30px;
}/*首页登录样式*/
.main_login {width: 2180px;height: 700px;align-items: center;
}.login_page {margin: 100px 500px;width: 60%;align-items: center;
}.login_img {margin: 0 auto;width: 150px;height: 150px;border: 15px solid hsla(0, 0%, 100%, .2);-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;overflow: hidden;
}.login_1 {margin: 50px;
}.login_2 {width: 100px;height: 65px;align-items: center;align-self: center;
}.login_3 {width: 600px;height: 18px;text-align: center;align-self: center;padding: 20px 20px;font-size: 24px;line-height: 60px;font-family: 微软雅黑;display: inline;border-radius: 45px;color: #969696;
}.login_4 {width: 600px;height: 30px;font-size: 16px;
}h2 {font-size: 24px;font-family: 微软雅黑;color: #FFFFFF;text-align: center;
}h2 a:link,
a:visited,
a:active,
a:hover {color: #ffffff;text-decoration: none;
}.login {border: none;outline: none;width: 7rem;height: 3rem;border-radius: 5rem;background-color: #245c00;color: #FFFFFF;font-weight: bold;font-size: 1.25rem;transition: .5s;align-items: center;
}
.login_6 {width: 520px;height: 18px;text-align: center;align-self: center;padding: 20px 20px;font-size: 24px;line-height: 60px;font-family: 微软雅黑;display: inline;border-radius: 45px;color: #969696;
}
.login7 {border: none;outline: none;width: 3rem;height: 3rem;border: #000000 solid 1px;border-radius: 5rem;background-color: #245c00;color: #FFFFFF;font-weight: bold;font-size: 1.25rem;transition: .5s;align-items: center;
}
.login:hover {background-color: #2e4500;
}
.login7:hover {background-color: #2e4500;
}/* 首页简介样式 */
.start {width: 1450px;height: 540px;border-left: 5px solid #f90;border-right: 5px solid #245c00;margin: 50px 400px;
}.start_text {color: #FFFFFF;font-weight: bold;border: none;margin: 100px 100px;
}.start_table {width: 1550px;height: 400px;margin: 50px auto;align-self: center;
}.start_ul {list-style-type: none;overflow: hidden;margin: 20px 20px 0px 20px;align-content: center;
}.start_li {width: 250px;height: 250px;float: left;text-align: center;align-content: center;margin: 25px;
}.start_li img {width: 200px;height: 200px;
}.start_li2 {width: 250px;height: 40px;float: left;text-align: center;align-content: center;margin: 0px 25px 20px 25px;font-size: 40px;font-family: "微软雅黑";color: #245c00;
}.start_li3 {width: 250px;float: left;text-align: center;align-content: center;margin: 0px 25px 20px 25px;font-size: 25px;font-family: "微软雅黑";color: #245c00;
}.chatu {width: 1500px;height: 600px;align-self: center;margin: 200px 440px 100px 440px;
}.chatu img {width: 1400px;height: 600px;border-radius: 0.6em;
}/* 结尾通栏样式 */
.end {width: 100%;height: 450px;background-color: #fcfefe;margin: 50px auto;
}.end_left {width: 1200px;height: 300px;margin: 100px;align-content: center;float: left;
}.end_title {list-style-type: none;overflow: hidden;align-content: center;text-align: center;
}.end1 {font-size: 70px;color: #000000;text-align: center;
}.end2 {font-size: 30px;color: #000000;text-align: left;text-indent: 2em;margin: 50px;
}.end_right {width: 770px;height: 300px;margin: 100px 100px 100px 0px;font-size: 30px;color: #000000;float: right;text-align: left;
}.end_state {width: 770px;height: 50px;font-size: 15px;color: gray;text-align: center;margin: 80px;float: inline-end;
}

四、JavaScript脚本代码

/* 用户登录验证 */
function fn() {var flag = true;var myUserName = document.querySelectorAll("input")[0];var myPassWord = document.querySelectorAll("input")[1];if (myUserName.value == "1910034217") {if (myPassWord.value == "123123") {alert("正在登录...");return flag;} else {if (myPassWord.value == "") {flag = false;alert("请输入密码");return flag;} else {flag = false;alert("密码错误，请重新输入");return flag;}}} else {if (myUserName.value == "") {flag = false;alert("请输入用户名");return flag;} else {flag = false;alert("用户名错误，请重新输入！");return flag;}}
}