|
|
(3 intermediate revisions not shown) |
Line 311: |
Line 311: |
| </div> | | </div> |
| </div> | | </div> |
- | </div>
| |
- | </html>
| |
| | | |
- | <html>
| |
- | <style type="text/css">
| |
- | #wrapper{
| |
- | height: 1290px;
| |
- | }
| |
- | #indent_content{
| |
- | margin: 30px;
| |
- | padding: 0px;
| |
- | width: 900px;
| |
- | }
| |
- | #all_content p{
| |
- | font-family: "Times New Roman", sans-serif;
| |
- | font-size:14px;
| |
- | }
| |
- | #all_content h1{
| |
- | font-family: "Lucinda sans unicode", sans-serif;
| |
- | }
| |
- | #all_content{
| |
- | margin: 30px;
| |
- | padding: 0px;
| |
- | border: 1px solid black;
| |
- | width: 900px;
| |
- | height: 570px;
| |
- | background-color: #173B0B;
| |
- | -moz-border-radius: 8px;
| |
- | -webkit-border-radius: 8px;
| |
- | }
| |
- | .content{
| |
- | height: 546px;
| |
- | width: 790px;
| |
- | background-image: none;
| |
- | background-color: #FBF8EF;
| |
- | background-size: 50%;
| |
- | border: 1px solid grey;
| |
- | padding: 10px;
| |
- | margin: 0px;
| |
- | text-align: justify;
| |
- | }
| |
- | .content img{
| |
- | float: left;
| |
- | margin: 10px;
| |
- | }
| |
- | .content table{
| |
- | float: left;
| |
- | border: none;
| |
- | font-family: "Courier New";
| |
- | background-color: #FBF8EF;
| |
- | font-size: 12px;
| |
- | }
| |
- | .content table td{
| |
- | padding:0px 8px;
| |
- | }
| |
- | .left_page, .right_page{
| |
- | float: left;
| |
- | width: 368px;
| |
- | height: 526px;
| |
- | margin: 13px;
| |
- | }
| |
- | #items{
| |
- | float: left;
| |
- | padding: 0px;
| |
- | margin: 1px -41px 1px 41px;
| |
- | }
| |
- | #tabs{
| |
- | margin: 0px;
| |
- | padding: 0px;
| |
- | }
| |
- | #tabs li{
| |
- | display: block;
| |
- | list-style: none;
| |
- | padding: 0px;
| |
- | margin: 0px;
| |
- | width: 46px;
| |
- | height: 42px;
| |
- | }
| |
- | #tabs li a{
| |
- | -moz-border-radius-topright: 10px;
| |
- | -webkit-border-top-right-radius: 10px;
| |
- | -moz-border-radius-bottomright: 10px;
| |
- | -webkit-border-bottom-right-radius: 10px;
| |
- | text-align: center;
| |
- | display: block;
| |
- | font-family: "Courier New";
| |
- | font-size: 25px;
| |
- | color: black;
| |
- | background-color: #FBF8EF;
| |
- | text-decoration: none;
| |
- | border: 1px solid gray;
| |
- | border-left: none;
| |
- | padding: 9px 14px 28px 14px;
| |
- | }
| |
- | #tabs li a:hover{
| |
- | background-color: #e3e3e5;
| |
- | border: 1px solid #666666;
| |
- | border-left: none;
| |
- | }
| |
- | #tabs li a.active{
| |
- | background-color: #e3e3e5;
| |
- | color: black;
| |
- | border: 1px solid gray;
| |
- | border-left: none;
| |
- | }
| |
- | #content2, #content3, #content4, #content5, #content6, #content7, #content8, #content9, #content10{
| |
- | display: none;
| |
- | padding: 10px;
| |
- | }
| |
- | #content4 p, #content7 p{
| |
- | font-size: 12px;
| |
- | }
| |
- | #under{
| |
- | width: 880px;
| |
- | height: 400px;
| |
- | float:left;
| |
- | margin-left: -50px;
| |
- | }
| |
- | #under_page{
| |
- | margin: 10px;
| |
- | width: 200px;
| |
- | float: left;
| |
- | }
| |
- | #under_page2{
| |
- | margin: 10px;
| |
- | width: 180px;
| |
- | float: left;
| |
- | }
| |
- | #confocals{
| |
- | height: 170px;
| |
- | width: 340px;
| |
- | float: left;
| |
- | }
| |
- | #confocals img{
| |
- | margin: 5px;
| |
- | }
| |
- | #confocal{
| |
- | overflow: hidden;
| |
- | height: 160px;
| |
- | width: 160px;
| |
- | float: left;
| |
- | }
| |
- | #confocal img:hover{
| |
- | margin-top: -165px;
| |
- | }
| |
- | #middle{
| |
- | margin: 80px 50px 50px 55px;
| |
- | }
| |
- | </style>
| |
- |
| |
- |
| |
- |
| |
- | <script type="text/javascript">
| |
- | function ThisTab(new_tab, new_content) {
| |
- | for(var i=1;i<11;i++){document.getElementById('content'+i).style.display = 'none';}
| |
- | document.getElementById(new_content).style.display = 'block';
| |
- |
| |
- | for(var i=1;i<11;i++){document.getElementById('tab'+i).className = '';}
| |
- | document.getElementById(new_tab).className = 'active';
| |
- | }
| |
- | </script>
| |
- |
| |
- |
| |
- |
| |
- | <div id="all_content">
| |
- |
| |
- |
| |
- | <div id="tabs">
| |
- | <div id="items">
| |
- | <div id="content1" class="content">
| |
- | <div class="left_page">
| |
- | <p>First page.</p>
| |
- |
| |
- | </div>
| |
- | <div class="right_page">
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content2" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content2 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content2 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content3" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content3 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content3 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content4" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content4 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content4 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content5" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content5 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content5 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content6" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content6 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content6 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content7" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content7 (left)</p>
| |
- |
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content7 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content8" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content8 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content8 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content9" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content9 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content9 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- | <div id="content10" class="content">
| |
- | <div class="left_page">
| |
- | <p>Content10 (left)</p>
| |
- | </div>
| |
- | <div class="right_page">
| |
- | <p>Content10 (right)</p>
| |
- | </div>
| |
- | </div>
| |
- |
| |
- |
| |
- | </div>
| |
- | </div>
| |
- |
| |
- |
| |
- | <div id="items">
| |
- | <ul id="tabs">
| |
- | <li><a href="javascript:ThisTab('tab1', 'content1');" id="tab1" class="active">1</a></li>
| |
- | <li><a href="javascript:ThisTab('tab2', 'content2');" id="tab2">2</a></li>
| |
- | <li><a href="javascript:ThisTab('tab3', 'content3');" id="tab3">3</a></li>
| |
- | <li><a href="javascript:ThisTab('tab4', 'content4');" id="tab4">4</a></li>
| |
- | <li><a href="javascript:ThisTab('tab5', 'content5');" id="tab5">5</a></li>
| |
- | <li><a href="javascript:ThisTab('tab6', 'content6');" id="tab6">6</a></li>
| |
- | <li><a href="javascript:ThisTab('tab7', 'content7');" id="tab7">7</a></li>
| |
- | <li><a href="javascript:ThisTab('tab8', 'content8');" id="tab8">8</a></li>
| |
- | <li><a href="javascript:ThisTab('tab9', 'content9');" id="tab9">9</a></li>
| |
- | <li><a href="javascript:ThisTab('tab10', 'content10');" id="tab10">10</a></li>
| |
- |
| |
- | </ul>
| |
- | </div>
| |
- | </div>
| |
- | </div>
| |
- | </html>
| |
- |
| |
- | <html>
| |
| <div id="footer" style="position:absolute;bottom:0;"> | | <div id="footer" style="position:absolute;bottom:0;"> |
| <hr><br> | | <hr><br> |