STUDY_html_003

　　STUDY_html_003_C.html

html
css
JavaScript

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<meta charset="utf-8">

<style>　　　　　スタイル　　　　　</style>

<table width="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<td align="center"><img src="STUDY_html_image_003/images_01.jpg"width="960"height="160"border="0"></td>
</tr>
</table>
<div id="セット">
<div id="スイッチ">
<ul class="リスト">
<li class="A"><a href="html_003_contents.html">A</a></li>
<li class="B"><a href="#">B</a></li>
<li class="C"><a href="#">C</a></li>
<li class="D"><a href="#">D</a></li>
<li class="E"><a href="#">E</a></li>
<li class="F"><a href="#">F</a></li>
<li class="G"><a href="#">G</a></li>
<li class="H"><a href="#">H</a></li>
<li class="i"><a href="#">i</a></li>
<li class="J"><a href="#">J</a></li>
</ul>
</div></div>

</html>

<style>
#スイッチ ul.リスト li a{background:url(STUDY_html_image_003/images_02.jpg)no-repeat 0 0;}
#スイッチ ul.リスト li.A a{background-position:0 0;}
#スイッチ ul.リスト li.A a:hover{background-position:0 100%;}
#スイッチ ul.リスト li.A a.current{background-position:0 100%;}
#スイッチ ul.リスト li.B a{background-position:-96px 0;}
#スイッチ ul.リスト li.B a:hover{background-position:-96px 100%;}
#スイッチ ul.リスト li.B a.current{background-position:-96px 100%;}
#スイッチ ul.リスト li.C a{background-position:-192px 0;}
#スイッチ ul.リスト li.C a:hover{background-position:-192px 100%;}
#スイッチ ul.リスト li.C a.current{background-position:-192px 100%;}
#スイッチ ul.リスト li.D a{background-position:-288px 0;}
#スイッチ ul.リスト li.D a:hover{background-position:-288px 100%;}
#スイッチ ul.リスト li.D a.current{background-position:-288px 100%;}
#スイッチ ul.リスト li.E a{background-position:-384px 0;}
#スイッチ ul.リスト li.E a:hover{background-position:-384px 100%;}
#スイッチ ul.リスト li.E a.current{background-position:-384px 100%;}
#スイッチ ul.リスト li.F a{background-position:-480px 0;}
#スイッチ ul.リスト li.F a:hover{background-position:-480px 100%;}
#スイッチ ul.リスト li.F a.current{background-position:-480px 100%;}
#スイッチ ul.リスト li.G a{background-position:-576px 0;}
#スイッチ ul.リスト li.G a:hover{background-position:-576px 100%;}
#スイッチ ul.リスト li.G a.current{background-position:-576px 100%;}
#スイッチ ul.リスト li.H a{background-position:-672px 0;}
#スイッチ ul.リスト li.H a:hover{background-position:-672px 100%;}
#スイッチ ul.リスト li.H a.current{background-position:-672px 100%;}
#スイッチ ul.リスト li.i a{background-position:-768px 0;}
#スイッチ ul.リスト li.i a:hover{background-position:-768px 100%;}
#スイッチ ul.リスト li.i a.current{background-position:-768px 100%;}
#スイッチ ul.リスト li.J a{background-position:-864px 0;}
#スイッチ ul.リスト li.J a:hover{background-position:-864px 100%;}
#スイッチ ul.リスト li.J a.current{background-position:-864px 100%;}
ul{margin:0;
padding:0;}
li{position:relative;
float:left;
width:96px;}
a{display:block;
height:30px;
text-indent:-9999px;
outline:none;}
#セット{position:relative;
width:960px;
margin:0 auto;
text-align:left;}
</style>



　　　・・・JavaScriptは使われていません

sample_STUDY_html_003_C ▶[ html_history_03.pdf \ sample_STUDY_html_003_C.pdf ] サンプル・ダウンロード

← Contents

STUDY_html_003_C.html

　　← Contents

　　STUDY_html_003_C.html