1, 主页,前端基本框架

zgl
何楚 6 years ago
parent c2cea81958
commit 08bf737f19

@ -1,7 +1,7 @@
body{
margin: 0px;
padding: 0px;
background-color: #efefef;
background-color: #dad0ce;
width: 100%;
height: 100%;
}
@ -14,7 +14,6 @@ ul{
}
.main{
position: relative;
height: 100%;
}
.top-bar{
width: 100%;
@ -60,7 +59,7 @@ ul{
background-color: white;
position: absolute;
top: 55px;
right: -20px;
right: -8px;
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 0px 0px 5px 5px;
box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.29);
@ -93,8 +92,6 @@ ul{
margin: 2px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 3px solid white;
}
.opt .img{
display: block;
@ -134,6 +131,7 @@ width: 35px;
width: 100px;
height: 800px;
background-color: #251d20;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
}
.nav-bar .a-process{
border: 1px solid rgba(255, 255, 255, 0.2);
@ -149,6 +147,7 @@ width: 35px;
background-color: rgba(255, 255, 255, 0.3);
}
.point-bar{
border-right:1px solid rgb(198, 34, 53);
width: 10px;
position: absolute;
left: 100px;
@ -158,12 +157,12 @@ width: 35px;
background-color: #cf4240;
transition: all 0.4s;
visibility: hidden;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.32);
}
.main2{
z-index: 2;
position: relative;
width: 1100px;
height: 1100px;
margin: 0px auto;
background-color: white;
}
@ -190,24 +189,27 @@ width: 35px;
font-size: 12px;
}
.update-frame{
border-top: 1px solid rgba(255,105,0,0);
width: 990px;
height: 1100px;
position: relative;
left: 110px;
height: 900px;
}
.scroll-ads{
height: 300px;
height: 320px;
width: 900px;
background-color: black;
background-color: #ffffff;
position: absolute;
margin: 20px 45px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.33);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.22);
}
.scroll-ads .scroll-ads-imgs .scroll-child{
display: inline-block;
width: 100%;
height: 100%;
height: 90%;
transition: all 0.4s;
}
.scroll-ads .scroll-ads-imgs{
@ -232,3 +234,89 @@ width: 35px;
font-size: 20px;
color: white;
}
.notice-frame{
margin:370px auto 0px 45px;
position: relative;
width: 800px;
height: 400px;
border:1px solid rgba(0, 0, 0, 0.32);
border-radius: 5px;
overflow: hidden;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.29);
}
.notice-frame .notice-frame-info{
color: white;
background-color: #c62e35;
width:200px;
height: 50px;
border-radius: 0px 0px 8px 0px;
text-align:center;
line-height: 40px;
font-size: 25px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.29);
}
.notice-frame .notice-cont{
overflow-y: scroll;
border:1px solid rgba(255, 255, 255, 0);
height: 340px;
width: 750px;
margin: 5px 30px;
}
.notice-child{
margin: 5px 0px;
width: 98%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}
.notice-child .notice-title{
border-left: 5px solid #c62e35;
line-height: 40px;
color: rgba(0, 0, 0, 0.91);
width: 100%;
height: 50px;
text-align: center;
}
.notice-child .notice-text{
color: rgba(0, 0, 0, 0.91);
width: 100%;
min-height: 100px;
text-align: left;
display: none;
transition-delay:0.3s;
background-color: #f3f3f3;
border-top: 1px solid rgba(0, 0, 0, 0.26);
}
.notice-child .notice-title:hover + .notice-text{
display: block;
}
.notice-child .notice-text:hover{
display: block;
}
.notice-choose{
width: 80px;
height: 200px;
position: absolute;
top: 370px;
right: 62px;
border: 1px solid rgba(255, 255, 255, 0);
}
.notice-choose .notice-class{
margin: 8px 0px;
width: 100%;
height: 50px;
color: white;
font-size: 18px;
line-height: 45px;
text-align: center;
background-color: #c62235;
border-radius: 0px 10px 10px 0px;
transition: all 0.3s;
}
.notice-choose .notice-class:hover{
width: 110%;
}

