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

Question

我怎样才能创建这样的东西：

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

在否决投票之前，这只是尝试看看是否可以使用 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;
            })

        }
    });

我没时间了，所以我必须用底线踢球，但我希望这会有所帮助。