今日工作
今天老师召集我们队伍所有同学进行了一次讨论会，主要交流了一下每个部分的发展情况。根据今天的讨论会以及讨论会后队伍内部的总结讨论，我们对整个项目的结构更加明确，也挖掘了一些细节点，比如说学生端历史记录的查询方式，注册的形式等等，这都是下一步将要进行完善的。
今天主要做的工作是重新构建了一下注册登录页面，之前做的模仿GitHub前端的界面不太适合这个网站主题，有点过于严肃，感觉应该更加美观一点。改进后的界面是模仿iOS系统的透明星空风格，登录注册按钮移到屏幕最上方，弹出模态框是透明的。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>YUN</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css" />-->
<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/less/modals.less" />
</head>
<style>
.row {
background-color: #95c4f94d;
margin: auto 10%;
border-width: 0 0 0 0;
box-shadow: #080a0ecc 0px 0px 20px 3px;
border-radius: 35px 35px 35px 35px;
}
/*a链接 在被选中和点击时 的字体颜色，粗度，大小*/
a {
color: #FFFFFFB3;
font-weight: bolder;
text-align: center;
font-size: 18px;
}
a:hover {
color: #FFFFFF;
text-decoration-line: none;
font-size: 16px;
}
a:hover,
a:focus {
color: #50ab9bcc;
}
/* body相关属性 */
*{
margin: 0;
padding: 0;
}
/*body {*/
/*!*background-image: url(../img/1.jpg);*!*/
/*no-repeat;*/
/*list-style: none;*/
/*!*去掉ui和li的 点*!*/
/*-webkit-background-size: cover;*/
/*-moz-background-size: cover;*/
/*-o-background-size: cover;*/
/*background-size: cover;*/
/*background-attachment: fixed;*/
/*background-position: center bottom;*/
/*color: #fff;*/
/*background-color: #333;*/
/*font-family: 'microsoft yahei', Arial, sans-serif;*/
/*}*/
#title {
width: auto;
text-align: center;
font-size: 140px;
margin-top: 200px;
transition: font-size 2s;
}
#title:hover {
font-size: 148px;
}
.aTopAndBottom {
height: auto;
text-align: center;
padding: 10px 0px;
min-width: 20px;
}
.netease_Player {
position: absolute;
display: none;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
color: #fff !important;
background-color: #fff0 !important;
font-size: 19px;
}
.dropup .dropdown-menu {
background-color: #fff0 !important;
text-decoration: none;
margin-bottom: 10px;
border: 0px;
border-radius: 16px 16px 0px 0px;
box-shadow: none;
margin-bottom: 14px;
}
.dropdown-menu>li>a {
color: #fff;
padding: 12px;
font-weight: bolder;
}
.navbar {
min-height: 46px;
}
/*登录框 最大宽度 与上边距 重构*/
.modal-dialog {
width: 350px;
margin: 60px auto;
}
/*登录框 背景颜色与透明度，边框线粗度，边框弧度，边框阴影 重写*/
.modal-content {
background-color: #afd2ff66;
border: 0px solid rgba(0, 0, 0, .2);
border-radius: 31px;
box-shadow: 0px 0px 40px 21px rgba(131, 151, 201, 0.5);
-webkit-box-shadow: 0px 0px 40px 21px rgba(131, 151, 201, 0.5);
box-shadow: 0px 0px 40px 21px rgba(131, 151, 201, 0.5);
}
/* 登录框位置重写 */
.modal-body {
position: relative;
padding: 10px 34px;
}
/*输入框 背景颜色与透明度重构*/
.form-control {
background-color: #fffc;
}
</style>
<body>
<!-- 顶部半透明容器 -->
<div class="navbar navbar-fixed-top row">
<div class="col-xs-1 aTopAndBottom ">
<a href=""><span class="glyphicon glyphicon-home "></span></a>
</div>
<!--登录按钮-->
<div class="col-xs-1 col-xs-offset-9 aTopAndBottom">
<a href="" data-toggle="modal" data-target="#login">
<span class="glyphicon glyphicon-log-in"></span>
<span id="loginText">登录</span>
</a>
</div>
<!--注册按钮-->
<div class="col-xs-1 aTopAndBottom">
<a href="" data-toggle="modal" data-target="#register">
<span class="glyphicon glyphicon-user"></span>
<span id="registText">注册</span>
</a>
</div>
</div>
<!-- 中部容器 -->
<div class="container">
<div class="main">
<h1 id="title">欢迎回来</h1>
<h2 id=""></h2>
</div>
</div>
具体效果如下图所示：
下一步展望
计划在这周五之前，将主页面和个人页面规划完，构建大体框架，将每一个模块的位置设置一下，简单美化一下，和后台进行交互。
1469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
