核心提示：练习目的通过制作导航条,掌握CSS技术对盒子的隐藏和显示技术.完整代码HTML:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...
练习目的
通过制作导航条,掌握CSS技术对盒子的隐藏和显示技术.
完整代码
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HideAndShow</title>
</head>
<body>
<p id="row">
<a href="#">grass1<span id="tip1" class="tip">grass1</span></a>
<a href="#">grass2 <span id="tip2" class="tip">grass2</span></a>
<a href="#">cloud1<span id="tip3" class="tip">cloud1</span></a>
<a href="#">cloud2<span id="tip4" class="tip">cloud2</span></a>
<a href="#">word<span id="tip5" class="tip">word</span></a>
<a href="#">bubble<span id="tip6" class="tip">bubble</span> </a>
</p>
</body>
</html>
CSS:
<!--
a {
display: block;
background-color: #999999;
height: 30px;
width: 60px;
line-height: 30px;
text-decoration: none;
text-align: center;
float: left;
border: 1px solid #000000;
}
.tip{
display:none;
line-height: 200px;
position:relative;
background-image: url(image/DynMenu.jpg);
height: 200px;
width: 300px;
border-radius:0px 0px 5px 5px;
top: 4px;
}
a:hover{
background-color: #FF0000;
color: #FFFFFF;
position: relative;
top: 4px;
left: 2px;
}
a:hover #tip1 {
background-position: -48px -320px ;
display:block;
}
a:hover #tip2 {
background-position: -258px -321px ;
display:block;
}
a:hover #tip3 {
background-position: -7px -34px ;
display:block;
}
a:hover #tip4 {
background-position: -70px -103px ;
display:block;
}
a:hover #tip5 {
background-position: -489px -216px ;
display:block;
}
a:hover #tip6 {
background-position: -475px -8px ;
display:block;
}
-->
