Difference between revisions of "Template:China Tongji Head"

Line 3: Line 3:
 
<head>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<title>主页</title>
 
  
 
<style type="text/css">
 
<style type="text/css">
  
 
body {
 
body {
 +
    width:100%;
 
margin: 0px;
 
margin: 0px;
 
background-color: #F0F0F0;
 
background-color: #F0F0F0;
Line 13: Line 13:
  
 
.head{
 
.head{
 +
position: fixed;
 +
    left:0px;
 +
top:18px;
 
width: 100%;
 
width: 100%;
 
height: 60px;
 
height: 60px;
−
background:url(../../images/transparent-nav-1.png);
+
background:url(https://static.igem.org/mediawiki/2015/8/8c/Team_China_Tongji-transparent-nav.png);
−
position: fixed;
+
−
top: 0px;
+
 
border-bottom: thin solid #CCC;
 
border-bottom: thin solid #CCC;
 
z-index:1000;
 
z-index:1000;
 
}
 
}
 
.head:hover{
 
.head:hover{
−
background-color: #F0F0F0;
+
background: #FFF;
 
}
 
}
 +
 
#navLogoLeft{
 
#navLogoLeft{
 
float:left;
 
float:left;
−
margin-left:10px;
+
margin-left:15px;
 
margin-right:20px;
 
margin-right:20px;
−
padding:5px;
+
 
 
}
 
}
 
#navLogoLeft img{
 
#navLogoLeft img{
Line 41: Line 43:
 
border:0px;
 
border:0px;
 
}
 
}
−
.navHead{
+
 
 +
.nav {
 
float:left;
 
float:left;
 
}
 
}
−
.navHead a{
+
.navFirstTitle{
 
line-height: 60px;
 
line-height: 60px;
 
text-decoration: none;
 
text-decoration: none;
−
padding: 12px;
+
padding: 10px 12px;
 
text-transform: uppercase;
 
text-transform: uppercase;
−
font-family: "Comic Sans MS", cursive;
+
font-family: "Comic Sans MS", cursive,Georgia;
 
font-size: 14px;
 
font-size: 14px;
 
}
 
}
−
.navHead a:hover{
+
.navFirstTitle:hover{
−
background:#999;
+
background-color:#CCC;
 
}
 
}
 +
 +
  
 
.bigName{
 
.bigName{
Line 62: Line 67:
 
background-repeat:repeat-x;
 
background-repeat:repeat-x;
 
z-index:2;
 
z-index:2;
−
margin-top:60px;
+
margin-top:78px;
 
}
 
}
 
.bigName h1{
 
.bigName h1{
Line 75: Line 80:
 
text-transform: uppercase;
 
text-transform: uppercase;
 
}
 
}
−
 
−
 
 
.content{
 
.content{
 
width:1000px;
 
width:1000px;
Line 84: Line 87:
 
background-color: #F0F0F0;
 
background-color: #F0F0F0;
 
}
 
}
−
 
  
  
Line 113: Line 115:
 
}
 
}
 
</style>
 
</style>
 +
 +
<script>
 +
 +
</script>
  
 
</head>
 
</head>
Line 118: Line 124:
 
<body>
 
<body>
  
 +
<!--head start-->
 
<div class="head">
 
<div class="head">
 
<div id="navLogoLeft">
 
<div id="navLogoLeft">
−
    <a href="https://igem.org/Team.cgi?year=2015&amp;team_name=China_Tongji">
+
        <a href="https://igem.org/Team.cgi?year=2015&amp;team_name=China_Tongji">
−
         <img src="../../images/China_Tongji-logo-left-1.png"/>
+
         <img src="https://static.igem.org/mediawiki/2015/9/9b/China_Tongji_team-logo-60px.png"/>
 
         </a>
 
         </a>
 
     </div>
 
     </div>
−
     <div class="navHead" align="center">
+
     <div class="nav">
−
     <tr align="center">
+
     <tr>
−
             <td><a href="https://2015.igem.org/Team:China_Tongji">Home</a></td>
+
             <td><a class="navFirstTitle" id="Home" href="https://2015.igem.org/Team:China_Tongji">Home</a></td>
−
             <td><a href="https://2015.igem.org/Team:China_Tongji/Project">Project</a></td>
+
             <td><a class="navFirstTitle" id="Project" href="https://2015.igem.org/Team:China_Tongji/Project">Project</a>
−
             <td><a href="https://2015.igem.org/Team:China_Tongji/Notebook">Notebook</a></td>
