选项卡切换

最新推荐文章于 2022-11-28 10:15:50 发布

我的哥哥呦

最新推荐文章于 2022-11-28 10:15:50 发布

阅读量91

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_20497071/article/details/94330304

版权

HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
<style>
body{
	margin:0px;
	}
	.tab{
		width:910px;
		height:400px;
		margin:100px auto;
		font-size:0;
		}
		.tab span{
			box-sizing:border-box;/*怪异盒模型*/
			display:inline-block;
			width:182px;
			height:40px;
			border-top:1px solid transparent;
			background-color:#e3e2e2;
			font-size:14px;
			text-align:center;
			line-height:40px;
			}
				.tab span:hover{
					color:red;
					background-color:white;
					border-top:3px solid #FF0;
					}
					.pic{
						
						height:360px;
						background-image:url(QQ%E6%88%AA%E5%9B%BE20190630142117.png);
						background-repeat:no-repeat;
					    background-size:910px 360px;;
						transition:0.5s;
						}
						/*background-position:0 0;背景图片的位置定位*/
	/*~代表兄弟关系*/				.tab span:nth-child(2):hover ~ .pic{
						background-image:url(224751-15284692719a6e.jpg);
		}				
		.tab span:nth-child(3):hover ~ .pic{
						background-image:url(QQ%E6%88%AA%E5%9B%BE20190630142117.png);
		}
		.tab span:nth-child(4):hover ~ .pic{
						background-image:url(QQ%E6%88%AA%E5%9B%BE20190630142117.png);
		}
									
											
</style>
</head>

<body>
<div class="tab">
	<span>终极连击，点击一下</span>
    <span>终极连击，点击一下</span>
    <span>终极连击，点击一下</span>
    <span>终极连击，点击一下</span>
    <span>终极连击，点击一下</span>
    <div class="pic"></div>
</div>
</body>
</html>

我的哥哥呦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡切换

<!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...
复制链接

扫一扫

专栏目录