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

Retrieved from "http://2012.igem.org/Team:KIT-Kyoto/Team"