Biomod/2014/fit test.html: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<!-- ================= -->
<style type="text/css">
<!-- ▼jQuery 読み込み -->
<!-- ================= -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>　<!-- ※CDNを利用する場合は、上の行をコメントアウトし、こちらの行を有効にして下さい。 -->


<!-- ==================================================== -->
ul.pulldown_menu_1 {
<!-- ▼サブメニューを開閉するためのスクリプト(jQuery利用) -->
list-style: none; /* 先頭記号を消す */
<!-- ==================================================== -->
}
<script type="text/javascript">
ul.pulldown_menu_1 li {
$(function(){
float: left; /* リスト項目を横方向に並べる */
$("#menu li").hover(function(){
width: 100px; /* リスト項目の幅 */
$("ul",this).show();
}
},
ul.pulldown_menu_1 ul {
function(){
list-style: none; /* 2段目の先頭記号を消す */
$("ul",this).hide();
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
});
}
});
ul.pulldown_menu_1 a {
</script>
background-color: black; /* 背景色 */
color: red; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
border-radius: 8px 8px 0px 0px; /* タブに丸みをつける */


<!-- ======================= -->
}
<!-- ▼メニューを装飾するCSS -->
ul.pulldown_menu_1 ul a {
<!-- ======================= -->
border-radius: 0px; /* 2段目以降はタブに丸みをつけない */
<style type="text/css">
/* ------------------ */
/* メニューバーの装飾 */
div.menubar {
background-color: #FF6633;        /* バーの背景色 */
border-top:    3px double #800000; /* バーの上端線 */
border-bottom: 3px double #800000; /* バーの下端線 */
min-width: 630px;                 /* メインメニュー全部が収まる最低横幅 */
}


/* ------------------------ */
}
/* メインメニュー項目の装飾 */
ul.pulldown_menu_1 a:hover {/* マウスカーソルが乗っている状態 */
div.menubar ul#menu {
margin: 0px 0px 0px 15px; /* メニューバー外側の余白 */
padding: 10px;            /* メニューバー内側の余白 */
height: 40px;            /* メニューバーの高さ */
}
div.menubar ul#menu li {
    width: 120px; /* メニュー項目の横幅 */
    height: 40px; /* メニュー項目の高さ（「メニューバーの高さ」と一致させる） */
    float: left;
    list-style-type: none;
    position: relative;
}
div.menubar ul#menu a {
background-color: #FF6633; /* メニュー項目の背景色 */
    color: white;              /* メニュー項目の文字色 */
    line-height: 40px;        /* メニュー項目のリンクの高さ（「メニュー項目の高さ」と一致させる） */
    text-align: center;        /* メインメニューの文字列の配置（中央寄せ） */
    text-decoration: none;    /* メニュー項目の装飾（下線を消す） */
    display: block;
width: 100%;
    height: 100%;
}
div.menubar ul#menu a:hover {
background-color: #BAD3FF; /* メニュー項目にマウスが載ったときの背景色 */
color: #cc0000;            /* メニュー項目にマウスが載ったときの文字色 */
}


/* メニューバー直後の Clear Hack */
color: blue; /* 文字色 */
div.menubar ul#menu { zoom:1; }
}
div.menubar ul#menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
ul.pulldown_menu_1 a:active {/* マウスがクリックされている状態 */


/* ---------------------- */
color: red; /* 文字色 */
/* サブメニュー項目の装飾 */
}
div.menubar ul#menu ul.sub {
ul.pulldown_menu_2 ul {
background-color: #FF6633;    /* サブメニュー全体の背景色 */
display: none; /* 通常は表示しない */
border-width: 1px 1px 0px 1px; /* サブメニュー全体の枠線の太さ */
}
border-style: solid;          /* サブメニュー全体の枠線の線種 */
ul.pulldown_menu_2 li:hover > ul {
border-color: #800000;        /* サブメニュー全体の枠線の色 */
display: block; /* マウスが乗ったら表示する */
margin: 0px;
}
padding: 0px;
</style>
display: none;
position: absolute;
}
div.menubar ul#menu ul.sub li {
width: 135px; /* サブメニュー1項目の横幅 */
height: 35px; /* サブメニュー1項目の高さ */
border-width: 0px 0px 1px 0px; /* サブメニュー1項目の枠線の太さ */
border-style: solid;          /* サブメニュー1項目の枠線の線種 */
border-color: #800000;        /* サブメニュー1項目の枠線の色 */
}
div.menubar ul#menu ul.sub li a {
line-height: 35px; /* サブメニュー1項目の行高（「サブメニュー1項目の高さ」と合わせる） */
text-align: left;  /* 文字列の配置（左寄せ） */
text-indent: 5px;  /* 文字列前方の余白 */
}
div.menubar ul#menu ul.sub li a:hover {
background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色 */
color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色 */
}


