1, 主页,前端基本框架

zgl
何楚 6 years ago
parent c2cea81958
commit 08bf737f19

@ -1,7 +1,7 @@
body{ body{
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-color: #efefef; background-color: #dad0ce;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -14,7 +14,6 @@ ul{
} }
.main{ .main{
position: relative; position: relative;
height: 100%;
} }
.top-bar{ .top-bar{
width: 100%; width: 100%;
@ -60,7 +59,7 @@ ul{
background-color: white; background-color: white;
position: absolute; position: absolute;
top: 55px; top: 55px;
right: -20px; right: -8px;
border: 1px solid rgba(0, 0, 0, 0.07); border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px;
box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.29); box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.29);
@ -93,8 +92,6 @@ ul{
margin: 2px; margin: 2px;
width: 45px; width: 45px;
height: 45px; height: 45px;
border-radius: 50%;
border: 3px solid white;
} }
.opt .img{ .opt .img{
display: block; display: block;
@ -134,6 +131,7 @@ width: 35px;
width: 100px; width: 100px;
height: 800px; height: 800px;
background-color: #251d20; background-color: #251d20;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
} }
.nav-bar .a-process{ .nav-bar .a-process{
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
@ -149,6 +147,7 @@ width: 35px;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
} }
.point-bar{ .point-bar{
border-right:1px solid rgb(198, 34, 53);
width: 10px; width: 10px;
position: absolute; position: absolute;
left: 100px; left: 100px;
@ -158,12 +157,12 @@ width: 35px;
background-color: #cf4240; background-color: #cf4240;
transition: all 0.4s; transition: all 0.4s;
visibility: hidden; visibility: hidden;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.32);
} }
.main2{ .main2{
z-index: 2; z-index: 2;
position: relative; position: relative;
width: 1100px; width: 1100px;
height: 1100px;
margin: 0px auto; margin: 0px auto;
background-color: white; background-color: white;
} }
@ -190,24 +189,27 @@ width: 35px;
font-size: 12px; font-size: 12px;
} }
.update-frame{ .update-frame{
border-top: 1px solid rgba(255,105,0,0);
width: 990px; width: 990px;
height: 1100px;
position: relative; position: relative;
left: 110px; left: 110px;
height: 900px;
} }
.scroll-ads{ .scroll-ads{
height: 300px; height: 320px;
width: 900px; width: 900px;
background-color: black; background-color: #ffffff;
position: absolute; position: absolute;
margin: 20px 45px; margin: 20px 45px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; 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{ .scroll-ads .scroll-ads-imgs .scroll-child{
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 100%; height: 90%;
transition: all 0.4s; transition: all 0.4s;
} }
.scroll-ads .scroll-ads-imgs{ .scroll-ads .scroll-ads-imgs{
@ -232,3 +234,89 @@ width: 35px;
font-size: 20px; font-size: 20px;
color: white; 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{ .updated{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.personal-choose{ .personal-choose{
position: absolute; position: absolute;
top: 50px; top: 70px;
left: 15px; 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{ .personal-choose .nav-personal-choose{
margin: 0px; margin: 0px;
@ -15,7 +24,7 @@
list-style: none; list-style: none;
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
margin: 10px 0px; margin: 10px 0px;
color: rgba(0, 0, 0, 0.93); color: rgba(0, 0, 0, 0.82);
width: 120px; width: 120px;
height: 30px; height: 30px;
border-bottom: 1px solid rgb(198, 68, 66); border-bottom: 1px solid rgb(198, 68, 66);
@ -36,17 +45,38 @@
top: 70px; top: 70px;
left: 250px; left: 250px;
width: 600px; 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{ .personal-msg-frame .personal-msg-part{
width: 550px; width: 100%;
height: 50px; height: 50px;
margin: 30px 0px; margin: 20px 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.54); }
.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{ .personal-msg-frame .personal-msg-part .part-name{
width: 80px; width: 80px;
text-align: left; text-align: right;
line-height: 35px; line-height: 35px;
padding-left: 40px;
color: rgba(0, 0, 0, 0.78); color: rgba(0, 0, 0, 0.78);
float: left; float: left;
height: 100%; height: 100%;
@ -57,8 +87,10 @@
height: 100%; height: 100%;
float: left; float: left;
text-align: left; text-align: left;
color: rgba(0, 0, 0, 0.74);
line-height: 35px; line-height: 35px;
font-size: 15px; font-size: 20px;
padding-left: 20px;
} }
.updated .change-pw-frame{ .updated .change-pw-frame{
display: none; display: none;
@ -66,21 +98,23 @@
top: 70px; top: 70px;
left: 250px; left: 250px;
width: 600px; 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{ .change-pw-frame .pw-input-style{
padding: 0px 0px 0px 20px; padding: 0px 0px 0px 20px;
margin: 20px 100px; margin: 20px 130px;
width:340px; width:340px;
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
left: 29px;
border:1px solid rgba(0, 0, 0, 0.37); border:1px solid rgba(0, 0, 0, 0.37);
} }
.change-pw-frame .pw-input-style:hover{ .change-pw-frame .pw-input-style:hover{
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.change-pw-frame .sm-input-style{ .change-pw-frame .sm-input-style{
margin: 20px 120px; margin: 20px 150px;
top: 280px; top: 280px;
width: 300px; width: 300px;
height: 40px; height: 40px;

@ -29,7 +29,7 @@
<div class="opt"> <div class="opt">
<img class="img" src="cssFile/images/opt.png"> <img class="img" src="cssFile/images/opt.png">
<div class="opt-options"> <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> 个人信息</a></div>
<div class="to-logout"><a>退出登录</a></div> <div class="to-logout"><a>退出登录</a></div>
</div> </div>
@ -42,7 +42,7 @@
<div class="nav-bar"> <div class="nav-bar">
<div class="point-bar"></div> <div class="point-bar"></div>
<div class="a-process personal-msg"> <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"> <div class="a-process-decoration personal-set">
<img src="cssFile/images/man.png"> <img src="cssFile/images/man.png">
<div class="nav-info">个人信息</div> <div class="nav-info">个人信息</div>
@ -58,7 +58,7 @@
</a> </a>
</div> </div>
<div class="a-process data-download"> <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> </a>
</div> </div>
@ -92,6 +92,32 @@
</li> </li>
</ul> </ul>
</div> </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> </div>
</div> </div>

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

@ -23,21 +23,30 @@
<li class="choose-child pw">修改密码</li> <li class="choose-child pw">修改密码</li>
</ul> </ul>
</div> </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="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="personal-msg-part"> <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>
<div class="personal-msg-part"> <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="personal-msg-part"> <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>
<div class="personal-frame change-pw-frame">
<div class="frame-info">
<div class="info-text">修改密码</div>
</div> </div>
<div class="change-pw-frame">
<form method="post" action="#"> <form method="post" action="#">
<input class="pw-input-style" type="password" name="oldPassword" <input class="pw-input-style" type="password" name="oldPassword"
placeholder="请输入原始密码"> placeholder="请输入原始密码">

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

Loading…
Cancel
Save