实现滑动门的效果，自适应内容的宽度。
代码：
<style>
*{
margin: 0;
padding: 0；
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
body{
background: #23232f;
padding: 100px;
}
.navLeft{
float: left; /*通过加浮动，让父元素的高度由子元素的内容撑开*/
background: url(image/bgLeft.png) #0f0f14 no-repeat;
}
.navRight{
float: left;
background: url(image/bgRight.png) no-repeat right 0;
padding: 4px 4px 0 3px;
}
.navRight li{
float: left;
margin-left: 1px;
}
.navRight a{
float: left;
background: url(image/btnLeftCen.png) no-repeat;
}
.navRight span{
height: 31px;
line-height: 31px;
float: left;
background: url(image/btnRight.png) no-repeat right 0;
padding:0 18px;
}
.navRight a:hover ,.navRight .active{
background-image: url(image/hoverLeftCen.png);
}
.navRight a span:hover,.navRight .active span{
background-image: url(image/hoverRight.png);
}
</style>
</head>
<body>
<div class="navLeft">
<ul class="navRight">
<li>
<a href="slideDoor.html" class="active">
<span>首页</span>
</a>
</li>
<li>
<a href="slideDoor2.html">
<span>项目一</span>
</a>
</li>
<li>
<a href="slideDoor3.html">
<span>项目项目</span>
</a>
</li>
<li>
<a href="slideDoor4.html">
<span>项目项目一</span>
</a>
</li>
</ul>
</div>
</body>
扫一扫
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
