HTML + CSS中的時間線示例，如Facebook的時間軸

我正在嘗試創建類似於Facebook時間軸的時間軸，即，我想要一個帶兩列的時間軸，可以將元素放置在左側和右側。HTML + CSS中的時間線示例，如Facebook的時間軸

爲了做到這一點，我開始用下面的代碼，但預期它不工作：

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
    <meta charset="UTF-8" /> 
    </head> 
    <body> 
    <ul> 
     <li>Test 123</li> 
     <li style="float:left">Foobar</li> 
     <li>Another test</li> 
    </ul> /*This line was missing*/ 
    </body> 
</html>

中間的元素不顯示在左側的是旁邊的最後一個元素漂浮到中間一個。

有人知道如何創建一個類似於facebooks的時間表嗎？

來源

2012-08-24 Stefan

您是否嘗試過使用諸如IE Developer Tools或Firebug等工具檢查Facebook時間軸本身的HTML和CSS？ –

http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html –

@Richard任何理智的人甚至都不應該考慮走近Facebook的HTML。這確實是非常可怕的。 – Bojangles

沒有用於創建timline檢查出來http://timeline.verite.co/

來源

2012-08-24 10:27:23

由於我想要一個非常基本的/ lightwight解決方案，我不想使用JS。 – Stefan

似乎是一個非常簡單的解決方案給我一個JavaScript工具！只要在你的編輯中推薦它。再幫助剛剛問

<html> 
<head> 
    <title></title> 
</head> 

<style> 
body { 
    margin:0px; 
} 
.wrap { 
    width:600px; 
    height:100%px; 
    background:grey; 
    margin:auto; 
} 
.left{ 
    margin-left:0px; 
    width:290px; 
    height:200; 
    background-color:blue; 
} 
.right { 
    margin-left:310px; 
    width:290px; 
    height:200; 
    background-color:red; 
} 
</style> 

<body> 

<div class="wrap"> 

    <div class="left"></div> 
    <div class="right"></div> 
    <div class="left"></div> 
    <div class="right"></div> 

</div> 

</body> 
</html>

如果你想要的風格，它只是學習如何做的CSS形狀

.right { 
    width: 290px; 
    height: 300px; 
    margin-left:315px; 
    background: purple; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
} 
.right:before { 
    content:""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent; 
    border-right: 10px solid purple; 
    border-bottom: 7px solid transparent; 
    margin: 13px 0 0 -10px; 
}

來源

2012-08-24 11:20:28 user1616846

我還想爲每個條目在左/右上添加一條帶子彈的垂直線條，因爲它是在Facebook時間軸中完成的。用ul/li元素不是那麼容易嗎？或者相反，你如何在解決方案中做到這一點？ – Stefan

你想我只是基本上覆制Facebook的時間線 – user1616846

@Stefan我已經添加了一種風格。只要學習如何在CSS中做一些形狀。這非常簡單。這只是一個靜態的方法來做到這一點。如果你想學習一種動態的方式，你將不得不從這個網站獲取JavaScript。http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html – user1616846

Facebook的設計師使用了以下策略：

<ol> 
    <li class="twoCol" data-side="l|r"> 
      your box 
     <i></i> 
    </li> 
</ol>

的模樣

LI { 
    display: block; 
    margin-bottom: 15px; 
    position: relative; 
    z-index: 2; 
} 

LI[data-side="l"] { 
    clear: left; 
    float: left; 
} 

LI[data-side="r"] { 
    clear: right; 
    float: right; 
} 

.twoCol[data-side="l"] I { 
    background-image: url("..."); 
    background-position: -790px -4px; 
} 
.twoCol[data-side="r"] I { 
    background-image: url("..."); 
    background-position: -770px -4px; 
} 

.twoCol I { 
    background-repeat: no-repeat; 
    background-size: auto auto; 
    left: auto; 
    right: -18px; 
} 

I { 
    height: 15px; 
    left: -18px; 
    position: absolute; 
    top: 20px; 
    width: 19px; 
    z-index: 3; 
} 

.twoCol[data-side="l"] + .twoCol[data-side="r"] > I, 
.twoCol[data-side="r"] + .twoCol[data-side="l"] > I { 
    top: 40px; 
}

我解釋了它是如何工作的here

來源

2012-09-22 10:28:24

HTML + CSS中的時間線示例，如Facebook的時間軸

回答

相關問題