用于邮件收件箱的CSS

我完全不熟悉CSS。但是我正在写一个邮件收件箱，它就像您典型的电子邮件收件箱，其中包含From，Subject，Received 3列。用于邮件收件箱的CSS

我可以得到一些基本的CSS正确格式化该数据（排列，columning，等等），我可以建立在。

任何酷有趣的设计也欢迎。

2009-04-25 alamodey

我觉得这是其中<table>布局实际上是正确的布局的少数情况之一。这是很好的，你认为浮动的div来执行这种风格的布局，但事实是你显示数据的table，其中<table>标签的唯一有效使用剩余。这也为您提供了具有均匀间隔的列的好处。

来源

2009-04-25 03:12:45 bendewey

下面的是一些三栏布局，我会相信：

http://www.alistapart.com/articles/holygrail
http://designshack.co.uk/gallery/layout/3column/（这其中有灵感一些例子）
http://matthewjamestaylor.com/blog/perfect-3-column.htm

老实说，虽然，而这些“可以“工作，你可能想用一张桌子。喘气是，一张桌子，一台是最语义正确的选择把表格数据与重复列。当然，也有很多的Javascript选择做表格数据为好。 Flexigrid is a good one worth considering.

来源

2009-04-25 02:41:56 cgp

对于格式化电子邮件列，这些看起来并不合适。 – 2009-04-25 02:49:44

你不是在开玩笑，我只看到了三列布局，进入了机器人模式。 – cgp 2009-04-25 03:07:34

你可以找到几乎SmashingMagazine所有基于网格的设计让你开始：

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

这里还有可供您选择了很多CSS布局的：

http://layouts.ironmyers.com/

来源

2009-04-25 02:45:21 rymn

我在哪里提到我想要一个基于网格的设计？ – 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>

来源

2009-04-25 19:28:31 Phunky

我几乎必须与<table> suggetions同意，因为这是它是什么。或你可能会认为它是<ol>。

我不知道什么样的'酷'设计适合于电子邮件收件箱，因为他们大多会弄乱用户的期望，或者我不够明亮，不足以重写功能性用户界面。另外，我认为大多数reworks会改变MVC的控制层，而不是M或V.

话虽如此......也许类似iTunes的艺术家/专辑的更新演示文稿可以工作吗？但我不得不暗示这是一个坏主意。

来源

2009-04-26 09:49:17

从我与创建收件箱的经验，你应该截断长主题行作为必要的，这样列宽度将不移动或等

$message = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"; 
if(strlen($message) > 10) 
$message = substr($message, 0, 10); 
echo $message."...";

这将显示主题为WWWWWWWWWW...代替。

来源

2012-04-05 03:08:47

用于邮件收件箱的CSS

回答

相关问题