你能展示一下黑马程序员的html小兔鲜儿案例的电梯导航吗
时间: 2023-06-11 11:04:50 浏览: 92
当然可以展示!以下是代码和效果图:
HTML代码:
```html
<div class="elevator-nav">
<ul>
<li><a href="#part1">第一部分</a></li>
<li><a href="#part2">第二部分</a></li>
<li><a href="#part3">第三部分</a></li>
<li><a href="#part4">第四部分</a></li>
</ul>
</div>
```
CSS代码:
```css
.elevator-nav {
position:fixed;
z-index: 999;
top:50%;
left:20px;
transform: translateY(-50%);
}
.elevator-nav ul {
list-style:none;
padding:0;
margin:0;
}
.elevator-nav li {
margin-bottom:15px;
}
.elevator-nav li:last-child {
margin-bottom:0;
}
.elevator-nav a {
display:block;
padding:10px 15px;
background-color:#333;
color:#fff;
text-decoration:none;
text-align:center;
transition:background-color 0.2s ease-out;
}
.elevator-nav a:hover {
background-color:#f36;
}
```
效果图:
![电梯导航效果图](https://img-blog.csdn.net/20180115094955118?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmcxOTU3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/85)