Line 5: | Line 5: | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | *{ padding:0; margin:0; font:13px/1.5em Arial, Helvetica, sans-serif;} | |
− | + | ||
− | + | ||
− | } | + | |
− | + | .mask{ height:190px; overflow:hidden; float:left; margin:0 0 0 0; width:25%;} | |
− | + | .boxWrap{ | |
− | + | width: 345px; | |
− | + | -moz-transition:margin-top .5s ease-out; | |
− | + | -webkit-transition:margin-top .5s ease-out; | |
− | + | -o-transition:margin-top .5s ease-out; | |
− | + | -ms-transition:margin-top .5s ease-out; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | width: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | .boxWrap:hover{ margin-top:-189px;} | ||
+ | .boxWrap h1{ font-size:17px; color:#000;} | ||
+ | .box1, .box2{ background-color:#EEE; color:#666; height:190px;} | ||
+ | .box2{ margin-top: -1px; position:relative;} | ||
+ | .box2 p{ margin-bottom:.5em;} | ||
</style> | </style> | ||
<body> | <body> | ||
− | |||
− | |||
<div> | <div> | ||
− | <img src="https://static.igem.org/mediawiki/2016/1/17/27yang-1.jpg" width="100%"> | + | <img src="https://static.igem.org/mediawiki/2016/1/17/27yang-1.jpg" width="100%" > |
</div> | </div> | ||
− | |||
− | |||
− | <div | + | <div class="mask"> |
− | + | <div class="boxWrap"> | |
− | <div | + | <div class="box1"> |
+ | <img src="https://static.igem.org/mediawiki/2016/5/50/OVERVIEW%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" height="100%" /> | ||
+ | <h1>OVERVIEW</h1> | ||
+ | </div> | ||
+ | <div class="box2"> | ||
+ | <h1>OVERVIEW</h1> | ||
+ | <p>農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="mask"> | ||
+ | <div class="boxWrap"> | ||
+ | <div class="box1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/7/7f/PART%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" height="100%" /> | ||
+ | <h1>Photoshop</h1> | ||
+ | </div> | ||
+ | <div class="box2"> | ||
+ | <h1>Photoshop</h1> | ||
+ | <p>農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="mask"> | ||
+ | <div class="boxWrap"> | ||
+ | <div class="box1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/a/aa/PROTOTYPE%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.jpg" width="100%" height="100%" /> | ||
+ | <h1>ActionScript 3.0</h1> | ||
+ | </div> | ||
+ | <div class="box2"> | ||
+ | <h1>ActionScript 3.0</h1> | ||
+ | <p>農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="mask"> | ||
+ | <div class="boxWrap"> | ||
+ | <div class="box1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/7/73/PRACTICE%28%E9%A0%90%E5%82%99%E5%9C%96%E7%89%87%29.png" width="100%" height="100%" /> | ||
+ | <h1>Android APP</h1> | ||
+ | </div> | ||
+ | <div class="box2"> | ||
+ | <h1>Android APP</h1> | ||
+ | <p>農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起</p> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
</body> | </body> | ||
Revision as of 22:50, 26 July 2016
OVERVIEW
OVERVIEW
農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起
Photoshop
Photoshop
農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起
ActionScript 3.0
ActionScript 3.0
農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起
Android APP
Android APP
農業經濟損失,科學家研究基改真菌,我們要把兩者連接在一起