这本次更新的主要内容是修复了一些前后端之间链接跳转的问题,同时做出了账户设置的布局:
点击下方的叉叉之后可以回到原先画面。
代码部分如下,设置部分用了一个网页框架来包含。
<div class="setting-box w h pa none" id="setting">
<div class="setting pa">
<span class="pa ns" id="qSet">×</span>
<iframe class="w h pa none" id="login" src="userset.html" frameborder="0" scrolling="no" style="z-index:300;"></iframe>
</div>
</div>
css:
div.setting-box {
z-index: 299;
background-color: rgba(0,0,0,.7);
}
div.setting {
left: 50%;
top: 50%;
height: 680px;
width: 500px;
border-radius: 10px;
margin: -350px 0 0 -250px;
background-color: #DEE1E2;
}
div.setting>span {
height: 40px;
width: 40px;
line-height: 38px;
text-align: center;
color: #DEE1E2;
font-family: sans-serif;
font-size: 35px;
font-weight: 100;
background-color: rgba(0,0,0,0);
border: solid 2px #DEE1E2;
left: 50%;
margin-left: -20px;
bottom: -50px;
border-radius: 25px;
cursor: pointer;
}
之后搭建了我的团队页面的框架:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myteam</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="my-team-box w h">
<div class="my-team h">
<iframe src="myteam.html" frameborder="0" class="w h"></iframe>
</div>
<div class="my-teams h">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div >
+添加团队
</div>
</div>
</div>
</body>
</html>
css:
div.my-team-box {
overflow: hidden;
}
div.my-team {
width: 70%;
float: left;
margin: 0 0 0 5%;
overflow: hidden;
background-color: #999;
}
div.my-team>iframe {
overflow: hidden;
background-color: #DEE1E2;
}
div.my-teams {
width: 20%;
float: right;
overflow-y: scroll;
overflow-x: hidden;
border-left: #999 5px;
border-left-style: double;
}
div.my-teams>ul>li {
height: 300px;
background-color: #999;
margin: 10px;
transition: box-shadow 0.2s;
cursor: pointer;
}
div.my-teams>ul>li:hover {
box-shadow: 0 0 10px #999;
}
div.my-teams>div {
height: 70px;
margin: 10px;
color: #333;
line-height: 70px;
font-family: robot;
font-size: 25px;
text-align: center;
border: solid #999 2px;
transition: box-shadow 0.2s;
cursor: pointer;
background-color: #ccc;
}
div.my-teams>div:hover {
box-shadow: 0 0 10px #999;
}