在过去的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
(类型无关紧要,我尝试使用h4
和span
)以下数字是列表总数。 (基本上是一个跨度)
我将导航栏重写了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指定背景图像,而您提供给我们的网站是通过其子画面位置指定它们。