Life is Adventure!

Java Appletの利用例 | Home | パスワード保護

マウスを重ねると背景が変わる

昔のコンテンツ整理

CSS記述:

td#tab {background: #81B781;} 

td#tab div.active
 {color:#ffffff; background:#81B781; font-weight:bold; font-size:12px;
 text-align: center; padding:3px; border-right: 1px solid #81B781;
 background: url(images/tab3.gif); background-repeat:no-repeat;
 background-position: 0% 0%;} 

td#tab div.active a
 {color: #cccccc; text-decoration: none; padding:3px;} 

td#tab div.nonactive a
 {color: #548F54; font-weight: bold; background: #81B781;
 font-size: 12px; padding:3px; border-right: 1px solid #81B781;
 text-decoration: none; background: url(images/tab2.gif);display: block;} 

td#tab div.nonactive a:hover
 {color: #FFFFFF; font-weight:bold; text-decoration: none;
 background: url(images/tab3.gif);} 

td#tab div.nonactive a:active
 {color: #FFFFFF; font-weight: bold; text-decoration:none; background:
 url(images/tab3.gif);} 

HTML記述:

<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="clover.css" />
</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width:655px; border: 2px solid #81B781;">
<tr><td id="tab"></td></tr><tr>
<td style="vertical-align: bottom; border-left: 5px solid #81B781; border-right: 5px solid #81B781;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <td id="tab" align="center" width="12%">
<div class="active"><a href="clover.html">HOME</a></div></td>
<td id="tab" align="center" width="12%">
<div class="nonactive"><a href="http://blog.elmstadt.com/archives/cat25/index.html">徒然の記</a></div></td>
<td id="tab" align="center" width="12%">
<div class="nonactive"><a href="http://blog.elmstadt.com/archives/web/index.html">WEBの話</a></div></td>

・・・・・・・・・・(省略)・・・・・・・・・・

<td id="tab" align="center" width="12%">
<div class="nonactive"><a href="http://blog.elmstadt.com/archives/cat27/index.html">読書の話</a></div></td>
</tr></table></td></tr><tr><td id="tab"></td></tr>
</table>
今日の言葉: 

コメントを投稿


counter