-2

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

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

任何提示或教程将不胜感激。

4

2 回答 2

1 

这是一些真正可怕的 CSS，我可能应该为此开枪，但是，它似乎有点像你发布的内容。那是; 假设这就是你所说的。



无论如何，假设您正在谈论 Zane David 或其他任何人的那些小文本，图标在侧面，并且有一条线穿过图标，这是我用修改过的项目符号和一个无序列表来做这件事的可怕尝试hr 穿过它们。这
绝对不是理想的选择，但是，我认为带有 li 和自定义子弹的 ul 是正确的选择。顺便原谅叶子。



http://jsbin.com/efiveq/1



如果您完全忽略我可怕的定位等，您仍然应该能够看到无序列表可能是最好的方法。



编辑：切换 .news-feed .well:after 的代码：


.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);

}

于 2013-02-24T07:46:14.173 回答
0

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

如果需要，您可能应该观看类似的视频 :)

于 2013-02-24T08:04:34.190 回答