</style>
</head>
<body>
<body>
<div id="pagebody">
<div id="header"><h1><p style="background:#CCFFFF; color:purple;"><font face=cursive size="6"><B>  Team FIT </font> </B></p></a></h1></div>
<!-- ======================== -->
<!-- ▼メニューを構成するHTML -->
<!-- ======================== -->
<div class="menubar">
<ul id="menu" style="list-style:none;">
<li><a href="#">TOP</a></li>
<li><a href="fit_Introduction.html">Intro</a>
<ul class="sub"style="list-style:none;">
<li><a href="fit_Introduction.html#a">How to play kurohige</a></li>
<li><a href="fit_Introduction.html#b">Why kurhige</a></li>
<li><a href="fit_Introduction.html#c">problem</a></li>
</ul>
</li>
<li><a href="fit_Approach and Goals.html">Approach</a>
<ul class="sub" style="list-style:none;">
<li><a href="fit_Approach and Goals.html#DNA">DNA</a></li>
<li><a href="fit_Approach and Goals.html#Silica">Silica</a></li>
<li><a href="fit_Approach and Goals.html#Fluorescence">Fluorescence</a></li>
</ul>
</li>
<li><a href="fit_Method.html">Method</a>
<ul class="sub" style="list-style:none;">
<li><a href="fit_Method.html#DNA">DNA</a></li>
<li><a href="fit_Method.html#Silica">Silica</a></li>
<li><a href="fit_Method.html#Fluorescence">Fluorescence</a></li>
<li><a href="fit_Method.html#DNA-Silica">DNA-Silica</a></li>
</ul>
</li>
<li><a href="fit_Results and Discussion.html">result</a>
<ul class="sub" style="list-style:none;">
<li><a href="fit_Results and Discussion.html#DNA">DNA</a></li>
<li><a href="fit_Results and Discussion.html#Silica">Silica</a></li>
</ul>
</li>
</ul>
</div>
<!-- ========== -->
<!-- ▲ここまで -->
<!-- ========== -->
<h2 p style="background:#FFFFFF; color:#003366;"><font face=cursive size="5"><B> Abstract  </font></B></p></h2>
<div style="padding: 35px;">
<p>
<h3>&nbsp; We create “nano Pop-up Pirate “using by the complementary DNA base-pairing. Pop-up Pirate is a famous Japanese toy. A doll is sitting on the Barrel. Players stab the sword to when player stabs to the specific point, the doll will fly away from a barrel.
<br>
　Fluorescence labeled DNA was bound to the porous silica particle, of the barrel. And different fluorescence labeled mismatched DNA who is a doll in bound to the Barrel DNA. When mismatched DNA that is a sward in added, mismatched DNA would be released.
<br>
　Two fluorescence reagents are constructed the FRET system, and used in the detection of the states of DNAs. This system is applicable for the Drug Delivery systems .A porous silica is a container .DNA system is a drug release regulation. Free system is a drug release detection.</h3></p></div>
<center>
<img alt="" src="/images//7/76/Fithigeani.gif" width="400" height="300" border="0"/ style="margin-right: 10px;">
</center>
<br>
<hr />


