"
Team:NCTU Formosa/Test
From 2014.igem.org
(Difference between revisions)
| Line 1: | Line 1: | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| + | <!doctype html> | ||
| + | <html> | ||
| + | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>CSS3 Transition - 縮圖展示</title> | <title>CSS3 Transition - 縮圖展示</title> | ||
| Line 13: | Line 9: | ||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | ||
<![endif]--> | <![endif]--> | ||
| - | < | + | |
| + | |||
| + | <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/bg.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/logo.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/light.png);} | ||
| + | |||
| + | .icon{ | ||
| + | display:block; position:absolute; width:100px; height:100px; background:url(images/icon.png); top:100%; left:100%; z-index:2;} | ||
| + | |||
| + | .adv2 a:hover .light{} | ||
| + | .adv2 a:hover .icon{ left:82px; top:35px;} | ||
| + | |||
| + | |||
| + | </style> | ||
</head> | </head> | ||
| Line 32: | Line 71: | ||
</div> | </div> | ||
</body> | </body> | ||
| - | + | </html> | |
| - | </ | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
Revision as of 09:20, 3 September 2014
<!doctype html>
