在过去的4个小时中,我一直在努力。尝试了所有内容,但我无法复制此导航栏。



该导航栏具有这样的HTML;

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        @for($i = 0; $i <= 2; $i++) <!-- below loops 3 times for testing purposes -->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                      //Styling goes here.
                </a>

                <ul class="dropdown-menu">
                    <li><a href="#">Sublink</a></li>
                </ul>
            </li>
        @endfor
    </ul>
</div><!-- /.nav-collapse -->


它是这样的:


li标记本身具有透明的圆形背景。 (例如<li class="blue">带有蓝色圆圈)
在那些圆圈背景上放置的透明房子图标。 (他们需要以圈子为中心,可能需要一些利润率黑客攻击?)
Konut是菜单名称,表示House(类型无关紧要,我尝试使用h4span
以下数字是列表总数。 (基本上是一个跨度)


我将导航栏重写了10次。尝试使用块模型图像块div,内嵌块div,边距hack,相对定位,绝对定位,使用盒模型...我真的要扯头发了。

The live version can be found here(我对他们的风格不太了解)

谁能给我一个JsFiddle示例或告诉我我应该怎么做?还是我的HTML标记有问题?

谢谢。

附言如果有问题,我会使用Bootstrap 3。

最佳答案

在没有看到您的代码的情况下,您应该执行以下操作:

您需要制作一个正确的Spritesheet。请注意,原始元素的距离与导航栏的高度一样。这不是强制性的,但可以解决可能出现的垂直定位/裁剪问题。

就像你说的那样:


li标签本身具有透明的圆形背景。 background-position derived from class
在那些圆圈背景上放置的透明房子图标。 background-position + padding
Konut是菜单名称,表示House nothing special here
以下数字是列表总数。 also nothing special here, just be careful to position it properly


这只是您需要了解的事情列表。一旦知道您到目前为止所做的一切,我就会扩大答案。

当然,如果您不想使用Spritesheet,而是使用单独的图像,那也可以。唯一的区别是,您将通过它们的URL指定背景图像,而您提供给我们的网站是通过其子画面位置指定它们。

10-05 20:41
查看更多