Team:ZJU-China/sandbox

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
Line 168: Line 169:
}
}
button#showLeftPush:hover {
button#showLeftPush:hover {
-
background-color:
+
background-color: #09F;
-
background-color: #06F;
+
}
 +
button#showRightPush {
 +
border: none;
 +
display: block;
 +
width: 60px;
 +
height: 60px;
 +
background-image:url(images/edit_icon.png);
 +
cursor: pointer;
 +
position: absolute;
 +
margin-left: 280px;
 +
background-color: #102B66;
 +
}
 +
button#showRightPush:hover {
background-color: #09F;
background-color: #09F;
}
}
Line 176: Line 189:
width: 100%;
width: 100%;
height: 60px;
height: 60px;
 +
position: absolute;
 +
top: 0px;
}
}
#main-image {
#main-image {
Line 351: Line 366:
}
}
p:first-child {
p:first-child {
-
display: none;
+
display: inline;
}
}
#catlinks {
#catlinks {
Line 362: Line 377:
</style>
</style>
-
<link href="https://2013.igem.org/Team:ZJU-China/css/js-menu.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
+
<link href="https://2013.igem.org/Team:ZJU-China/css/js-menu.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
-
<link href="https://2013.igem.org/Team:ZJU-China/css/js-slider.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
+
<link href="https://2013.igem.org/Team:ZJU-China/css/js-slider.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:ZJU-China/css/spmenu_component.css?action=raw&ctype=text/css" />
+
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:ZJU-China/css/spmenu_component.css?action=raw&amp;ctype=text/css" />
-
<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/modernizr.custom.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/modernizr.custom.js?action=raw&amp;ctype=text/javascript"></script>
-
<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/classie.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/classie.js?action=raw&amp;ctype=text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/jquery.easing.1.3.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2013.igem.org/Team:ZJU-China/js/jquery.easing.1.3.js?action=raw&amp;ctype=text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$(function() {
Line 503: Line 518:
   <div id="header-nav-wrapper">
   <div id="header-nav-wrapper">
     <button id="showLeftPush" title="ZJU-China History"></button>
     <button id="showLeftPush" title="ZJU-China History"></button>
 +
    <button id="showRightPush" title="User Editing Menu"></button>
     <div id="logo-wrapper">
     <div id="logo-wrapper">
       <img src="images/ZJU_logo_header.png" alt="" name="logo" width="200" height="60" id="logo" />
       <img src="images/ZJU_logo_header.png" alt="" name="logo" width="200" height="60" id="logo" />
Line 661: Line 677:
     <h1>说明</h1>
     <h1>说明</h1>
     <p>顶部颜色：#102B66</p>
     <p>顶部颜色：#102B66</p>
-
     <p>底部颜色：#01164B</p>
+
     <p>底部颜色：#01164B</p>  
-
   
+
-
<button id="showRightPush">Show/Hide Right Push Menu</button>
+
-
<script>
+
-
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
+
-
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
+
-
showLeftPush = document.getElementById( 'showLeftPush' ),
+
-
showRightPush = document.getElementById( 'showRightPush' ),
+
-
body = document.body;
+
-
+
-
showLeftPush.onclick = function() {
+
-
classie.toggle( this, 'active' );
+
-
classie.toggle( body, 'cbp-spmenu-push-toright' );
+
-
classie.toggle( menuLeft, 'cbp-spmenu-open' );
+
-
disableOther( 'showLeftPush' );
+
-
};
+
-
showRightPush.onclick = function() {
+
-
classie.toggle( this, 'active' );
+
-
classie.toggle( body, 'cbp-spmenu-push-toleft' );
+
-
classie.toggle( menuRight, 'cbp-spmenu-open' );
+
-
disableOther( 'showRightPush' );
+
-
};
+
-
 
+
-
function disableOther( button ) {
+
-
if( button !== 'showLeftPush' ) {
+
-
classie.toggle( showLeftPush, 'disabled' );
+
-
}
+
-
if( button !== 'showRightPush' ) {
+
-
classie.toggle( showRightPush, 'disabled' );
+
-
}
+
-
}
+
-
</script>
+
-
   
+
     <h2>清除方法</h2>
     <h2>清除方法</h2>
     <p>由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 &lt;br class="clearfloat" /&gt; or &lt;div class="clearfloat"&gt;&lt;/div&gt;。这具有相同的清除效果。</p>
     <p>由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 &lt;br class="clearfloat" /&gt; or &lt;div class="clearfloat"&gt;&lt;/div&gt;。这具有相同的清除效果。</p>
Line 706: Line 690:
<!-- end .container --></div>
<!-- end .container --></div>
<div class="footer">
<div class="footer">
-
   <img src="images/ZJU-logo.png" width="235" height="68" alt="The logo of Zhejiang University" longdesc="http://www.zju.edu.cn/" />  <!-- end .footer --></div>
+
   <img src="images/ZJU-logo.png" width="235" height="68" alt="The logo of Zhejiang University" longdesc="http://www.zju.edu.cn/" />   
 +
<!-- end .footer -->
 +
</div>
 +
<!-- some javascript that need to load later -->
 +
<script>
 +
// move edit link to the push menu
 +
while ($("#menubar ul li:first").html() != null) {
 +
if ($("#menubar ul li:first").html() != "teams")
 +
$("#cbp-spmenu-s2").append($("#menubar ul li:first").html());
 +
$("#menubar ul li:first").remove();
 +
}
 +
// push menu javascript
 +
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
 +
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
 +
showLeftPush = document.getElementById( 'showLeftPush' ),
 +
showRightPush = document.getElementById( 'showRightPush' ),
 +
body = document.body;
 +
 +
showLeftPush.onclick = function() {
 +
classie.toggle( this, 'active' );
 +
classie.toggle( body, 'cbp-spmenu-push-toright' );
 +
classie.toggle( menuLeft, 'cbp-spmenu-open' );
 +
disableOther( 'showLeftPush' );
 +
};
 +
showRightPush.onclick = function() {
 +
classie.toggle( this, 'active' );
 +
classie.toggle( body, 'cbp-spmenu-push-toleft' );
 +
classie.toggle( menuRight, 'cbp-spmenu-open' );
 +
disableOther( 'showRightPush' );
 +
};
 +
 
 +
function disableOther( button ) {
 +
if( button !== 'showLeftPush' ) {
 +
classie.toggle( showLeftPush, 'disabled' );
 +
}
 +
if( button !== 'showRightPush' ) {
 +
classie.toggle( showRightPush, 'disabled' );
 +
}
 +
}
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 12:26, 22 August 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:ZJU-China

  • Welcome
    1.jpg
    Welcome to ZJU-China!
    We are from Hangzhou, China, a really beautiful place. Read more
  • Ghost Sensor
    2.jpg
    Ghost Sensor
    We use bi-aptamer to detect large molecules such as protein. Read more
  • Atrazine
    3.jpg
    Atrazine Destoryer
    We want to detect and destroy a small molecule called atrazine, which is an herbicide that can cause flu-like symptoms when it contaminates drinking water. Read more
  • Standardization
    4.jpg
    Standardization
    We also want to standardize some artificial-built riboswitches which are evolved from in vitro selected aptamers. Read more
  • Human Practice
    5.jpg
    Human Practice
    Some activities and communciations. Read more

以上链接说明了一种基本导航结构，该结构使用以 CSS 设置样式的无序列表。请以此作为起点修改属性，以生成您自己的独特外观。如果需要弹出菜单，请使用 Spry 菜单、Adobe Exchange 中的菜单构件 或其它各种 javascript 或 CSS 解决方案创建您自己的菜单。

如果您想要在顶部进行导航，只需将 ul.nav 移到页面顶部并重新创建样式即可。

说明

顶部颜色：#102B66

底部颜色：#01164B

清除方法

由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 <br class="clearfloat" /> or <div class="clearfloat"></div>。这具有相同的清除效果。

徽标替换

此布局的 .header 中使用了图像占位符，您可能希望在其中放置徽标。建议您删除此占位符，并将其替换为您自己的链接徽标。

请注意，如果您使用属性检查器导航到使用 SRC 字段的徽标图像（而不是删除并替换占位符），则应删除内嵌背景和显示属性。这些内嵌样式仅用于在浏览器中出于演示目的而显示徽标占位符。

要删除内嵌样式，请确保将 CSS 样式面板设置为“当前”。选择图像，然后在“CSS 样式”面板的“属性”窗格中右键单击并删除显示和背景属性。（当然，您始终可以直接访问代码，并在其中删除图像或占位符的内嵌样式。）

背景

本质上，任何 div 中的背景颜色将仅显示与内容一样的长度。这意味着，如果要使用背景颜色或边框创建侧面列的外观，将不会一直扩展到脚注，而是在内容结束时停止。如果 .content div 将始终包含更多内容，则可以在 .content div 中放置一个边框将其与列分开。

The logo of Zhejiang University

Retrieved from "http://2013.igem.org/Team:ZJU-China/sandbox"