<ul class= "pulldown_menu_1 pulldown_menu_2">
<li><a href= "stepuphtml1.html"> STEP 1</a>
  <ul>
    <li><a href= "stepuphtml1.html"> STEP 1-1</a></li>
    <li><a href= "stepuphtml1.html"> STEP 1-2</a></li>
    <li><a href= "stepuphtml1.html"> STEP 1-3</a></li>
  </ul>
</li>
<li><a href= "stepuphtml2.html"> STEP 2</a>
    <ul>
    <li><a href= "stepuphtml2.html"> STEP 2-1</a></li>
    <li><a href= "stepuphtml2.html"> STEP 2-2</a></li>
    </ul>
</li>
<li><a href= "stepuphtml3.html"> STEP 3</a>
    <ul>
    <li><a href= "stepuphtml3.html"> STEP 3-1</a></li>
    <li><a href= "stepuphtml3.html"> STEP 3-2</a></li>
    <li><a href= "stepuphtml3.html"> STEP 3-3</a></li>
    <li><a href= "stepuphtml3.html"> STEP 3-4</a></li>
    </ul>
</li>
<li><a href= "stepuphtml4.html"> STEP 4</a>
    <ul>
    <li><a href= "stepuphtml4.html"> STEP 4-1</a></li>
    <li><a href= "stepuphtml4.html"> STEP 4-2</a></li>
    <li><a href= "stepuphtml4.html"> STEP 4-3</a></li>
    </ul>
</li>
</ul>
</body>
</body>

Revision as of 21:19, 6 October 2014

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <style type="text/css">

ul.pulldown_menu_1 { list-style: none; /* 先頭記号を消す */ } ul.pulldown_menu_1 li { float: left; /* リスト項目を横方向に並べる */ width: 100px; /* リスト項目の幅 */ } ul.pulldown_menu_1 ul { list-style: none; /* 2段目の先頭記号を消す */ padding-left: 0px; /* 2段目の左位置を1段目に揃える */ } ul.pulldown_menu_1 a { background-color: black; /* 背景色 */ color: red; /* 文字色 */ display: block; /* ブロックレベルに */ text-align: center; /* 文字を中央合わせに */ padding: 5px; /* 内部の余白 */ border: 1px #9999FF solid; /* 枠線 */ text-decoration: none; /* 下線を消す */ outline: none; /* 選択時の点線枠線を消す */ border-radius: 8px 8px 0px 0px; /* タブに丸みをつける */

} ul.pulldown_menu_1 ul a { border-radius: 0px; /* 2段目以降はタブに丸みをつけない */

} ul.pulldown_menu_1 a:hover {/* マウスカーソルが乗っている状態 */

color: blue; /* 文字色 */ } ul.pulldown_menu_1 a:active {/* マウスがクリックされている状態 */

color: red; /* 文字色 */ } ul.pulldown_menu_2 ul { display: none; /* 通常は表示しない */ } ul.pulldown_menu_2 li:hover > ul { display: block; /* マウスが乗ったら表示する */ } </style>

<body>

  • <a href= "stepuphtml1.html"> STEP 1</a>
    • <a href= "stepuphtml1.html"> STEP 1-1</a>
    • <a href= "stepuphtml1.html"> STEP 1-2</a>
    • <a href= "stepuphtml1.html"> STEP 1-3</a>
  • <a href= "stepuphtml2.html"> STEP 2</a>
    • <a href= "stepuphtml2.html"> STEP 2-1</a>
    • <a href= "stepuphtml2.html"> STEP 2-2</a>
  • <a href= "stepuphtml3.html"> STEP 3</a>
    • <a href= "stepuphtml3.html"> STEP 3-1</a>
    • <a href= "stepuphtml3.html"> STEP 3-2</a>
    • <a href= "stepuphtml3.html"> STEP 3-3</a>
    • <a href= "stepuphtml3.html"> STEP 3-4</a>
  • <a href= "stepuphtml4.html"> STEP 4</a>
    • <a href= "stepuphtml4.html"> STEP 4-1</a>
    • <a href= "stepuphtml4.html"> STEP 4-2</a>
    • <a href= "stepuphtml4.html"> STEP 4-3</a>

</body>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2014/fit_test.html&oldid=826792"