Commit b7fa154e by liuyingying

样式修改

parent 04413bf8
......@@ -16,7 +16,7 @@ ul li{
margin:0;
}
li a{
a{
color: black;
text-decoration: none;
}
......@@ -38,7 +38,6 @@ section{
section > .box{
width:100%;
height:100px;
border-bottom: solid 1px #e3e6e8;
}
nav>div{
width:100%;
......@@ -65,31 +64,36 @@ nav>div{
height:100%;
float: left;
}
#bar>ul{
#bar>.bottom{
display: block;
width:100%;
height:30px;
}
#bar>ul>li{
#bar>.bottom>a{
width:auto;
float: right;
margin-right:25px;
}
.bottom>li>a:hover{
.bottom>a:hover, .active{
font-size:20px;
color: #095009;
border-bottom:solid 5px #eeeeee;
border-bottom:solid 5px #c9eaca;
}
.top>a{
float: right;
}
.top>li>a:hover{
.top>a:hover{
font-size:16px;
color: #095009;
border-bottom:solid 3px #eeeeee;
}
#bar>.top{
height:20px;
font-size:14px;
margin-top:15px;
margin: 15px 25px 5px;
}
#bar>.top>li>a{
#bar>.top>a{
color:grey;
}
#bar>.bottom{
......@@ -116,6 +120,21 @@ nav>div{
/*border-top:solid 2px black;*/
/*border-bottom: solid 2px grey ;*/
}
.left-bar{
width: 100%;
height: 60px;
padding: 10px 15px;
background: #fbfbfb;
border-left: solid 5px #c1bdbd;
}
.left-bar>span{
height:40px;
line-height: 40px;
font-size:22px;
color:dimgrey;
font-weight: 400;
font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;;
}
.staff_tag{
width:100%;
height:40px;
......
......@@ -5,6 +5,7 @@
<title>hunter.index</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hunter/style.css' %}">
<script src="{% static 'hunter/jquery-1.9.1.min.js' %}"></script>
</head>
<body>
<nav>
......@@ -13,26 +14,22 @@
<span>HUNTER</span>
</div>
<div id="bar">
<ul class="top">
<li><a>登录</a></li>
</ul>
<ul class="bottom">
<li><a href="#article">文章随笔</a></li>
<li><a href="#cve">漏洞成果</a></li>
<li><a href="#project">项目研究</a></li>
<li><a href="#publish">出版物</a></li>
<li><a href="#">首页</a></li>
</ul>
<div class="top">
<a>登录</a>
</div>
<div class="bottom">
<a href="#article" class="main_bar">文章随笔</a>
<a href="#cve" class="main_bar">漏洞成果</a>
<a href="#project" class="main_bar">项目研究</a>
<a href="#publish" class="main_bar">出版物</a>
<a href="#" class="main_bar active">首页</a>
</div>
</div>
</div>
</nav>
<section id="home">
<div class="box"></div>
<div id="welcome">
<span>
| Welcome |
</span>
</div>
<div class="staff_tag">
<span>Academic STAFF</span>
<span>Engineer STAFF</span>
......@@ -53,13 +50,20 @@
<section id="project">
<div class="box"></div>
<div>
<div class="left-bar">
<span>
在研项目
</span>
</div>
</section>
<section id="publish">
<div class="box"></div>
<div class="left-bar">
<span>
出版物
</span>
</div>
<div class="wrap">
{% for year,publications in publication_year_list.items %}
<blockquote ><p>{{ year }}</p></blockquote>
......@@ -79,6 +83,11 @@
<section id="cve">
<div class="box"></div>
<div class="left-bar">
<span>
漏洞挖掘成果
</span>
</div>
<div class="wrap">
{% for year, cves in cve_year_list.items %}
<blockquote ><p>{{ year }}</p></blockquote>
......@@ -122,6 +131,20 @@
{% endif %}
</section>
<script>
var pre_clicked=4;
window.onload=function(){
$(".bottom>a").click(function(){
let i = $(".bottom>a").index(this);
click_bar(i);
});
};
function click_bar(index){
let a_list = document.getElementsByClassName("main_bar");
$(a_list[pre_clicked]).removeClass('active');
$(a_list[index]).addClass('active');
pre_clicked=index;
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment