[Web前端技术教学]盒子的隐藏和显示

最新推荐文章于 2024-08-02 22:44:35 发布

gCodeTop 格码拓普老师

最新推荐文章于 2024-08-02 22:44:35 发布

阅读量2.3k

点赞数

分类专栏： Html/CSS等前端技术文章标签：网页设计 web css 教学导航

本文链接：https://blog.csdn.net/vinglemar/article/details/53679174

版权

Html/CSS等前端技术专栏收录该内容

61 篇文章 0 订阅

订阅专栏

练习目的

通过制作导航条,掌握CSS技术对盒子的隐藏和显示技术.

完整代码

<!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=utf-8" />
<title>HideAndShow</title>
<style type="text/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;
}
-->
</style>
</head>

<body>
	<div 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> 
     </div>
</body>
</html>