@ -1,11 +1,20 @@
ul{
padding: 0;
margin: 0;
}
.updated{
width: 100%;
height: 100%;
}
.personal-choose{
position: absolute;
top: 50px;
left: 15px;
top: 70px;
left: 128px;
height: 250px;
border-radius: 5px;
background-color: #f6f6f6;
border: 1px solid rgba(0, 0, 0, 0.28);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.23);
}
.personal-choose .nav-personal-choose{
margin: 0px;
@ -15,7 +24,7 @@
list-style: none;
border-radius: 5px 5px 0px 0px;
margin: 10px 0px;
color: rgba(0, 0, 0, 0.93);
color: rgba(0, 0, 0, 0.82);
width: 120px;
height: 30px;
border-bottom: 1px solid rgb(198, 68, 66);
@ -36,17 +45,38 @@
top: 70px;
left: 250px;
width: 600px;
border: 1px solid rgba(0, 0, 0, 0.27);
border-radius: 5px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.23);
}
.personal-msg-frame .personal-msg-part{
width: 550px;
width: 100%;
height: 50px;
margin: 30px 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.54);
margin: 20px 0px;
}
.personal-msg-frame .personal-msg-part:hover{
background-color: #e9e9e9;
}
.frame-info{
height: 60px;
border-bottom: 1px solid #c6333e;
}
.frame-info .info-text{
margin: 15px auto;
height: 40px;
color: white;
width: 150px;
background-color: #c6333e;
font-size: 20px;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
.personal-msg-frame .personal-msg-part .part-name{
width: 80px;
text-align: left;
text-align: right;
line-height: 35px;
padding-left: 40px;
color: rgba(0, 0, 0, 0.78);
float: left;
height: 100%;
@ -57,8 +87,10 @@
height: 100%;
float: left;
text-align: left;
color: rgba(0, 0, 0, 0.74);
line-height: 35px;
font-size: 15px;
font-size: 20px;
padding-left: 20px;
}
.updated .change-pw-frame{
display: none;
@ -66,21 +98,23 @@
top: 70px;
left: 250px;
width: 600px;
border: 1px solid rgba(0, 0, 0, 0.27);
border-radius: 5px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.23);
}
.change-pw-frame .pw-input-style{
padding: 0px 0px 0px 20px;
margin: 20px 100px;
margin: 20px 130px;
width:340px;
height: 40px;
border-radius: 5px;
left: 29px;
border:1px solid rgba(0, 0, 0, 0.37);
}
.change-pw-frame .pw-input-style:hover{
background-color: #f0f0f0;
}
.change-pw-frame .sm-input-style{
margin: 20px 120px;
margin: 20px 150px;
top: 280px;
width: 300px;
height: 40px;

@ -29,7 +29,7 @@
<div class="opt">
<img class="img" src="cssFile/images/opt.png">
<div class="opt-options">
<div class="opt-to-perm"><a class="update-to-perm" href="personal-setting.jsp">
<div class="opt-to-perm"><a class="update-to-perm" href="personal_setting.jsp">
个人信息</a></div>
<div class="to-logout"><a>退出登录</a></div>
</div>
@ -42,7 +42,7 @@
<div class="nav-bar">
<div class="point-bar"></div>
<div class="a-process personal-msg">
<a href="personal-setting.jsp" class="link-point personal-msg-page">
<a href="personal_setting.jsp" class="link-point personal-msg-page">
<div class="a-process-decoration personal-set">
<img src="cssFile/images/man.png">
<div class="nav-info">个人信息</div>
@ -58,7 +58,7 @@
</a>
</div>
<div class="a-process data-download">
<a href="#" class="link-point data-download-page">
<a href="get_time.jsp" class="link-point data-download-page">
</a>
</div>
@ -92,6 +92,32 @@
</li>
</ul>
</div>
<div class="notice-frame">
<div class="notice-frame-info">公告</div>
<div class="notice-cont">
<div class="notice-child">
<div class="notice-title">欢迎使用</div>
<div class="notice-text">欢迎使用GDMS</div>
</div>
<div class="notice-child">
<div class="notice-title">寒假通知</div>
<div class="notice-text">早点回去吧</div>
</div>
<div class="notice-child">
<div class="notice-title">开题截至日期</div>
<div class="notice-text">开题截至日期一月七号</div>
</div>
<div class="notice-child">
<div class="notice-title">评阅截至日期</div>
<div class="notice-text">评阅截至日期四月七号</div>
</div>
</div>
</div>
<div class="notice-choose">
<div class="notice-class">学校</div>
<div class="notice-class">老师</div>
<div class="notice-class">学院</div>
</div>
</div>
</div>
</div>

@ -42,18 +42,18 @@
<form method="post" action="#">
<input class="register-input-text sno-text" type="text" name="id"
placeholder="学号">
placeholder="学号或职工号">
<input class="register-input-text password-text" type="password" name="password"
placeholder="请输入密码">
<input class="register-input-text name-text" type="text" name="name"
placeholder="姓名">
<input class="register-input-text e-mail-text" type="text" name="e-mail"
placeholder="邮箱">
<input class="register-input-text phone-number" type="text" name="phone-number"
placeholder="请输入电话">
<input class="register-input-text password-text" type="password" name="password"
placeholder="请输入密码">
<input class="register-input-text check-password-text" type="password" name="password-check"
placeholder="请确认密码">
<input class="register-submit-style" type="submit" value="注册">
<input class="register-submit-style" type="button" value="注册">
</form>
</div>
<div class="bottom-bar"></div>

@ -23,21 +23,30 @@
<li class="choose-child pw">修改密码</li>
</ul>
</div>
<div class="personal-msg-frame">
<div class="personal-frame personal-msg-frame">
<div class="frame-info">
<div class="info-text">个人信息</div>
</div>
<div class="personal-msg-part">
<div class="part-name">id</div><div class="part-cont">未知</div>
</div>
<div class="personal-msg-part">
<div class="part-name">姓名</div><div class="part-cont"></div>
<div class="part-name">姓名</div><div class="part-cont">未知</div>
</div>
<div class="personal-msg-part">
<div class="part-name">id</div><div class="part-cont"></div>
<div class="part-name">年级</div><div class="part-cont">未知</div>
</div>
<div class="personal-msg-part">
<div class="part-name">邮箱</div><div class="part-cont"></div>
<div class="part-name">邮箱</div><div class="part-cont">未知</div>
</div>
<div class="personal-msg-part">
<div class="part-name">电话号码</div><div class="part-cont"></div>
<div class="part-name">电话号码</div><div class="part-cont">未知</div>
</div>
</div>
<div class="change-pw-frame">
<div class="personal-frame change-pw-frame">
<div class="frame-info">
<div class="info-text">修改密码</div>
</div>
<form method="post" action="#">
<input class="pw-input-style" type="password" name="oldPassword"
placeholder="请输入原始密码">

@ -1,4 +1 @@
function a(){
alert(123);
}
window.onload=a();

Loading…
Cancel
Save