Team:NCTU Formosa/Test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!doctype html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<meta charset="utf-8">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>CSS3 Transition - 縮圖展示</title>
+
<title>無標題文件</title>
-
<!--[if IE]>
+
-
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+
-
<![endif]-->  
+
<style>
<style>
 +
table {
 +
  border: 0;
 +
  font-family: arial;
 +
 
 +
}
 +
table.sa  {
 +
  z-index: 2;
 +
  position:
 +
  absolute;
 +
  width:300px;
 +
  height:450px;
 +
  top:20px;
 +
  left:20px;
 +
  }
 +
  table.sb  {
 +
  z-index: 1;
 +
  position:
 +
  absolute;
 +
  width:300px;
 +
  height:450px;
 +
  top:20px;
 +
  left:20px;
 +
  }
 +
th {
 +
  background-color:yellow;
 +
  transition:All 1s ease;
 +
    -webkit-transition:All 1s ease;
 +
    -moz-transition:All 1s ease;
 +
    -o-transition:All 1s ease;
 +
    transform:  scale(1)  translate(10px);
 +
    -webkit-transform:  scale(1)  translate(10px);
 +
    -moz-transform:  scale(1)  translate(10px);
 +
    -o-transform:  scale(1)  translate(10px);
 +
    -ms-transform:  scale(1)  translate(10px);
 +
}
 +
th:hover { 
 +
transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
 +
    -webkit-transform: rotate3d(0,1,0,180deg) scale(0.02) skew(1deg) translate(0px);
 +
    -moz-transform: rotate3d(0,1,0,180deg) scale(0.02) skew(1deg) translate(0px);
 +
    -o-transform: rotate3d(0,1,0,180deg)) scale(0.02) skew(1deg) translate(0px);
 +
    -ms-transform: rotate3d(0,1,0,180deg) scale(0.02) skew(1deg) translate(0px);
 +
    }
 +
th.aa {
 +
background:#0C9 ;
 +
}
 +
th.ab{
 +
background:#30F ;
 +
}
 +
th.ac{
 +
background:#63F ;
 +
}
 +
th.ad{
 +
background:#F3C ;
 +
}
 +
th.ae {
 +
background:#0C9 ;
 +
}
 +
th.af{
 +
background:#30F ;
 +
}
 +
th.ag{
 +
background:#63F ;
 +
}
 +
th.ah{
 +
background:#F3C ;
 +
}
 +
th.ai {
 +
background:#0C9 ;
 +
}
 +
th.aj{
 +
background:#30F ;
 +
}
 +
th.ak{
 +
background:#63F ;
 +
}
 +
\
 +
 +
td {
 +
  border-bottom:1 solid #000000;
 +
}
 +
.fail {
 +
  color:#FF0000;
 +
}
 +
</style>
-
h1, body{ margin:0;}
 
-
a{ text-decoration:none; outline:0;}
 
-
img{ border:0;}
 
