Html
    Css
    Js
* {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;
}
ul,li {
	list-style:none;
}
a {
	color:#666;
	text-decoration:none;
	cursor:pointer;
}
div {
	/* css3盒子模型 */
				box-sizing:border-box;
}
.tab {
	width:1200px;
	height:45px;
	line-height:45px;
	position:relative;
	top:200px;
	text-align:center;
	margin:0 auto;
}
.tab a {
	display:inline-block;
	position:relative;
	font-size:14px;
	margin-right:10px;
	padding:0px 10px;
	cursor:pointer;
	color:#333;
	overflow:hidden;
	box-sizing:border-box;
	-webkit-transition:0.4s ease-in-out;
	-moz-transition:0.4s ease-in-out;
	transition:0.4s ease-out;
}
.tab a.active {
	color:#007bff;
	font-weight:700;
}
.tab a:after {
	position:absolute;
	content:"";
	bottom:0;
	left:0;
	width:0;
	border-bottom:2px solid transparent;
}
.tab a.active:after,.tab a:hover:after {
	width:100%;
	border-bottom-color:#007bff;
	transition:border-color .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

动态导航背景

更新时间:2022-04-28 01:01:47

0