我完全不熟悉CSS。但是我正在寫一個郵件收件箱,它就像您典型的電子郵件收件箱,其中包含From,Subject,Received 3列。用於郵件收件箱的CSS
我可以得到一些基本的CSS正確格式化該數據(排列,columning,等等),我可以建立在。
任何酷有趣的設計也歡迎。
我完全不熟悉CSS。但是我正在寫一個郵件收件箱,它就像您典型的電子郵件收件箱,其中包含From,Subject,Received 3列。用於郵件收件箱的CSS
我可以得到一些基本的CSS正確格式化該數據(排列,columning,等等),我可以建立在。
任何酷有趣的設計也歡迎。
我覺得這是其中<table>
佈局實際上是正確的佈局的少數情況之一。這是很好的,你認爲浮動的div來執行這種風格的佈局,但事實是你顯示數據的table
,其中<table>
標籤的唯一有效使用剩餘。這也爲您提供了具有均勻間隔的列的好處。
下面的是一些三欄佈局,我會相信:
老實說,雖然,而這些「可以「工作,你可能想用一張桌子。 喘氣是,一張桌子,一臺是最語義正確的選擇把表格數據與重複列。當然,也有很多的Javascript選擇做表格數據爲好。 Flexigrid is a good one worth considering.
你可以找到幾乎SmashingMagazine所有基於網格的設計讓你開始:
http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/
這裏還有可供您選擇了很多CSS佈局的:
我在哪裏提到我想要一個基於網格的設計? – alamodey 2009-04-25 02:58:56
您試圖顯示錶格數據,所以要真正使用的表。
雖然你也可以使用div的和浮動他們都在同一方向上實現同樣的事情,如下圖所示
<style>
.clear {clear:both}
#wrapper {width:500px; padding:2px; border:5px solid #000;}
#wrapper .row {border:1px solid #000;}
#wrapper .col {min-width:100px; border-right:1px solid #000; float:left;}
</style>
<div id="wrapper">
<div class="row">
<div class="col">From</div>
<div class="col">Subject</div>
<div class="col">Date</div>
<div classs="clear"></div>
</div>
</div>
我幾乎必須與<table>
suggetions同意,因爲這是它是什麼。 或你可能會認爲它是<ol>
。
我不知道什麼樣的'酷'設計適合於電子郵件收件箱,因爲他們大多會弄亂用戶的期望,或者我不夠明亮,不足以重寫功能性用戶界面。另外,我認爲大多數reworks會改變MVC的控制層,而不是M或V.
話雖如此......也許類似iTunes的藝術家/專輯的更新演示文稿可以工作嗎?但我不得不暗示這是一個壞主意。
從我與創建收件箱的經驗,你應該截斷長主題行作爲必要的,這樣列寬度將不移動或等
$message = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW";
if(strlen($message) > 10)
$message = substr($message, 0, 10);
echo $message."...";
這將顯示主題爲WWWWWWWWWW...
代替。
對於格式化電子郵件列,這些看起來並不合適。 – 2009-04-25 02:49:44
你不是在開玩笑,我只看到了三列布局,進入了機器人模式。 – cgp 2009-04-25 03:07:34