写一个垂直列表只占页面的百分之二十,且为椭圆形,列表有以下几项亚洲,欧洲,美洲,非洲,大洋洲,南极洲,当鼠标放上去产生变化
时间: 2024-05-13 10:17:37 浏览: 10
可以使用CSS来实现垂直列表只占页面的百分之二十,且为椭圆形,以及鼠标放上去产生变化的效果。下面是示例代码:
HTML代码:
```
<div class="list">
<ul>
<li>亚洲</li>
<li>欧洲</li>
<li>美洲</li>
<li>非洲</li>
<li>大洋洲</li>
<li>南极洲</li>
</ul>
</div>
```
CSS代码:
```
.list {
width: 20%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #333;
border-radius: 50%;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
padding: 20px;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
}
li:hover {
background-color: #555;
}
```
解释一下上面的代码:
- 使用一个固定宽度为20%、高度为100vh的div作为容器,并设置为圆形。
- 在容器内部添加一个ul列表,并去除默认样式。
- 设置li元素的样式,包括内边距、颜色、字号、鼠标指针为手型。
- 当鼠标悬停在li元素上时,改变其背景色。
这样就可以实现一个垂直列表只占页面的百分之二十,且为椭圆形,且鼠标放上去产生变化的效果。