我有这个HTML代码:
<ul class="nav">
<li id="home" class="active""><a href="/">Home</a></li>
<li id=""><a href=""></li>
</ul>
我想将“活动”类形成为附加图像中附加的活动类。
我试过了:
.active{
border-radius:60%;
padding:0 10px;
}
以及更多其他css属性,但我无法得到它。
答案 0 :(得分:0)
您可以将css
样式应用于链接元素,将其设置为显示块级元素,并将border-radius
设置为固定像素。
ul li {
display: inline-block;
}
.active a{
display: block;
border-radius:15px;
padding: 10px;
background: #ccc;
}
.active a:hover{
background: #ff0000;
}
<ul class="nav">
<li id=""><a href="">Link 01</a></li>
<li id=""><a href="">Link 02</a></li>
<li id=""><a href="">Link 03</a></li>
<li id="home" class="active"><a href="/">Home</a></li>
</ul>
答案 1 :(得分:0)
在像素中使用border-radius
值,该值至少等于高度的一半(包括填充):
li {
list-style: none;
display: inline-block;
}
.active{
border-radius: 15px;
padding: 3px 15px 0px;
background: #fb9;
margin-right: 20px;
}
a {
text-decoration: none;
}
&#13;
<ul class="nav">
<li id="home" class="active"><a href="#">Home</a></li>
<li id="x"><a href="#">Something else</a></li>
</ul>
&#13;
答案 2 :(得分:0)
您必须在活动类上为您的偏好编写样式。
.active{
background:xx;
border-radius:xx;
padding:xx;
}
活动类的颜色在附加图像中类似于蓝色。所以文字颜色应该是黑色或任何深色。这样客户就可以轻松查看。它具有良好的用户体验。