[前端]修改统一首页和oj_base中导航栏项目,添加首页登录,及登录状态区(这个使用css的float:right方式固定在右侧,可以动态响应窗口大小变化,只是与导航栏位置少不对称了.由于没有引入bootstraps所以没有使用与oj_base里相同的下拉菜单来显示用户登录后的选项

This commit is contained in:
esp
2015-08-29 16:49:07 +08:00
parent f6823d2867
commit a6c33bed36
3 changed files with 68 additions and 29 deletions

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

View File

@@ -8,64 +8,71 @@
<link rel="stylesheet" type="text/css" href="/static/css/fullpage/jquery.fullPage.css"> <link rel="stylesheet" type="text/css" href="/static/css/fullpage/jquery.fullPage.css">
<style> <style>
html, textarea, input, option, select, button { html, textarea, input, option, select, button {
font: 1em "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif; font: 1em "Helvetica Neue", Helvetica, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
color: #FFF; "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
color: #FFF;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #FFF; color: #FFF;
} }
#header { #header {
position: fixed; position: fixed;
height: 30px; height: 30px;
display: block; display: block;
width: 100%; width: 100%;
background: transparent; background: transparent;
z-index: 10; z-index: 10;
padding: 20px 20px 0 20px; padding: 20px 20px 0 20px;
} }
#name { #name {
font-size: 45px; font-size: 45px;
margin-right: 20px; margin-right: 20px;
} }
#nav-left{
display: inline;
position:relative;
float: right;
margin-right: 28px;
}
.section { .section {
position: relative; position: relative;
} }
.section h1 { .section h1 {
font-size: 60px; font-size: 60px;
} }
.section h3 { .section h3 {
font-size: 30px; font-size: 30px;
font-weight: normal; font-weight: normal;
} }
.bottom-pointer { .bottom-pointer {
top: auto; top: auto;
bottom: 20px; bottom: 20px;
position: absolute; position: absolute;
left: 48%; left: 48%;
} }
.index-section-text { .index-section-text {
position: absolute; position: absolute;
top: 30%; top: 30%;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.section-text { .section-text {
text-align: center; text-align: center;
} }
.icon { .icon {
max-height: 300px; max-height: 300px;
max-width: 300px; max-width: 300px;
} }
</style> </style>
@@ -84,13 +91,34 @@
loopBottom: true loopBottom: true
}); });
}); });
</script> </script>
</head> </head>
<body> <body>
<div id="header"> <div id="header">
<span id="name">qduoj</span> <span id="name">qduoj</span>
<a href="/problems/">题目</a>&nbsp;&nbsp;<a href="/contests/">比赛</a>&nbsp;&nbsp;<a href="#">小组</a> <a href="/problems/">题目</a>&nbsp;&nbsp;
<a href="/submissions/">提交</a>&nbsp;&nbsp;
<a href="/contests/">比赛</a>&nbsp;&nbsp;
<a href="/groups/">小组</a>&nbsp;&nbsp;
<a href="/about/">关于</a>&nbsp;&nbsp;
<div id="nav-left">
{% if request.user.is_authenticated %}
<a href="#">{{ request.user.username }}</a>
<a href="/logout/">退出</a>
{% else %}
<a href="/login/">
登录
</a>
<a href="/register/">
注册
</a>
{% endif %}
</div>
</div> </div>
<div id="fullpage"> <div id="fullpage">

View File

@@ -45,6 +45,7 @@
<li><a href="/problems/">题目</a></li> <li><a href="/problems/">题目</a></li>
<li><a href="/submissions/">提交</a></li> <li><a href="/submissions/">提交</a></li>
<li><a href="/contests/">比赛</a></li> <li><a href="/contests/">比赛</a></li>
<li><a href="/groups/">小组</a></li>
<li><a href="/about/">关于</a></li> <li><a href="/about/">关于</a></li>
</ul> </ul>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}