+
            </td>
−
             <td><a href="https://2015.igem.org/Team:China_Tongji/Achivement">Achivement</a></td>
+
             <td><a class="navFirstTitle" id="Notebook" href="https://2015.igem.org/Team:China_Tongji/Notebook">Notebook</a></td>
−
             <td><a href="https://2015.igem.org/Team:China_Tongji/Team">Team</a></td
+
             <td><a class="navFirstTitle" id="Achivement" href="https://2015.igem.org/Team:China_Tongji/Achivement">Achivement</a>
−
             ><td><a href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach</a></td
+
            </td>
−
             ><td><a href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></td>
+
             <td><a class="navFirstTitle" id="Team" href="https://2015.igem.org/Team:China_Tongji/Team">Team</a></td>
 +
             <td><a class="navFirstTitle" id="Outreach" href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach</a></td>
 +
             <td><a class="navFirstTitle" id="Safety" href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></td>
 
       </tr>
 
       </tr>
 
     </div>   
 
     </div>   
Line 142: Line 151:
 
</div>
 
</div>
  
 +
<!--content start-->
 
<div class="bigName">
 
<div class="bigName">
 
<h1 align="left">Project</h1>
 
<h1 align="left">Project</h1>
Line 155: Line 165:
 
</div>
 
</div>
  
 +
 +
<!--foot start-->
 
<div class="foot">
 
<div class="foot">
 
     <div class="navFoot" align="center">
 
     <div class="navFoot" align="center">
Line 164: Line 176:
 
             <td><a href="https://2015.igem.org/Team:China_Tongji/Team">Team</a></td><td>|</td>
 
             <td><a href="https://2015.igem.org/Team:China_Tongji/Team">Team</a></td><td>|</td>
 
             <td><a href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach</a></td><td>|</td>
 
             <td><a href="https://2015.igem.org/Team:China_Tongji/Outreach">Outreach</a></td><td>|</td>
−
             <td><a href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></td>
+
             <td><a href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a></td><td></td>
 
       </tr>
 
       </tr>
 
     </div>     
 
     </div>     
Line 170: Line 182:
 
</div>
 
</div>
  
 +
<!--当前页面指示-->
 +
<script defer="defer">
 +
var keyWord = location.href.substring(39);
 +
switch (keyWord)
 +
{
 +
  case "ome":
 +
document.getElementById("Home").style.color = "#F0F";
 +
break;
 +
  case "Project":
 +
document.getElementById("Project").style.color = "#F0F";
 +
break;
 +
  case "Notebook":
 +
document.getElementById("Notebook").style.color = "#F0F";
 +
break;
 +
  case "Achivement":
 +
document.getElementById("Achivement").style.color = "#F0F";
 +
break;
 +
  case "Team":
 +
document.getElementById("Team").style.color = "#F0F";
 +
break;
 +
  case "Outreach":
 +
document.getElementById("Outreach").style.color = "#F0F";
 +
break;
 +
  case "Safety":
 +
document.getElementById("Safety").style.color = "#F0F";
 +
break;
 +
}
 +
</script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 22:01, 16 July 2015

Home Project Notebook Achivement Team Outreach Safety

Project

首先是上面的菜单，最好可以像复旦这样可以随着滑动页面也跟着改动（复旦有一点问题是他们挡住了最上面的edit栏，都给移到了右边的Igem bar里面，这次应该不可以，第二个HZAU连接里面留住了edit 栏，可以参考这个），然后这一栏像他们一样可以点击的稍微大一点，醒目一点~ 然后我们也想要能在菜单左边有一块位置放我们的logo,这个刚刚画好，还没有最后定稿，大概是这风格，所以整体色调和色卡选择最好可以和Logo匹配~。就是各个大标题和大背景色可不可以是那种淡淡的暖黄色~。

其次我们想要像HZAU一样主页最上面是一个那种图栏，有几张图片（一张线虫一张合影等）可以切换。

最后就是复旦他们每点进去一个主题，左边会有一栏竖着的分主题list, 会随着网页看到哪里而改变显示的位置，（像上面图片上那样）这个我们比较想要加入到我们的那些分页面里~不知道可不可以实现？

 

中间内容测试内容！

 

 

 

中间内容测试内容！

 

 

 

中间内容测试内容！

 

 

 

Home| Project| Notebook| Achivement| Team| Outreach| Safety

Copyright © China_Tongji iGEM 2015 | Developer: LiJunWu