Commit b7fa154e by liuyingying

样式修改

parent 04413bf8
...@@ -16,7 +16,7 @@ ul li{ ...@@ -16,7 +16,7 @@ ul li{
margin:0; margin:0;
} }
li a{ a{
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
...@@ -38,7 +38,6 @@ section{ ...@@ -38,7 +38,6 @@ section{
section > .box{ section > .box{
width:100%; width:100%;
height:100px; height:100px;
border-bottom: solid 1px #e3e6e8;
} }
nav>div{ nav>div{
width:100%; width:100%;
...@@ -65,31 +64,36 @@ nav>div{ ...@@ -65,31 +64,36 @@ nav>div{
height:100%; height:100%;
float: left; float: left;
} }
#bar>ul{ #bar>.bottom{
display: block; display: block;
width:100%; width:100%;
height:30px; height:30px;
} }
#bar>ul>li{ #bar>.bottom>a{
width:auto; width:auto;
float: right; float: right;
margin-right:25px; margin-right:25px;
} }
.bottom>li>a:hover{ .bottom>a:hover, .active{
font-size:20px; font-size:20px;
color: #095009; 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; font-size:16px;
color: #095009; color: #095009;
border-bottom:solid 3px #eeeeee; border-bottom:solid 3px #eeeeee;
} }
#bar>.top{ #bar>.top{
height:20px;
font-size:14px; font-size:14px;
margin-top:15px; margin: 15px 25px 5px;
} }
#bar>.top>li>a{ #bar>.top>a{
color:grey; color:grey;
} }
#bar>.bottom{ #bar>.bottom{
...@@ -116,6 +120,21 @@ nav>div{ ...@@ -116,6 +120,21 @@ nav>div{
/*border-top:solid 2px black;*/ /*border-top:solid 2px black;*/
/*border-bottom: solid 2px grey ;*/ /*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{ .staff_tag{
width:100%; width:100%;
height:40px; height:40px;
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<title>hunter.index</title> <title>hunter.index</title>
{% load static %} {% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hunter/style.css' %}"> <link rel="stylesheet" type="text/css" href="{% static 'hunter/style.css' %}">
<script src="{% static 'hunter/jquery-1.9.1.min.js' %}"></script>
</head> </head>
<body> <body>
<nav> <nav>
...@@ -13,26 +14,22 @@ ...@@ -13,26 +14,22 @@
<span>HUNTER</span> <span>HUNTER</span>
</div> </div>
<div id="bar"> <div id="bar">
<ul class="top"> <div class="top">
<li><a>登录</a></li> <a>登录</a>
</ul> </div>
<ul class="bottom"> <div class="bottom">
<li><a href="#article">文章随笔</a></li> <a href="#article" class="main_bar">文章随笔</a>
<li><a href="#cve">漏洞成果</a></li> <a href="#cve" class="main_bar">漏洞成果</a>
<li><a href="#project">项目研究</a></li> <a href="#project" class="main_bar">项目研究</a>
<li><a href="#publish">出版物</a></li> <a href="#publish" class="main_bar">出版物</a>
<li><a href="#">首页</a></li> <a href="#" class="main_bar active">首页</a>
</ul> </div>
</div> </div>
</div> </div>
</nav> </nav>
<section id="home"> <section id="home">
<div class="box"></div> <div class="box"></div>
<div id="welcome">
<span>
| Welcome |
</span>
</div>
<div class="staff_tag"> <div class="staff_tag">
<span>Academic STAFF</span> <span>Academic STAFF</span>
<span>Engineer STAFF</span> <span>Engineer STAFF</span>
...@@ -53,13 +50,20 @@ ...@@ -53,13 +50,20 @@
<section id="project"> <section id="project">
<div class="box"></div> <div class="box"></div>
<div> <div class="left-bar">
<span>
在研项目
</span>
</div> </div>
</section> </section>
<section id="publish"> <section id="publish">
<div class="box"></div> <div class="box"></div>
<div class="left-bar">
<span>
出版物
</span>
</div>
<div class="wrap"> <div class="wrap">
{% for year,publications in publication_year_list.items %} {% for year,publications in publication_year_list.items %}
<blockquote ><p>{{ year }}</p></blockquote> <blockquote ><p>{{ year }}</p></blockquote>
...@@ -79,6 +83,11 @@ ...@@ -79,6 +83,11 @@
<section id="cve"> <section id="cve">
<div class="box"></div> <div class="box"></div>
<div class="left-bar">
<span>
漏洞挖掘成果
</span>
</div>
<div class="wrap"> <div class="wrap">
{% for year, cves in cve_year_list.items %} {% for year, cves in cve_year_list.items %}
<blockquote ><p>{{ year }}</p></blockquote> <blockquote ><p>{{ year }}</p></blockquote>
...@@ -122,6 +131,20 @@ ...@@ -122,6 +131,20 @@
{% endif %} {% endif %}
</section> </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> </body>
</html> </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