HTML 和 CSS twitter/Facebook 供稿

Question

客户要求我在网站上制作一个与此完全相同的提要。

我有徽标等，因为它是在 photoshop 文档中提供的。

有人愿意帮忙吗？

IT 将进入 <div class="col-lg-3">

然后我需要回答的是，我该如何制作 Feed（我猜它只是一个 API 但我不知道如何添加徽标，我也不知道它是否是 API，它可能是 RSS 提要？我还是不知道如何添加徽标。）

以及如何添加自定义滑块？

这就是我需要的样子

萨姆

Answer 1

Twitter 和 Facebook 都提供了很多 API 和嵌入，您只要掌握一些知识就可以开始工作。但是，由于您没有任何代码，我们无法剖析您尝试过的内容。您是否尝试过搜索选项？有很多！我会调查 TintUp, Juicer and the one I personally used, which looks a lot like your example... FeederNinja.

Answer 2

由于滑块用于用户输入，因此它使用与其他输入标签相同的语法。这个标签的类型虽然是 "range"

<input type="range" />

前面的代码片段应该足以显示滑块，但此标签有更多您可以使用的属性。让我们设置值的范围（最大值和最小值）。

<input type="range"  min="0" max="100" />

现在用户可以选择 0 到 100 之间的任意数字。

滑块的默认值为零，但如果您给它一个不同的值，当浏览器呈现代码时，图钉将定位在该值。下一个代码会将图钉定位在条形两端之间的中间位置。

<input type="range" min="0" max="50" value="25" />

如果您只想让人们以 5 为间隔选择值怎么办？这可以使用 step 属性轻松完成。

<input type="range" min="0" max="50" value="25" step="5" />

用户如何知道他们选择的值是多少？这是一个很好的问题，答案是您必须想出自己的解决方案。这是一个简单的 javascript 代码，它会在您滑动时显示滑块的值。

<html>
<body>
<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
    document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>

这应该会呈现这个（如果您的浏览器支持）

HTML 和 CSS twitter/Facebook 供稿

HTML and CSS twitter/Facebook feed

html

css

api

rss

facebook