Question

我正在使用我的HTML和CSS制作MSN.com网页的副本。我已经设法得到标题，除了搜索表单之外的所有内容。现在我知道如何制作表格，我只是不明白其中一个小作品是如何工作的

例如：

看下面的图片： http://gyazo.com/497d24dde39c04d9956c2faec4eb556f

您可以看到MSN（橙色部分）的位置，箭头/三角形位于其下方。我认为这个箭头是一个图像，对吗？你不能只通过CSS吗？

所以我想知道如何在第一个单词上设置一个默认箭头，然后重新定位到活动链接/文本。

请告诉我。感谢

Answer 1

像MSN一样使用的简单灰色箭头实际上可以使用CSS制作。要使其遵循所选链接，您需要使用JavaScript。别担心，这很简单。

首先，这是jsfiddle的实例： http://jsfiddle.net/EBhVu/23/

<强> HTML：

<a href="#" class="active">Web</a> 
<a href="#">MSN</a>
<a href="#">Images</a>

CSS：

这将构建小灰色箭头并将其置于所选链接

下

a  {
    position:relative;
}
a:active:after, a.active:after  {
    position:absolute;
    right:50%; /* Centers arrow */
    top:100%; /* Places arrow below link */
    content:" ";
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; /* Builds the arrow */
    border-right: 5px solid transparent;
    border-bottom: 5px solid grey;
}

JavaScript：

每次点击链接时，此JavaScript都会为点击的链接提供“活动”类

$('a').on('click',function(){
    $('a').removeClass('active'); 
    $(this).addClass('active'); 
});

仅在文本处于活动状态时显示图像

1 个答案: