3

我正在制作一份 MSN.com 网页的副本，用于练习我的 HTML 和 CSS。我设法获得了标题，以及它上面的所有内容，除了搜索表单。现在我知道如何制作表格了，我只是不明白其中一个小部件是如何工作的

例如：

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

您可以看到它显示 MSN（橙色部分）的位置，箭头/三角形位于其正下方。我假设这个箭头是图像，对吗？你不能只通过 CSS 实现它吗？

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

请告诉我。谢谢

4

1 回答 1

2

像 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'); 
});
于 2013-02-10T22:41:36.237 回答