CSS/gifu/home
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Script-Type" content="text/css"> <script src="http://ajax.googleapis.com...") |
|||
(128 intermediate revisions not shown) | |||
Line 3: | Line 3: | ||
<meta http-equiv="Content-Script-Type" content="text/javascript"> | <meta http-equiv="Content-Script-Type" content="text/javascript"> | ||
<meta http-equiv="Content-Script-Type" content="text/css"> | <meta http-equiv="Content-Script-Type" content="text/css"> | ||
- | <script src=" | + | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
- | </ | + | <!--////// test |
+ | |||
+ | |||
+ | |||
+ | |||
+ | //// test--> | ||
+ | |||
+ | |||
+ | |||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
Line 14: | Line 23: | ||
} | } | ||
*/ | */ | ||
+ | |||
+ | #uroboros { | ||
+ | position:relative; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | #boros { | ||
+ | width:595px; | ||
+ | height:292px; | ||
+ | } | ||
#base{ | #base{ | ||
position:relative; | position:relative; | ||
- | top: | + | margin-top:auto; |
margin-left:auto; | margin-left:auto; | ||
margin-right:auto; | margin-right:auto; | ||
- | width: | + | height:700px; |
- | z-index: | + | width:900px; |
+ | z-index:100; | ||
} | } | ||
+ | |||
+ | #ribosome{ | ||
+ | width:120px; | ||
+ | height:120px; | ||
+ | } | ||
+ | |||
+ | #rib{ | ||
+ | font-size:35px; | ||
+ | visibility:hidden; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | #stopme{ | ||
+ | position:absolute; | ||
+ | top:180px; | ||
+ | left:280px; | ||
+ | z-index:900; | ||
+ | visibility:visible; | ||
+ | } | ||
#point{ | #point{ | ||
position:absolute; | position:absolute; | ||
top:200px; | top:200px; | ||
- | left: | + | left:450px; |
transform: rotate(0 deg); | transform: rotate(0 deg); | ||
z-index:1000; | z-index:1000; | ||
- | + | } | |
+ | #menu1 { | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | left:370px; | ||
+ | width:100px; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | #menu2 { | ||
+ | position:absolute; | ||
+ | top:160px; | ||
+ | left:600px; | ||
+ | width:100px; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | #menu3 { | ||
+ | position:absolute; | ||
+ | top:410px; | ||
+ | left:520px; | ||
+ | width:100px; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | #menu4 { | ||
+ | position:absolute; | ||
+ | top:410px; | ||
+ | left:240px; | ||
+ | width:100px; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | #menu5 { | ||
+ | position:absolute; | ||
+ | top:160px; | ||
+ | left:160px; | ||
+ | width:120px; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | #fukidasi1{ | ||
+ | position:absolute; | ||
+ | top:40px; | ||
+ | left:245px; | ||
+ | z-index:20000; | ||
+ | visibility:hidden; | ||
+ | width:400px; | ||
+ | height:400px; | ||
+ | } | ||
+ | |||
+ | #fukidasi2{ | ||
+ | position:absolute; | ||
+ | top:140px; | ||
+ | left:320px; | ||
+ | z-index:20000; | ||
+ | visibility:hidden; | ||
+ | } | ||
+ | |||
+ | #fukidasi3{ | ||
+ | position:absolute; | ||
+ | top:130px; | ||
+ | left:330px; | ||
+ | z-index:20000; | ||
+ | visibility:hidden; | ||
+ | } | ||
+ | |||
+ | #fukidasi4{ | ||
+ | position:absolute; | ||
+ | top:100px; | ||
+ | left:300px; | ||
+ | z-index:20000; | ||
+ | visibility:hidden; | ||
+ | } | ||
+ | |||
+ | #fukidasi5{ | ||
+ | position:absolute; | ||
+ | top:150px; | ||
+ | left:290px; | ||
+ | z-index:20000; | ||
+ | visibility:hidden; | ||
+ | } | ||
+ | |||
+ | .tabs { | ||
+ | position: relative; | ||
+ | padding: 0; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | |||
+ | } | ||
+ | .tabs li { | ||
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .tabs input[type=radio] { | ||
+ | display: none; | ||
+ | } | ||
+ | .tabs label { | ||
+ | display: block; | ||
+ | cursor: pointer; | ||
+ | padding: 5px; | ||
+ | line-height: 20px; | ||
+ | background-color: #dcdcdc; | ||
+ | color: #000000; | ||
+ | margin:0; | ||
+ | } | ||
+ | .tabs label:hover { | ||
+ | background-color: #e0ffff; | ||
+ | color: #000000; | ||
+ | } | ||
+ | .tabs input[type=radio]:checked + label { | ||
+ | background-color: #afeeee; | ||
+ | color: #000000; | ||
+ | } | ||
+ | .tabs .contents { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top:30px; | ||
+ | left: 0; | ||
+ | padding: 0px; | ||
+ | background: #f0f8ff; | ||
+ | } | ||
+ | .tabs input[type=radio]:checked + label + .contents{ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #kouzityuu { | ||
+ | font-size:500%; | ||
+ | color:white; | ||
+ | } | ||
</style> | </style> | ||
</style> | </style> | ||
</head> | </head> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</html> | </html> |
Latest revision as of 14:24, 17 October 2014