ホーム >>> HTML整理ノート

display： リンク<a>に利用

通常は、リンク指定された文字列だけがリンクに反応する。<a>タグに「display:block」指定することで枠全体がリンクに反応するようになる。

 通常  display指定

Sample Source......................................................................>>>

ul.off li,ul.on li {width:170px;background-color:#add8e6;border:1px solid navy;
　　　　　　font-size:85%;padding:0 3px;margin-top:0.5mm}
ul a {color:blue}
ul.on a {display:block}
a:hover {background-color:#dcdcdc;color:red}
</style>
</head>

<body>
<table border="1">
    <tr>
      <td>通常</td>
      <td>display指定</td>
    </tr>
    <tr>
      <td>      
      <ul class="off">
        <li><a href="background05.html">動く背景画像</a>
        <li><a href="overflow02.html">overflowのScript</a>
        <li><a href="clip01.html">clip 切り抜き</a>
        <li><a href="display01.html">display 表示状態を指定</a>
       </ul>
      </td>
      <td>
      <ul class="on">
        <li><a href="background05.html">動く背景画像</a>
        <li><a href="overflow02.html">overflowのScript</a>
        <li><a href="clip01.html">clip 切り抜き</a>
        <li><a href="display01.html">display 表示状態を指定</a>
       </ul>
    </td>
    </tr>
</table>