Question

是否可以制作圆形导航器？例如，一个圆分为4个，每个分区上有不同的链接？

并且如果有可能我可以在它们上放动画或鼠标悬停时颜色变化吗？ TNX ...

Answer 1

使用border-radius

<强> HTML

<div id="circle-container">
<div class="quarter top-left"><a href="#">link 1</a></div>
<div class="quarter top-right"><a href="#">link 2</a></div>
<div class="quarter bottom-left"><a href="#">link 3</a></div>
<div class="quarter bottom-right"><a href="#">link 4</a></div>
</div>

<强> CSS

#circle-container{width:100px;height:100px}
.quarter{width:50px;height:50px}
.top-left{border-top-left-radius:50px;background:#e3f9d1;float:left}
.top-right{border-top-right-radius:50px;background:#c0f7f7;float:right}
.bottom-left{border-bottom-left-radius:50px;background:#fc92f5;float:left}
.bottom-right{border-bottom-right-radius:50px;background:#333;float:right}
a{
 text-decoration:none;
    color:red;
    width:50px;
    line-height:50px;
    display:block;
    text-align:center
}

<强> DEMO

在html中制作一个圆形导航器

1 个答案: