CSS/gifu/home
From 2014.igem.org
(Difference between revisions)
(93 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | / | + | <html> |
+ | <head> | ||
+ | <meta http-equiv="Content-Script-Type" content="text/javascript"> | ||
+ | <meta http-equiv="Content-Script-Type" content="text/css"> | ||
+ | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | ||
+ | <!--////// test | ||
+ | //// test--> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <style type="text/css"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | /*#home{background:url(https://static.igem.org/mediawiki/2014/f/f6/Circular_rna.png) fixed; | |
- | { | + | width:; |
- | + | background-position:center 80%; | |
- | + | background-repeat:no-repeat; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | */ | ||
+ | #uroboros { | ||
+ | position:relative; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | z-index:1; | ||
+ | } | ||
- | + | #boros { | |
- | { | + | width:595px; |
- | + | height:292px; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #base{ | |
- | { | + | position:relative; |
- | + | margin-top:auto; | |
- | + | margin-left:auto; | |
- | + | margin-right:auto; | |
- | + | height:700px; | |
- | + | width:900px; | |
- | + | z-index:100; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #ribosome{ |
- | { | + | width:120px; |
- | + | height:120px; | |
- | width: | + | |
- | height: | + | |
- | + | ||
} | } | ||
- | # | + | #rib{ |
- | { | + | font-size:35px; |
- | + | visibility:hidden; | |
- | + | color:white; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #stopme{ |
- | { | + | position:absolute; |
- | position: | + | top:180px; |
- | top: | + | left:280px; |
- | left: | + | z-index:900; |
- | + | visibility:visible; | |
- | + | } | |
- | + | ||
- | } | + | |
- | # | + | #point{ |
- | { | + | position:absolute; |
- | position: | + | top:200px; |
- | top: | + | left:450px; |
- | left: | + | transform: rotate(0 deg); |
- | + | z-index:1000; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #menu1 { | |
- | { | + | position:absolute; |
- | + | top:10px; | |
- | + | left:370px; | |
- | + | width:100px; | |
- | + | z-index:10000; | |
- | } | + | } |
- | + | #menu2 { | |
- | { | + | position:absolute; |
- | position: | + | top:160px; |
- | + | left:600px; | |
- | + | width:100px; | |
- | + | z-index:10000; | |
- | top: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | #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> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | </html> |
Latest revision as of 14:24, 17 October 2014