css 遇见问题2 未解决

记录杂文

于 2020-06-04 19:15:09 发布

分类专栏： html 问题系列

本文链接：https://blog.csdn.net/ShenYouRong/article/details/106556227

版权

html 问题系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css中修改 /*.content .html5img{
display: block;
}
*/结果不一样

<!DOCTYPE html>
<html>
<head>
	<title>选项卡</title>
	<link rel="stylesheet" type="text/css" href="../css/tabControl.css">
	<script src="../jQuery/jquery-3.5.1.js"></script>
</head>
<body>
	<div class="box">
		<ul class="nav">
			<li  class="currentColor">
				html5
			</li class="">
			<li>
				jquery
			</li>
			<li class="">c语言</li>
			<li class="">Go语言</li>
		</ul>
		<ul class="content">
			<li class="html5img"><img class="showImg" src="../../img/html5.jpg"></li>
			<li class="jqueryimg"><img class="showImg" src="../../img/html5.jpg"></li>
			<li class="c语言img"><img class="showImg" src="../../img/html5.jpg"></li>
			<li class="Go语言mg"><img class="showImg" src="../../img/html5.jpg"></li>
		</ul>
	</div>
	<script src="../js/tabControl.js"></script>
</body>
</html>

*{

	margin: 0;
	padding: 0;

}
.box{
	width: 400px;
	height: 200px;
	border: 1px solid #000;
	margin: 20px auto;

}
ul{
	
}
.nav li{
	float:left;
	display: inline-block;
	list-style: none;
	width: 100px;
	text-align: center;
	line-height: 20px;
	border: 1px solid blue;
	box-sizing: border-box;
	margin: 0px;
	background-color: red;


}
.content{
	width: 400px;
	height: 180px;
	background: blue;
}
.content li{

	list-style: none;
	/*display: inline-block;*/
	width: 400px;
	height: 180px;
	overflow: hidden;
	display: none;
}

.currentColor{
	background-color: #ccc;
}
.content .html5img{
	display: block;
}