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

目录

一、简要说明

二、登录页核心代码

三、CSS样式代码

四、JavaScript脚本代码

五、页面效果截图

 六、我的心得

一、简要说明

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

本程序实现的大致功能：

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

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

二、登录页核心代码

TODOLIST | 我欲摘星斗
首页
番茄钟
备忘录
纪念日
日记本
关于我
ToDoList
我欲摘星斗
来日纵是千千晚星，亮过今晚月亮
今晚的月光会记得你眼睛里的海和你心里的帆船
禁止摸鱼，快去学习！
INTRODUCTION
忘记密码
立即注册
TODOLIST | 我欲摘星斗
由xxx设计推出，让每一个有自律愿望的用户能够养成自律的习惯，奠定实现梦想的基础。
联系我们
邮箱：3xxx@qq.com
电话：18811012138(工作日周一至周五：8:30-11:30，13:00-17:00)
所有页面中的部分文字、图片来源于网络（侵删）。

三、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;}}
}

五、页面效果截图

 六、我的心得

这辈子没想过选了文科还要上理科的课，但是比Python爬虫有意思多了，希望再也不需要见到这个大数据学院的老师，信女愿戒掉猪肉以祈求与jing老师在课表安排上此生不复相见。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！