我今天看到一个页面,其中有一些细节,我发现它非常整洁。
http://www.songkick.com/feedback
如果你看一下右上角,你会看到:
我试图检查元素,这是如何完成的,但我只得到这段代码:
<a href="/feedback">We <strong><span>love</span></strong> feedback</a>
神奇在哪里?我没有看到对心脏或其他图片的引用。心从何来?
最佳答案
打开Firebug .然后右键单击心脏图像并单击上下文菜单中的“检查元素”。
如果您在 Firebug 的 HTML 或 CSS View 中,那么在右侧的小 Pane 中,它将显示 CSS 规则,如下(从 Firebug 复制):
#header #header-nav ul #feedback strong {
background-image: url("http://www2.sk-static.com/images/layout/heart-small.png?20110728085037");
background-position: 0 2px;
background-repeat: no-repeat;
display: inline-block;
height: 10px;
width: 10px;
}
所以,background-image
是“心”。
快乐编码。
要回答“‘爱’去哪儿了?”,请单击 <span>love</love>
在 HTML View 中(上面的方法没有选中它,大概是因为它被隐藏了):
#header #header-nav ul #feedback strong span {
display: none;
}
Computed 选项卡也有助于查看实际应用的规则。
关于html - 这个网页上的 "heart"是如何用 html/css/或其他什么完成的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6869063/