Question

我是一个从榜样中学到最好的人。目前，在开发桌面应用程序十五年后，我正在进入Web开发领域。我仍然习惯于用于开发现代网站的所有网络技术以及我看到的任何地方，我看到很酷的小UI元素，并且不知道它们是如何实现的。所以我想我会问你，网络专家...... wexperts：）

您可以通过哪些直接或创造性的方式编写SO突出显示的按钮轮廓效果（如下所示）......

The SO Highlighted button outline effect http://people.ict.usc.edu/~crotchett/images/outline.jpg

随意提供示例代码或高级解释，其中包括所涉及的各种技术（HTML，CSS，Javascript等）。

CSS将如何发挥作用？
您可以使用JQuery轻松实现吗？ GWT？

非常感谢您提供所有帮助！

Answer 1

如果您正在谈论将鼠标悬停在标签上时标签的更改方式，则完全使用CSS完成。使用：hover伪类，网站将背景设置为白色，并将顶部三边的边框颜色更改为黑色，底部的边框颜色更改为白色。

我怎么知道这个？ Firebug Firefox插件。它允许您轻松检查DOM，调试javascript，并查看各种页面元素的CSS样式。如果您通过示例学习最好，Firebug将会有很多帮助。

具体来说，“#tabs a”元素（作为ID为“tabs”的元素的后代的锚点）具有以下相关样式：

#tabs a:hover {
    background:#FFFFFF none repeat scroll 0 0;
    border-color:#777777 #777777 #FFFFFF;
    border-style:solid;
    border-width:1px;
}

#tabs a {
    background:#EEEEEE none repeat scroll 0 0;
    border:1px solid #EEEEEE;
}

（我可能会遗漏一些实际上重要的变化，但这些变化都是基础。

Answer 2

如果你想要实现的栏是橙色工具栏，那么你可以在div中设计一个div里面的栏，就像你一样，然后你可以看到我做了display none会隐藏div元素。然后，一旦你有了想要放入这个工具栏的内容，就可以轻松地使用jQuery来说明

$（'＃flash-notice'）。text（“要放入flash通知的文字”）。show（）。fadeOut（5000）;

这将设置文本，将显示设置为块以显示flash div，然后您可以添加fadeOut等功能以使工具栏淡出。

如果这有用，请告诉我，如果需要，我可以提供更多详细信息。使用的工具：HTML，CSS（任何版本都很好）和jQuery。

Answer 3

使用内容制作div并将其隐藏（css）。然后当事件触发时，您可以将其显示出来。

让[x]触发隐藏div的点击事件。

使用show（）和hide（）的jQuery可以工作。

Answer 4

您可以使用JQuery轻松实现吗？ GWT？

您可以查找JQuery工具的Tab解决方案：http://flowplayer.org/tools/demos/tabs/ajax.html

取自他们的网站：

HTML：

<!-- tabs --> 
<ul class="css-tabs"> 
    <li><a href="ajax1.htm">Tab 1</a></li> 
    <li><a href="ajax2.htm">Second tab</a></li> 
    <li><a href="ajax3.htm">An ultra long third tab</a></li> 
</ul> 

<!-- panes --> 
<div class="css-panes"> 
    <div style="display:block"></div> 
    <div></div> 
    <div></div> 
</div>

JS：

$(function() { 

    $("ul.css-tabs").tabs("div.css-panes > div", function(i) { 

        // get the pane to be opened 
        var pane = this.getPanes().eq(i); 

        // if it is empty .. 
        if (pane.is(":empty")) { 

            // load it with a page specified in the tab's href attribute 
            pane.load(this.getTabs().eq(i).attr("href")); 
        } 

    }); 

});

Answer 5

您可能会发现以下A List Apart文章很有趣，它讨论了一些可用于使用HTML和CSS创建标签效果的技术 -

Sliding Doors of CSS

Answer 6

jQuery UI Tabs做你想做的事。

你会如何编码：SO突出显示按钮轮廓效果

6 个答案: