(Created page with " <div id="p_1" class="content"> <div class="row"> 具体内容 </div> </div> <div id="p_2" class="content"> <div class="row"> 具体内容 <...") |
|||
Line 1: | Line 1: | ||
+ | {{ShanghaitechChina}} | ||
+ | <html> | ||
+ | <style> | ||
+ | html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | font-size: 100%; | ||
+ | font: inherit; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | article, aside, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | html, body { | ||
+ | line-height: 1; | ||
+ | min-height:100%; font-size:18px; | ||
+ | /*font-family: 'Droid Sans', sans-serif;*/ | ||
+ | |||
+ | } | ||
+ | |||
+ | body { | ||
+ | background: #eeeeee; | ||
+ | background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%); | ||
+ | background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%); | ||
+ | background: -o-linear-gradient(top, #eeeeee, #cccccc 100%); | ||
+ | background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%); | ||
+ | background: linear-gradient(top, #eeeeee, #cccccc 100%); | ||
+ | background-attachment:fixed; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size:24px; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | h1 > small { | ||
+ | text-align:right; | ||
+ | display:inline-block; | ||
+ | font-size:.71em; | ||
+ | text-indent:15em; | ||
+ | color:#444; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color:inherit; | ||
+ | font-size:18px; | ||
+ | margin:2em 0 1em 0; | ||
+ | } | ||
+ | |||
+ | h2:first-child {margin-top:0;} | ||
+ | |||
+ | h3 { | ||
+ | color:#333; | ||
+ | font-size:1.41em; | ||
+ | margin:1em 0; | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | color:#444; | ||
+ | font-size:1.11em; | ||
+ | margin:1em 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | html, body { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | overflow-x:hidden; | ||
+ | } | ||
+ | |||
+ | .skrollable { | ||
+ | /* | ||
+ | * First-level skrollables are positioned relative to window | ||
+ | */ | ||
+ | position:fixed; | ||
+ | |||
+ | /* | ||
+ | * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable | ||
+ | */ | ||
+ | z-index:100; | ||
+ | } | ||
+ | |||
+ | .skrollr-mobile .skrollable { | ||
+ | /* | ||
+ | May cause issues on Android default browser (see #331 on GitHub). | ||
+ | */ | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | .skrollable .skrollable { | ||
+ | /* | ||
+ | * Second-level skrollables are positioned relative their parent skrollable | ||
+ | */ | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | .skrollable .skrollable .skrollable { | ||
+ | /* | ||
+ | * Third-level (and below) skrollables are positioned static | ||
+ | */ | ||
+ | position:static; | ||
+ | } | ||
+ | |||
+ | |||
+ | #progress { | ||
+ | height:4px; | ||
+ | background:#444; | ||
+ | bottom:0; | ||
+ | z-index:200; | ||
+ | } | ||
+ | |||
+ | #bg1, #bg2, #bg3, #bg4 { | ||
+ | z-index:50; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | background:url("https://static.igem.org/mediawiki/2016/1/12/Bubbles_back.png") repeat 0 0; | ||
+ | } | ||
+ | |||
+ | #bg2 { | ||
+ | z-index:49; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2016/f/fd/Bubbles2.png"); | ||
+ | } | ||
+ | |||
+ | #bg3 { | ||
+ | z-index:48; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2016/2/23/Bubbles3.png"); | ||
+ | } | ||
+ | #bg4 { | ||
+ | z-index:48; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2016/b/b3/Bubbles4.png"); | ||
+ | } | ||
+ | |||
+ | #intro { | ||
+ | width:80%; | ||
+ | left:50%; | ||
+ | top:1em; | ||
+ | margin-left:-40%; | ||
+ | padding:2em; | ||
+ | background:#fff; | ||
+ | text-align:center; | ||
+ | border-radius:1em; | ||
+ | |||
+ | -webkit-transform-origin:0 0; | ||
+ | -moz-transform-origin:0 0; | ||
+ | -ms-transform-origin:0 0; | ||
+ | -o-transform-origin:0 0; | ||
+ | transform-origin:0 0; | ||
+ | |||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | #intro .arrows { | ||
+ | font-size:2em; | ||
+ | color:#09f; | ||
+ | } | ||
+ | |||
+ | #transform { | ||
+ | width:70%; | ||
+ | left:50%; | ||
+ | top:20%; | ||
+ | margin-left:-35%; | ||
+ | text-align:center; | ||
+ | font-size:150%; | ||
+ | |||
+ | .transform-origin(50%, 50%); | ||
+ | } | ||
+ | |||
+ | #properties { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | padding-top:10%; | ||
+ | text-align:center; | ||
+ | |||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #end { | ||
+ | width:60%; | ||
+ | left:20%; | ||
+ | height:80%; | ||
+ | padding:3em; | ||
+ | border:0 solid #666; | ||
+ | text-align:center; | ||
+ | |||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | .content { | ||
+ | background-color: white; | ||
+ | border: 1px solid #cccccc; | ||
+ | border-radius: 10px; | ||
+ | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); | ||
+ | color: #3d3d3d; | ||
+ | font-family: Tahoma; | ||
+ | font-size: 14px; | ||
+ | margin-left: 5%; | ||
+ | margin-top: 50px; | ||
+ | padding: 15px 60px; | ||
+ | width: 80%; | ||
+ | } | ||
+ | #easing { | ||
+ | top:10%; | ||
+ | width:50%; | ||
+ | z-index:101; | ||
+ | } | ||
+ | |||
+ | .drop { | ||
+ | background:#09f; | ||
+ | font-weight:bold; | ||
+ | padding:1em; | ||
+ | } | ||
+ | #easing_wrapper { | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | </style> | ||
+ | <head class="no-skrollr"> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | ||
+ | <title>ShanghaiTech University</title> | ||
+ | <link rel="stylesheet" href="css/main2.css" /> | ||
+ | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | ||
+ | <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> | ||
+ | </head> | ||
<div id="p_1" class="content"> | <div id="p_1" class="content"> | ||
<div class="row"> | <div class="row"> |
Revision as of 10:44, 9 October 2016
具体内容
具体内容