かずばんBBS
今までのBBS、Spamが多いので新しくしてみました。
特に話題は特定していません、お気軽に投稿してください
５軸の話題はこちらで・・
 |
▼ | HTML & CSS 覚書 かずばん 12/5/7(月) 10:40 |
|
|
【a a:hover】 かずばん 12/5/8(火) 9:56 |
|
かずばん - 12/5/8(火) 9:56 - |
【a a:hover】
<a> は アンカーの意味で、<a href="..."> で指定したページのリンクなどに使用する
a:hover は、アンカー要素の上をマウスが通過した時に適応される
それぞれに、色などのスタイルを指定すれば、マウスにより動きのある
メニューを作成できる
http://www.geocities.jp/sako_sho_kei/test/index003.html
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
width:900px;
text-align:center;
}
/* ------------------------------
Hedder
------------------------------ */
.headder{
color:white;
background-color: blue;
}
.headder h1{
font-size:30pt;
text-align:center;
}
.headder h2{
color:skyblue;
font-size:12pt;
text-align:right;
padding-right:40px;
margin-top:35px;
margin-bottom:0.0em;
}
/* ------------------------------
Index
------------------------------ */
.index a{
color:yellow;
background:black;
float:left;
width:150px;
height:25px;
text-align:center;
}
.index a:hover{
color:black;
background:yellow;
}
.index ul{
margin:0px;
margin-top:2px;
padding:0px;
list-style-type:none;
}
div.index li{
float:left;
}
*/------------------------------ */
-->
</style>
</head>
<!-- HTML ------------------->
<body>
<div class="headder">
<h1>TEST_Page</h1>
<h2>by kazuban</h2>
</div>
<div class="index">
<ul>
<li><a href="./index001.html">Sample001</a></li>
<li><a href="./index002.html">Sample002</a></li>
<li><a href="./index003.html">Sample003</a></li>
<li><a href="#">Menu01</a></li>
<li><a href="#">Menu02</a></li>
<li><a href="#">Menu03</a></li>
</ul>
</div>
</body>
</html>
<a> は アンカーの意味で、<a href="..."> で指定したページのリンクなどに使用する
a:hover は、アンカー要素の上をマウスが通過した時に適応される
それぞれに、色などのスタイルを指定すれば、マウスにより動きのある
メニューを作成できる
http://www.geocities.jp/sako_sho_kei/test/index003.html
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body{
width:900px;
text-align:center;
}
/* ------------------------------
Hedder
------------------------------ */
.headder{
color:white;
background-color: blue;
}
.headder h1{
font-size:30pt;
text-align:center;
}
.headder h2{
color:skyblue;
font-size:12pt;
text-align:right;
padding-right:40px;
margin-top:35px;
margin-bottom:0.0em;
}
/* ------------------------------
Index
------------------------------ */
.index a{
color:yellow;
background:black;
float:left;
width:150px;
height:25px;
text-align:center;
}
.index a:hover{
color:black;
background:yellow;
}
.index ul{
margin:0px;
margin-top:2px;
padding:0px;
list-style-type:none;
}
div.index li{
float:left;
}
*/------------------------------ */
-->
</style>
</head>
<!-- HTML ------------------->
<body>
<div class="headder">
<h1>TEST_Page</h1>
<h2>by kazuban</h2>
</div>
<div class="index">
<ul>
<li><a href="./index001.html">Sample001</a></li>
<li><a href="./index002.html">Sample002</a></li>
<li><a href="./index003.html">Sample003</a></li>
<li><a href="#">Menu01</a></li>
<li><a href="#">Menu02</a></li>
<li><a href="#">Menu03</a></li>
</ul>
</div>
</body>
</html>
<Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.3; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CL...
