와 사이 아래 부분을 넣습니다.
<head>와 </head> 사이 아래 부분을 넣습니다.
<STYLE>
.boxmae{
font-size : 12px;
text-align : center;
border: 1px solid #999999;
background-color : #F7F7F7;
padding : 3px;
position : relative;
width : 80px;
height : 21px;
left : 10px;
z-index : 1;
margin-bottom:-6;
}
.boxusiro{
font-size : 12px;
text-align : center;
border: 1px solid #999999;
background-color : #DDDDDD;
position : relative;
width : 80px;
height : 21px;
top : -10px;
left : 15px;
z-index : 0;
margin-bottom:-6;
}
</STYLE>
</head>
boxmae☜ 부분은 위테이블이고,boxusiro☜부분은
아래 그림자 부분입니다.위의 내용은 대강 이해가 가리라 생각됩니다.
<body>와 </body> 사이의 필요한 곳에 넣습니다.
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<DIV class="boxmae">
<p class="boxmae"><a HREF="#" onfocus='this.blur()'>메뉴①</a></DIV>
<br><br>
<DIV class="boxmae" onmouseover="this.style.backgroundColor='#999999';" onmouseout="this.style.backgroundColor='#F7F7F7';">
<p class="boxmae"><a HREF="#" onfocus='this.blur()'>메뉴②</a></DIV>
<br><br>
<DIV class="boxmae" onmouseover="this.style.backgroundColor='#999999';" onmouseout="this.style.backgroundColor='#F7F7F7';">
<p class="boxmae"><a HREF="#" onfocus='this.blur()'>메뉴③</a></DIV>
메뉴①은 아무런 효과가 없는 것이고 메뉴②,메뉴③은 마우스 오버효과가 있습니다.
'Html & Css' 카테고리의 다른 글
| 링크된 글자가 기울어져요. (0) | 2016.06.03 |
|---|---|
| 마우스를 올리면 글이 나타나요. (0) | 2016.06.03 |
| 하이퍼링크에 박스테두리만들기 (0) | 2016.06.03 |
| 원하는크기로 새창띄워주는 간단소스 2가지 (0) | 2016.06.03 |
| 자동으로 img border=0 넣기 (0) | 2016.06.03 |