Question

是否有人能够解释CSS和HTML标记如何寻找垂直新闻Feed设计，例如：http://dribbble.s3.amazonaws.com/users/41027/screenshots/619599/attachments/51139/TheSecret_Concept.png

我非常喜欢右侧带有文字的图标+线条。我知道CSS有内容属性我可以添加一个符号并使用边框作为垂直线，但我想知道如何使用图像/引导图标而不是在CSS中声明符号。

非常感谢任何提示或教程。

Answer 1

This is some truly horrific CSS, for which I should probably be shot, however, it seems to be vaguely something like you posted. That is; assuming this is what you were talking about.

Anyway, assuming you're talking about those little pieces of text by Zane David or whoever, with the icon on the side and a line running through the icons, here is my terrible attempt at doing it with an unordered list with modified bullets and an hr running through them. The

is definitely not the ideal option, however, I think the ul with li's with custom bullets is the right way to go. Excuse the leaves by the way.

http://jsbin.com/efiveq/1

If you completely ignore my horrible positioning and such, you should still be able to see that an unordered list is probably the best way to go.

Edit: switch out the code for .news-feed .well:after with:

.news-feed .well:after { content:""; position: absolute; top: 60%; left: 5px; border-top: 20px solid #A5A5A5; border-top-color: inherit; border-left: 20px solid transparent; border-right: 20px solid transparent; -webkit-transform: rotate(90deg);

}

Answer 2

你在这里问到的只需要几页来解释一些事情我可以建议你通过以下Youtube教程来学习如何用css处理图像观看这些视频并进行练习后，您可以设计出比您在问题中上传的图像中的元素更好的设计。

如果需要，您应该观看类似的视频：）

垂直新闻饲料设计

2 个答案: