Difference between revisions of "Team:Scut-Champion-Park"

Line 1: Line 1:
−
@@ -1,52 +1,9 @@
 
 
<!DOCTYPE HTML>
 
<!DOCTYPE HTML>
 
<html lang='en'>
 
<html lang='en'>
Line 8: Line 7:
 
<title>iGEM - Champion Park</title>
 
<title>iGEM - Champion Park</title>
 
<link rel="stylesheet" type="text/css" href="css/index.css">
 
<link rel="stylesheet" type="text/css" href="css/index.css">
 +
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
 +
<script type="text/javascript">
 +
function setElementSize() { //动态设置各元素尺寸
 +
var doc_width = $(document).width();
 +
var header_width = doc_width * 0.4887;
 +
var footer_width = doc_width * 0.1541;
 +
 +
$(".banner").css('min-height', header_width); //设置header背景图片高度
 +
$(".footer").css('min-height', footer_width); //设置footer背景图片高度
 +
$(".container-decorator").css('margin-top', -(header_width-175)); //设置遮罩层高度
 +
$(".container-decorator-content ").css('height', $(".content-container").height()-206); //设置主遮罩层宽度
 +
$(".content-container").css('margin-top', -$(".container-decorator").height()); //设置main-container高度
 +
}
 +
 +
$(function($) {
 +
setElementSize();
 +
 +
/*  下拉菜单 */
 +
$(".menu-table td").bind("mouseover", function() {
 +
$(this).children(".menu-list").slideDown();
 +
});
 +
$(".menu-table td").bind("mouseleave", function() {
 +
$(this).children(".menu-list").slideUp();
 +
});
 +
 +
/* 菜单点击事件 */
 +
$(".menu-list li").bind('click', function() {
 +
$(".menu-tag").css('border-bottom', 'none'); //清除所有下划线
 +
$(this).parent().siblings('.menu-tag').css('border-bottom', '3px solid #a4e9f9'); //在对应父菜单条目下添加下划线
 +
 +
var li_obj = $(this);
 +
var url = './' + $(this).attr('url'); //获取页面url
 +
$.ajax({
 +
url: url,
 +
type: 'GET',
 +
success:  function(html){
 +
$(".content").html(html);
 +
}
 +
 +
})
 +
.done(function() {
 +
console.log("success");
 +
 +
})
 +
.fail(function() {
 +
console.log("error");
 +
})
 +
.always(function() {
 +
console.log("complete");
 +
});
 +
});
 +
});
 +
</script>
 
</head>
 
</head>
 
<body >
 
<body >
 
<div class="container">
 
<div class="container">
 
<div class="header">
 
<div class="header">
 +
<!-- <img src="./resources/igem_header_image.png" width="100%" height="100%"/> -->
 
<div class="banner">
 
<div class="banner">
−
<div class="login-bar">
 
−
<span class="login-span">
 
−
<a href="#">log in</a>
 
−
<span> | </span>
 
−
<a href="#">IGEM logo</a>
 
−
</span>
 
−
</div>
 
 
<div class="clear"> </div>
 
<div class="clear"> </div>
 
<div class="menu">
 
<div class="menu">
−
<table class="menu-table">
+
<div class="menu_left"></div>
−
<tbody>
+
<div class="menu_right">
−
<tr>
+
<div class="menu-bar">
−
<td style="width:60px"><a href="index.html"> HOME </a></td>
+
<table class="menu-table">
−
<td style="width:90px"><a href="#"> PROJECT </a></td>
+
<tbody>
−
<td style="width:115px"><a href="#"> ACHIEVEMENT </a></td>
+
<tr>
−
<td style="width:152px"><a href="#"> POCLICY &amp; PRACTIES </a></td>
+
<td style="width:60px">
−
<td style="width:86px"><a href="#"> TEAM </a></td>
+
<p class="menu-tag" href="#"> HOME </p>
−
<td style="width:139px"><a href="#"> SAFETY &amp; PROTOCOLS </a></td>
+
</ul>
−
</tr>
+
</td>
−
</tbody>
+
<td style="width:90px">
−
</table>
+
<p class="menu-tag"> PROJECT </p>
 +
<ul class="menu-list">
 +
<li> Over View </li>
 +
</ul>
 +
</td>
 +
<td style="width:115px">
 +
<p class="menu-tag"> ACHIEVEMENT </p>
 +
<ul class="menu-list">
 +
<li> Results </li>
 +
<li> Judging Form </li>
 +
<li> Financing </li>
 +
</ul>
 +
</td>
 +
<td style="width:152px">
 +
<p class="menu-tag"> POCLICY &amp; PRACTICES </p>
 +
<ul class="menu-list">
 +
<li> Over View </li>
 +
<li> Meet Ups </li>
 +
</ul>
 +
</td>
 +
<td style="width:86px">
 +
<p class="menu-tag"> TEAM </p>
 +
<ul class="menu-list">
 +
<li url="team_member.html"> Team Member </li>
 +
<li> Attributions </li>
 +
<li url="contact_us.html"> Contact Us </li>
 +
<li style="line-height:14px"> Offical</br>Team Profile </li>
 +
<li> Acknowledgement </li>
 +
</ul>
 +
</td>
 +
<td style="width:153px">
 +
<p class="menu-tag"> SAFETY &amp; PROTOCOLS </p>
 +
<ul class="menu-list">
 +
<li> Safety </li>
 +
<li> Protocols </li>
 +
</ul>
 +
</td>
 +
</tr>
 +
</tbody>
 +
</table>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<div class="igem_logo"></div>
 +
<div class="team_logo"></div>
 
<div class="clear"> </div>
 
<div class="clear"> </div>
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<!---        黑色遮罩层      -->
 +
<div class="container-decorator">
 +
<div class="container-decorator-shade"></div>
 +
<div class="container-decorator-content"></div>
 +
</div>
 +
<!---        黑色遮罩层      -->
 +
 
<div class="content-container">
 
<div class="content-container">
−
<div class="content">
+
<div class="main-container">
−
<div class="main-content">
+
<div class="content">
−
<p class="title"> Title 大标题 微软雅黑</p>
+
−
<p class="subtitle"> Subtitle 小标题 </p>
+
 
 
 
</div>
 
</div>
Line 48: Line 143:
 
</div>
 
</div>
 
<div class="footer">
 
<div class="footer">
 +
<div class="team_info">
 +
Team Email: scut-champion-park@hotmail.com <br/><br/>
 +
Address: School of Bioscience & Bioengineering <br/>
 +
South China University of Technology, Building B6 Guangzhou<br/>
 +
Higher Education Mega Centre, Panyu District,<br/>
 +
Guangzhou, China <br/>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
<body>
 
−
<h1>这是一个待开发的主页</h1>
 
−
<a href="igem.html" title="igem-2015" target="_blank"> IGEM 2015 </a>
 
 
</body>
 
</body>
 
</html>
 
</html>
−
\ No newline at end of file
 

Revision as of 01:43, 1 September 2015

<!DOCTYPE HTML> iGEM - Champion Park

Team Email: scut-champion-park@hotmail.com

Address: School of Bioscience & Bioengineering
South China University of Technology, Building B6 Guangzhou
Higher Education Mega Centre, Panyu District,
Guangzhou, China