垂直新聞源設計

Question

會有人能夠解釋如何在CSS和HTML標記會找一個垂直的新聞源設計，如：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。
一旦您觀看這些視頻並進行練習，您就能夠設計出比您在問題中上傳的圖片中的元素好得多的圖片。

• http://www.youtube.com/watch?v=GJ5CiFCpErE
• http://www.youtube.com/watch?v=QM6i5WglYbs
• http://www.youtube.com/watch?v=fpObCDzAOIU

你或許應該觀看類似視頻的IF NEEDED :)