Question

我该如何创建这样的东西：

enter image description here

我不想使用绝对定位，我需要一些模块化且易于使用的东西。我用谷歌搜索，但我不知道要搜索什么。

在投票之前，这只是尝试查看是否可以使用HTML创建。我真的很搜索，但我很无能

Answer 1

我没有时间全力以赴，但我想我可以用正确的方式指出你。免责声明：我可能在这方面有一些错误 - 没有经过测试或其他任何错误，我最近一直在使用其他语言。这是我的第一篇文章。

无论如何，我使用Javascript来做到这一点。使用Jquery，你甚至可以让它们移动一点。用HTML制作一个简单的链接列表：

<ul class="radialLinks">
    <li class="firefox"><a href="Firefox.com">Firefox.com</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li class="active"><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>

在CSS中

，设置链接样式并使用精灵替换图像。你说没有绝对的链接，但我猜你的牛肉与页面相关。无论如何，我做这样的事情：

.radialLinks { position: relative; height: 200px; width: 200px; }
.radialLinks a { position: absolute; height: 24px; width: 24px; text-indent: -9999px; background: transparent url('sprite.png') no-repeat 0 0; }
.radialLinks .active a { background-position: 0 -24px; }
// specific custom overrides
.radialLinks .firefox a { background-position: 0 -48px; }
.radialLinks .active.firefox a { background-position: 0 -72px; }

理想情况下，您可以使用类似SASS的内容来更轻松地创建图像替换等等。我还使用Compass来创建精灵。然后用Jquery定位它们：

$(function() {
        function radialLinks(){
            var radialLinks = $('radialLinks'),
                position = radialLinks.position(),
                size = radialLinks.height();

            var activeChild = radialLinks.find('.active'),
                childSize = activeChild.height(),
                children = radialLinks.find('li:not(.active)'),
                childCount = children.length,
                rotate = 360/childCount,
                rotateIndex = 0,
                radius = height/2 - childHeight/2,
                centerHeight = position.top + size/2,
                centerWidth = position.left + size/2;

            activeChild.position().top = centerHeight - childSize/2;
            activeChild.position().left = centerWidth - childSize/2;

            children.each(function( index ) {
                $this = $(this);
                $this.position().top = centerHeight + (radius * cos(rotate)) - childSize/2;
                $this.position().left = centerWidth + (radius * sin(rotate)) - childSize/2;
                rotateIndex += rotate;
            })

        }
    });

我没时间了，所以我必须用这些线条来填补，但我希望这会有所帮助。

使用看起来像附加图像的HTML或SVG创建列表

1 个答案: