Team:KIT-Kyoto/Team
From 2012.igem.org
(Difference between revisions)
m (Replaced content with "{{KIT-Kyoto}} {{KIT-Kyoto.Header}} <html> </html>") |
m |
||
Line 2: | Line 2: | ||
{{KIT-Kyoto.Header}} | {{KIT-Kyoto.Header}} | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | /* 段組み*/ | ||
+ | #my_body{margin:0 auto; width:1000px;border-left:1px solid #fff;border-right:1px solid #fff;} | ||
+ | #my_navigation{float:left; width:190px; padding-left:10px; background-color:#eebbcb; padding-top:50px;} | ||
+ | #my_contents{float:left; width:790px; background-color:#eebbcb; padding-left:10px; padding-top:10px;} | ||
+ | |||
+ | /*ボックス*/ | ||
+ | li{list-style:none;} | ||
+ | div.box1 { | ||
+ | width: 730px; /* ボックスの幅 */ | ||
+ | height: 200px; | ||
+ | background-color:#FFFFFF; /* ボックスの背景色 */ | ||
+ | border: 0px #999999 solid; /* ボックスの枠の太さと色 */ | ||
+ | font-size: 90%; /* ボックス内の文字サイズを少し小さく指定 */ | ||
+ | margin-bottom:20px;/*ボックスの下に少しスペースを空ける*/ | ||
+ | } | ||
+ | div.box1 p { | ||
+ | margin-top: 15px;/*文字の上に少しスペースを空ける*/ | ||
+ | margin-left: 10px;/*文字の左に少しスペースを空ける*/ | ||
+ | } | ||
+ | .box1 p img{ | ||
+ | float:left;/*文字が写真の右側に回り込むように指定*/ | ||
+ | margin-top:10px; | ||
+ | margin-left:15px;/*写真の左にスペース*/ | ||
+ | margin-right:30px; /*写真の右にスペース*/ | ||
+ | border:solid 0px | ||
+ | } | ||
+ | /*ボックス2の設定*/ | ||
+ | div.box2 { | ||
+ | width: 730px; /* ボックスの幅 */ | ||
+ | height: 200px; | ||
+ | background-color:#FFFFFF; /* ボックスの背景色 */ | ||
+ | border: 0px #999999 solid; /* ボックスの枠の太さと色 */ | ||
+ | font-size: 90%; /* ボックス内の文字サイズを少し小さく指定 */ | ||
+ | margin-bottom:20px;/*ボックスの下に少しスペースを空ける*/ | ||
+ | } | ||
+ | div.box2 p { | ||
+ | margin-top: 15px;/*文字の上に少しスペースを空ける*/ | ||
+ | margin-left: 25px;/*文字の左に少しスペースを空ける*/ | ||
+ | } | ||
+ | .box2 p img{ | ||
+ | float:right;/*文字が写真の右側に回り込むように指定*/ | ||
+ | margin-top:10px; | ||
+ | margin-left:15px;/*写真の左にスペース*/ | ||
+ | margin-right:30px; /*写真の右にスペース*/ | ||
+ | border:solid 0px | ||
+ | } | ||
+ | div.box3 { | ||
+ | width: 730px; /* ボックスの幅 */ | ||
+ | height: 200px; | ||
+ | background-color:#FFFFFF; /* ボックスの背景色 */ | ||
+ | border: 0px #999999 solid; /* ボックスの枠の太さと色 */ | ||
+ | font-size: 90%; /* ボックス内の文字サイズを少し小さく指定 */ | ||
+ | margin-bottom:20px;/*ボックスの下に少しスペースを空ける*/ | ||
+ | } | ||
+ | div.box3 p { | ||
+ | margin-top: 15px;/*文字の上に少しスペースを空ける*/ | ||
+ | margin-left: 10px;/*文字の左に少しスペースを空ける*/ | ||
+ | } | ||
+ | .box3 p img{ | ||
+ | float:left;/*文字が写真の右側に回り込むように指定*/ | ||
+ | margin-top:10px; | ||
+ | margin-left:15px;/*写真の左にスペース*/ | ||
+ | margin-right:30px; /*写真の右にスペース*/ | ||
+ | border:solid 0px | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <!--段組み--!> | ||
+ | <body> | ||
+ | <div id="my_body"> | ||
+ | <div id="my_navigation"> | ||
+ | <div id="mynavi"> | ||
+ | <ul>KIT-Kyoto2012 | ||
+ | <a href="#Takaaki"><li>Takaaki TAKEDA</li></a> | ||
+ | <a href="#Shunji"><li>Shunji MATSUZAKI</li></a> | ||
+ | <a href="#Yu"><li>Yu TANAKA</li></a> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div id="my_contents"> | ||
+ | <div id="mymain"> | ||
+ | <font size="6">idea note</font> | ||
+ | スクラップみたいにしてみる???? | ||
+ | <div class="contents"><h2>PROFILE</h2> | ||
+ | <p></p></div> | ||
+ | <div id ="Takaaki" class="box1"> | ||
+ | <p><img src="img/img1.jpg" title="TAKAAKI" width="150" height="150" class="css-hover" /></p> | ||
+ | <p><font size="4">Takaaki Takeda</font></p> | ||
+ | <p>detail<br /> | ||
+ | <br /> | ||
+ | </p> | ||
+ | </div> | ||
+ | <div id="Shunji" class="box2"> | ||
+ | <p><img src="img/img1.jpg" title="SHUNJI" width="150" height="150" class="css-hover" /></p> | ||
+ | <p><font size="4">Shunji Matsuzaki</font></p> | ||
+ | <p>detail<br /> | ||
+ | </p> | ||
+ | </div> | ||
+ | <div id ="Yu" class="box3"> | ||
+ | <p><img src="img/img1.jpg" title="YU" width="150" height="150" class="css-hover" /></p> | ||
+ | <p><font size="4">Yu Tanaka</font></p> | ||
+ | <p>detail<br /> | ||
+ | <br /> | ||
+ | </p> | ||
+ | </div> | ||
+ | <!--まだ終わってないやつ--!> | ||
+ | <div class="slideshow"> | ||
+ | <img src=""alt="" /> | ||
+ | <img src="" alt="" class="alt" /> | ||
+ | <img src="" alt="" class="alt" /> | ||
+ | </div> | ||
+ | <script style="text/css> | ||
+ | .slideshow{ | ||
+ | width:1000px; | ||
+ | height:150px; | ||
+ | margin:0 20px 20px 0; | ||
+ | float:left; | ||
+ | posithin:relative; | ||
+ | } | ||
+ | .slideshow img{ | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | border:1px solid #000 | ||
+ | } | ||
+ | .slideshow img.alt{ | ||
+ | display:none; | ||
+ | } | ||
+ | </script> | ||
+ | <script style="javascript"> | ||
+ | $(function(){ | ||
+ | var interval = 3000; | ||
+ | $('.slideshow').each(function(){ | ||
+ | var container = $(this); | ||
+ | function switchImg(){ | ||
+ | var imgs = container.find('img); | ||
+ | var first =i img.eq(0); | ||
+ | var second = img.eq(1); | ||
+ | first.fadeOut().appendTo(container); | ||
+ | second.fadeIn(); | ||
+ | } | ||
+ | setInterval(switchImg,interval); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | ul.acc, ul.acc li ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.acc a{ | ||
+ | display: block; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | color: tranceplants; | ||
+ | } | ||
+ | |||
+ | ul.acc { | ||
+ | background-color:none; | ||
+ | } | ||
+ | |||
+ | ul.acc li ul { | ||
+ | background-color: none; | ||
+ | } | ||
+ | |||
+ | ul.acc1, ul.acc1 li ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.acc1 a{ | ||
+ | display: block; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | color: tranceplants; | ||
+ | } | ||
+ | |||
+ | ul.acc1 { | ||
+ | background-color:nonef; | ||
+ | } | ||
+ | |||
+ | ul.acc1 li ul { | ||
+ | background-color: none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | ul.acc, ul.acc li ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.acc a{ | ||
+ | display: block; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | color: tranceplants; | ||
+ | } | ||
+ | |||
+ | ul.acc { | ||
+ | background-color:none; | ||
+ | } | ||
+ | |||
+ | ul.acc li ul { | ||
+ | background-color: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | ul.acc1, ul.acc1 li ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.acc1 a{ | ||
+ | display: block; | ||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | color: tranceplants; | ||
+ | } | ||
+ | |||
+ | ul.acc1 { | ||
+ | background-color:none; | ||
+ | } | ||
+ | |||
+ | ul.acc1 li ul { | ||
+ | background-color: none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | var j$ = jQuery; | ||
+ | |||
+ | j$(function(){ | ||
+ | j$(".acc").each(function(){ | ||
+ | j$("li > a", this).each(function(index){ | ||
+ | var $this = j$(this); | ||
+ | |||
+ | if(index > 0) $this.next().hide(); | ||
+ | |||
+ | $this.click(function(){ | ||
+ | var params = {height:"toggle", opacity:"toggle"}; | ||
+ | j$(this).next().animate(params).parent().siblings() | ||
+ | .children("ul:visible").animate(params); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | |||
+ | j$(function(){ | ||
+ | j$(".acc1").each(function(){ | ||
+ | j$("li > a", this).each(function(index){ | ||
+ | var $this = j$(this); | ||
+ | |||
+ | if(index <= 0) $this.next().hide(); | ||
+ | |||
+ | $this.click(function(){ | ||
+ | var params = {height:"toggle", opacity:"toggle"}; | ||
+ | j$(this).next().animate(params).parent().siblings() | ||
+ | .children("ul:visible").animate(params); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <div id="HIDARI"> | ||
+ | <ul class="acc"> | ||
+ | <li><a href=""><img src="" width="160" height="32" class="menu_head" />LAB NOTE</a> | ||
+ | <ul class="fxmn"> | ||
+ | <li><div><a href="">First</a></div></li> | ||
+ | <li><div><a href="">Week1 ()</a></div></li> | ||
+ | <li><div><a href="">Week2 ()</a></div></li> | ||
+ | <li><div><a href="">Week3 ()</a></div></li> | ||
+ | <li><div><a href="">Week4 ()</a></div></li> | ||
+ | <li><div><a href="">Week5 ()</a></div></li> | ||
+ | <li><div><a href="">Week6 ()</a></div></li> | ||
+ | <li><div><a href="">Week7 ()</a></div></li> | ||
+ | <li><div><a href="">Week8 ()</a></div></li> | ||
+ | <li><div><a href="">Week9 ()</a></div></li> | ||
+ | <li><div><a href="">Week10 ()</a></div></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <a href=""><img src="" width="160" height="32" border="0" bordercolor="black">PROTOCOL</a> | ||
+ | <BR> | ||
+ | <ul class="acc1"> | ||
+ | <li><a href=""><img src="" width="160" height="32" class="menu_head" />MEETING</a> | ||
+ | <ul class="fxmn"> | ||
+ | <li><div><a href="">First</a></div></li> | ||
+ | <li><div><a href="">Week1 ()</a></div></li> | ||
+ | <li><div><a href="">Week2 ()</a></div></li> | ||
+ | <li><div><a href="">Week3 ()</a></div></li> | ||
+ | <li><div><a href="">Week4 ()</a></div></li> | ||
+ | <li><div><a href="">Week5 ()</a></div></li> | ||
+ | <li><div><a href="">Week6 ()</a></div></li> | ||
+ | <li><div><a href="">Week7 ()</a></div></li> | ||
+ | <li><div><a href="">Week8 ()</a></div></li> | ||
+ | <li><div><a href="">Week9 ()</a></div></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <a href=""><img src="" width="160" height="32" border="0" bordercolor="black">DESIGN NOTE</a> | ||
+ | <BR> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | |||
</html> | </html> |
Revision as of 01:13, 23 August 2012
idea note
スクラップみたいにしてみる????
PROFILE
Takaaki Takeda
detail
Shunji Matsuzaki
detail
Yu Tanaka
detail