-
body{ letter-spacing:1px; font-family: "微軟正黑體", Arial, Helvetica, sans-serif; background:url(images/http://i.imgur.com/mWKftAX.jpg);}
 
-
.wrapper{ width:960px; margin:auto;}
 
-
header{ position:relative; height:160px;}
 
-
.logo a, nav{ position:absolute;}
 
-
.logo a{ display:block; width:300px; height:130px; background:url(images/http://i.imgur.com/MkGxmuh.png); right:0; text-indent:-9999px;}
 
-
footer{ color:#C30; text-align:center;}
 
-
.menu{ overflow:hidden; list-style:none; margin:0; padding:0;}
 
-
.menu li{ float:left;}
 
-
 
-
.menu a{
 
-
display:block; color:#FFF; font-weight:bold; padding:0 1em; line-height:135px; position:relative;}
 
-
 
-
.menu a span{
 
-
display:block; color:#F90; height:135px; background:#F60; width:100%; z-index:-1; position:absolute; top:-132px; left:0; opacity:.3;}
 
-
 
-
.menu a:hover{ color:#000; padding-top:20px; margin-bottom:-20px;}
 
-
.menu a:hover span{ top:0;}
 
-
 
-
.adv2{ text-align:center}
 
-
.adv2 a{
 
-
display:inline-block; margin:0 20px 40px; position:relative; background:#FFF; padding:7px; width:250px; height:156px; text-align:left; overflow:hidden;;}
 
-
.adv2 a:hover{ box-shadow:0 0 7px #000;}
 
-
.adv2 img{ position:absolute; z-index:1;}
 
-
.adv2 .borderAni{
 
-
display:block; position:absolute; background:#F90; top:-100%; left:-100%; width:100%; height:100%;}
 
-
.adv2 a:hover .borderAni{ top:0; left:0;}
 
-
 
-
.light{
 
-
display:block; position:absolute; background:#000; top:7px; left:7px; z-index:2; width:250px; height:156px; background:url(images/http://i.imgur.com/Y4GeQ7H.png);}
 
-
 
-
.icon{
 
-
display:block; position:absolute; width:100px; height:100px; background:url(images/http://i.imgur.com/qyKteJV.png); top:100%; left:100%; z-index:2;}
 
-
 
-
.adv2 a:hover .light{}
 
-
.adv2 a:hover .icon{ left:82px; top:35px;}
 
 +
   
 +
    }
</style>
</style>
</head>
</head>
-
 
-
 
-
 
<body>
<body>
-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
+
------
-
 
+
<table class=sa>
-
$(function(){
+
<tr>
-
$("div").css("color","red").width(100).text("E");
+
          <th  colspan="12" width="57" class=aa></th>
-
}):
+
       
-
 
+
        </tr>
-
 
+
         <tr>
-
<div class="wrapper">
+
          <th colspan="6" class=ab></th>
-
 
+
          <th colspan="6" class=ac></th>
-
 
+
        </tr>
-
    <article class="adv2">
+
         <tr>
-
         <a href="javascript:;"><img src="http://i.imgur.com/l1hnSvm.jpg" width="250" height="156"><span class="borderAni"></span><span class="light"></span><span class="icon"></span></a>
+
          <th colspan="4" class=ad></th>
-
         <a href="javascript:;"><img src="http://i.imgur.com/f05fPSt.jpg" width="250" height="156"><span class="borderAni"></span><span class="light"></span><span class="icon"></span></a>
+
            <th colspan="4" class=ae></th>
-
         <a href="javascript:;"><img src="http://i.imgur.com/jtTXkyv.jpg" width="250" height="156"><span class="borderAni"></span><span class="light"></span><span class="icon"></span></a>
+
          <th colspan="4" class=af></th>
-
        <a href="javascript:;"><img src="http://i.imgur.com/sKinGkJ.jpg" width="250" height="156"><span class="borderAni"></span><span class="light"></span><span class="icon"></span></a>
+
        </tr>
-
         <a href="javascript:;"><img src="http://i.imgur.com/VZxGX15.jpg" width="250" height="156"><span class="borderAni"></span><span class="light"></span><span class="icon"></span></a>
+
         <tr>
-
         <a href="javascript:;"><img src="http://i.imgur.com/jpLRFTB.jpg" width="250" height="156"><span class="borderAni"></span><span class="light"></span><span class="icon"></span></a>
+
          <th colspan="3" class=ag></th>
-
    </article>
+
          <th colspan="3" class=ah></th>
-
   
+
          <th colspan="3" class=ai></th>
-
    <footer>版權所有 © 2012 + DFUNS All Rights Reserved.</footer>
+
          <th colspan="3" class=aj></th>
-
</div>
+
 
 +
        </tr>
 +
  </table>
 +
 
 +
  ------
 +
<table width="126" class=sb>
 +
<tr>
 +
          <td  colspan="12" width="57" class=aa>Project</td>
 +
       
 +
        </tr>
 +
        <tr>
 +
          <td colspan="6" class=ab>Result</td>
 +
          <td colspan="6">MODELING</td>
 +
        </tr>
 +
         <tr>
 +
          <td colspan="4">BIOBRICK</td>
 +
            <td colspan="4">Human Practice</td>
 +
          <td colspan="4">Team</td>
 +
        </tr>
 +
         <tr>
 +
          <td colspan="3">Alice</td>
 +
          <td colspan="3">Notebook</td>
 +
          <td colspan="3">Safety</td>
 +
          <td colspan="3">Alice</td>
 +
 
 +
        </tr>
 +
  </table>
</body>
</body>
</html>
</html>

Revision as of 11:49, 4 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 無標題文件 } ------

------
Project
Result MODELING
BIOBRICK Human Practice Team
Alice Notebook Safety Alice

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/Test"