|
|
(33 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> | + | <html><img alt="Team photo" title="Team photo" width="200" height="200" border="0" src="https://static.igem.org/mediawiki/2009/8/89/Tokyotech.png" onmouseover="this.src='https://static.igem.org/mediawiki/2009/d/d9/Tokyo_Tech_1-2.jpg'" onmouseout="this.src='https://static.igem.org/mediawiki/2009/8/89/Tokyotech.png'"></html> |
- | <head>
| + | |
- | <meta http-equiv="Content-Style-Type" content="text/css" />
| + | |
- | <meta http-equiv="Content-Script-Type" content="text/javascript" />
| + | |
- | <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
| + | |
- | <title>Tokyo_Tech iGEM Team</title>
| + | |
- | <meta name="description" content="" />
| + | |
- | <meta name="keywords" content="" />
| + | |
- | <style type="text/css">
| + | |
- | <!-- | + | |
- | /* ------------------------------------------------------------- | + | |
| | | |
- | [1] レイアウトに関する指定 | + | test<sup>[[#refrence|[1]]]</sup> |
- | [2] ヘッダーブロック内に関する指定 | + | |
- | [3] コンテンツブロック内に関する指定 | + | |
- | [4] フッターブロック内に関する指定
| + | |
- | [5] CSSデザインサンプルリンク指定
| + | |
| | | |
- | ----------------------------------------------------------------
| |
- | CSSデザインサンプ [ URL ] http://www.css-designsample.com
| |
- | ------------------------------------------------------------- */
| |
| | | |
- | | + | <br> |
- | /* 一括で全ての要素の余白をゼロに指定 */
| + | <br> |
- | * {
| + | <br> |
- | margin: 0;
| + | <br> |
- | padding: 0;
| + | <br> |
- | }
| + | <br> |
- | | + | <br> |
- | /* 全体的なリンク */
| + | <br> |
- | | + | <br> |
- | a:link,
| + | <br> |
- | a:visited,
| + | ==refrence== |
- | a:hover,
| + | *outside page[http://#] |
- | a:active { text-decoration: underline; }
| + | <table bordercolor=#000 border="1" width=960px><tr><td></td><tr></table> |
- | | + | |
- | a:link { color: #00f; }
| + | |
- | | + | |
- | a:visited { color: #90f; }
| + | |
- | | + | |
- | a:hover { color: #f00; }
| + | |
- | | + | |
- | a:active { color: #f00; }
| + | |
- | | + | |
- | /* -------------------------------------------------------------
| + | |
- | [1] レイアウトに関する指定 */
| + | |
- | body {
| + | |
- | font-size: 85%;
| + | |
- | text-align: center;
| + | |
- | padding: 0;
| + | |
- | margin: 0;
| + | |
- | }
| + | |
- | | + | |
- | /*-- 全体を囲んでいます --*/
| + | |
- | #wrapper {
| + | |
- | text-align: left;
| + | |
- | width: 800px;
| + | |
- | margin: 0 auto;
| + | |
- | border-left: 1px solid #666;
| + | |
- | border-right: 1px solid #666;
| + | |
- | }
| + | |
- | | + | |
- | /*-- ヘッダー部分 --*/
| + | |
- | #header {
| + | |
- | width: 100%;
| + | |
- | height: 245px;
| + | |
- | position: relative;
| + | |
- | background: url(Tokyotech.jpg) no-repeat 0 0;
| + | |
- | background-position:top right;
| + | |
- | }
| + | |
- | | + | |
- | /*-- コンテンツ部分 740px --*/
| + | |
- | #contents { padding: 40px 30px; }
| + | |
- | | + | |
- | /*-- フッター部分 --*/
| + | |
- | #footer {
| + | |
- | width: 802px;
| + | |
- | margin: 0 auto;
| + | |
- | padding: 2em 0 0.5em;
| + | |
- | background-color: #333;
| + | |
- | }
| + | |
- | | + | |
- | /* -------------------------------------------------------------
| + | |
- | [2] ヘッダーブロック内に関する指定 */
| + | |
- | | + | |
- | /* 見出し */
| + | |
- | | + | |
- | h1 {
| + | |
- | font-size: 100%;
| + | |
- | font-weight: normal;
| + | |
- | text-align: right;
| + | |
- | position: absolute;
| + | |
- | top: 10px;
| + | |
- | left: 30px;
| + | |
- | color: #666;
| + | |
- | }
| + | |
- | | + | |
- | /* サイトタイトル */
| + | |
- | .logo {
| + | |
- | font-size: 160%;
| + | |
- | position: absolute;
| + | |
- | top: 30px;
| + | |
- | left: 30px;
| + | |
- | }
| + | |
- | | + | |
- | .logo a {
| + | |
- | font-weight: bold;
| + | |
- | color: #000;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | .logo a:hover {
| + | |
- | color: #f00;
| + | |
- | text-decoration: none;
| + | |
- | }
| + | |
- | | + | |
- | /* 概要 */
| + | |
- | .description {
| + | |
- | line-height: 1.5em;
| + | |
- | position: absolute;
| + | |
- | bottom: 45px;
| + | |
- | left: 30px;
| + | |
- | color: #000;
| + | |
- | }
| + | |
- | | + | |
- | /*---------------------------------------グローバルナビ部分*/
| + | |
- | #globalnavi {
| + | |
- | font-size: 95%;
| + | |
- | list-style-type: none;
| + | |
- | width: 800px;
| + | |
- | height: 40px;
| + | |
- | position: absolute;
| + | |
- | bottom: 0;
| + | |
- | left: 0;
| + | |
- | }
| + | |
- | | + | |
- | #globalnavi li {
| + | |
- | width: 200px;
| + | |
- | float: left;
| + | |
- | }
| + | |
- | | + | |
- | #globalnavi li a {
| + | |
- | text-align: center;
| + | |
- | text-decoration: none;
| + | |
- | width: 200px;
| + | |
- | height: 28px;
| + | |
- | display: block;
| + | |
- | padding-top: 12px;
| + | |
- | background-image: url(img/bg-globalnavi.jpg);
| + | |
- | background-repeat: no-repeat;
| + | |
- | color: #9f0
| + | |
- | }
| + | |
- | | + | |
- | #category01 a { background-position: 0 0; }
| + | |
- | | + | |
- | #category02 a { background-position: -200px 0; }
| + | |
- | | + | |
- | #category03 a { background-position: -400px 0; }
| + | |
- | | + | |
- | #category04 a { background-position: -600px 0; }
| + | |
- | | + | |
- | #globalnavi li a:hover {
| + | |
- | text-decoration: none;
| + | |
- | background-image: url(img/bg-globalnavi.jpg);
| + | |
- | background-repeat: no-repeat;
| + | |
- | color: #fff;
| + | |
- | }
| + | |
- | | + | |
- | #category01 a:hover { background-position: 0 -40px; }
| + | |
- | | + | |
- | #category02 a:hover { background-position: -200px -40px; }
| + | |
- | | + | |
- | #category03 a:hover { background-position: -400px -40px; }
| + | |
- | | + | |
- | #category04 a:hover { background-position: -600px -40px; }
| + | |
- | | + | |
- | /*--サブメニュー部分--*/
| + | |
- | | + | |
- | #globalnavi ul {
| + | |
- | list-style-type: none;
| + | |
- | width: 200px;
| + | |
- | height: auto;
| + | |
- | position: static;
| + | |
- | }
| + | |
- | | + | |
- | #globalnavi ul li {
| + | |
- | width: 200px;
| + | |
- | float: none;
| + | |
- | }
| + | |
- | | + | |
- | #globalnavi ul li a {
| + | |
- | text-align: left;
| + | |
- | text-decoration: none;
| + | |
- | width: 190px;
| + | |
- | height: auto;
| + | |
- | display: block;
| + | |
- | padding: 4px;
| + | |
- | border: 1px outset #690;
| + | |
- | background-image: none;
| + | |
- | background-color: #690;
| + | |
- | color: #000;
| + | |
- | }
| + | |
- | | + | |
- | #globalnavi ul li a:hover {
| + | |
- | text-decoration: none;
| + | |
- | border: 1px outset #666;
| + | |
- | background-image: none;
| + | |
- | background-color: #666;
| + | |
- | color: #fff;
| + | |
- | }
| + | |
- | | + | |
- | #globalnavi .menu ul { display: none; }
| + | |
- | | + | |
- | #globalnavi .menuOn ul { display: block; }
| + | |
- | | + | |
- | /* -------------------------------------------------------------
| + | |
- | [3] コンテンツブロック内に関する指定 */
| + | |
- | | + | |
- | /* 見出し */
| + | |
- | h2,
| + | |
- | h3,
| + | |
- | h4,
| + | |
- | h5,
| + | |
- | h6 {
| + | |
- | font-size: 140%;
| + | |
- | font-weight: normal;
| + | |
- | margin-bottom: 0.5em;
| + | |
- | padding: 3px 0 2px;
| + | |
- | color: #030;
| + | |
- | border-top: 2px solid #9c0;
| + | |
- | border-bottom: 1px solid #ccc;
| + | |
- | }
| + | |
- | | + | |
- | h3,
| + | |
- | h4,
| + | |
- | h5,
| + | |
- | h6 { margin-top: 2em; }
| + | |
- | | + | |
- | /* 文字 */
| + | |
- | #contents p {
| + | |
- | line-height: 1.5em;
| + | |
- | margin-bottom: 1em;
| + | |
- | }
| + | |
- | | + | |
- | /* -------------------------------------------------------------
| + | |
- | [5] フッターブロック内に関する指定 */
| + | |
- | | + | |
- | #footer p {
| + | |
- | text-align: center;
| + | |
- | color: #fff;
| + | |
- | }
| + | |
- | | + | |
- | /* -------------------------------------------------------------
| + | |
- | [6] CSSデザインサンプルリンク指定 */
| + | |
- | | + | |
- | #cds {
| + | |
- | font-size: 80%;
| + | |
- | font-family: Geneva, Arial, Helvetica, sans-serif;
| + | |
- | text-align: right;
| + | |
- | margin: 0;
| + | |
- | padding-right: 20px;
| + | |
- | clear: both;
| + | |
- | }
| + | |
- | | + | |
- | #cds,
| + | |
- | #cds a,
| + | |
- | #cds a:hover {
| + | |
- | text-decoration: none;
| + | |
- | color: #ccc;
| + | |
- | }
| + | |
- | | + | |
- | -->
| + | |
- | </style> | + | |
- | | + | |
- | <!-- base layout css.design sample --> | + | |
- | </head> | + | |
- | <body> | + | |
- | <div id="wrapper"> | + | |
- | <div id="header"> | + | |
- | <!-- キーワード --> | + | |
- | <h1>iGEM2009</h1> | + | |
- | <!-- ページの概要 --> | + | |
- | <p class="description">The Tokyo-Tech iGEM team are planning two ideas.</p> | + | |
- | <!-- 企業名|ショップ名|タイトル -->
| + | |
- | <p class="logo"><a href="index.html">Tokyo-Tech iGEM team</a></p>
| + | |
- | | + | |
- | <!-- グローバルナビゲーション -->
| + | |
- | <ul id="globalnavi">
| + | |
- | | + | |
- | <!-- カテゴリー 1 -->
| + | |
- | <li id="category01" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'">
| + | |
- | <a href="#">Main</a>
| + | |
- | </li>
| + | |
- | | + | |
- | <!-- カテゴリー 2 --> | + | |
- | <li id="category02" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'">
| + | |
- | <a href="#">Project</a>
| + | |
- | <!-- カテゴリー 2 の 子リスト-->
| + | |
- | <ul>
| + | |
- | <li><a href="#">Idea 1</a></li>
| + | |
- | <li><a href="#">Idea 2</a></li>
| + | |
- | <li><a href="#">Idea 3</a></li>
| + | |
- | <li><a href="#">Idea 4</a></li>
| + | |
- | <li><a href="#">Idea 5</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | | + | |
- | <!-- カテゴリー 3 -->
| + | |
- | <li id="category03" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'">
| + | |
- | <a href="#">Parts</a>
| + | |
- | <!-- カテゴリー 3 の 子リスト-->
| + | |
- | </li>
| + | |
- | | + | |
- | <!-- カテゴリー 4 -->
| + | |
- | <li id="category04" class="menu" onmouseover="this.className='menuOn'" onmouseout="this.className='menu'">
| + | |
- | <a href="#">Team</a>
| + | |
- | <!-- カテゴリー 4 の 子リスト-->
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | <!-- header end -->
| + | |
- | <div id="contents">
| + | |
- | <!-- コンテンツここから -->
| + | |
- | | + | |
- | <h2>Abstract</h2>
| + | |
- | <p>Willcome!</p>
| + | |
- | | + | |
- | <h3>Introduction</h3>
| + | |
- | <p>Terraforming of Mars wtih E.coli</p>
| + | |
- | | + | |
- | <!-- コンテンツここまで -->
| + | |
- | </div>
| + | |
- | <!-- contents end -->
| + | |
- | <!-- ↓削除不可 -->
| + | |
- | <p id="cds">Designed by <a href="http://www.css-designsample.com/">CSS.Design Sample</a></p></div>
| + | |
- | </body>
| + | |
- | </html> | + | |