CSS的电子邮件客户端的收件箱

我创建一个电子邮件客户端，我想在收件箱中表现得像是Mac的邮件 Mac Mail Inbox CSS的电子邮件客户端的收件箱

我使用AJAX（输出到XML）拉动电子邮件本身从一个数据库，然后通过循环参赛作品并拉动相关元素。

我从来没有信心的是CSS。我想使用<ul>和<li>来创建元素。我的理解是我需要嵌套这些。例如：

<ul> 
<li> 
    <ul> 
     <li class="from">Mike @ Hotmail</li> 
     <li class="subject">Hello</li> 
     <li class="date">13/01/2013</li> 
     <li class="preview">Lorem Ipsum....</li> 
    </ul> 
</li> 
<li> 
    <ul> 
     <li class="from">Jame @ Gmail</li> 
     <li class="subject">Out Of Office</li> 
     <li class="date">12/01/2013</li> 
     <li class="preview">Lorem Ipsum....</li> 
    </ul> 
</li>

.from { 

} 

.subject { 

} 

.date { 

} 

.preview { 

}

什么我不知道的是我是否需要在CSS中引用的<ul>和<li>项目，这是否有所作为？另外，我需要什么来创造这种外观？

请不要回答这个问题。我想我已经努力了。当我对这一结果我会张贴在这里为别人工作在将来快乐......

好吧，我放弃了，这是我到目前为止有：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.inboxPanel { 
    width: 420px; 
} 

ul.inbox { 
    width: 100%; 
    list-style-type: none; 
} 

ul.message { 
    list-style-type: none; 
    display: block; 
} 

.from { 
    width: 50%; 
    border: 1px solid #ccc; 
    font-weight: 700; 
    float: left; 
    display: inline-block; 
} 

.subject { 
    border: 1px solid #ccc; 
} 

.date { 
    width: 50%; 
    border: 1px solid #ccc; 
    float: right; 
    display: inline-block; 
} 

.preview { 
    border: 1px solid #ccc; 
} 
</style> 
<title></title> 
</head> 

<body> 
<div class="inboxPanel"> 
    <ul class="inbox"> 
     <li> 
      <ul class="message"> 
       <li class="from">Mike @ Hotmail</li> 

       <li class="subject">Hello</li> 

       <li class="date">13/01/2013</li> 

       <li class="preview">Lorem Ipsum....</li> 
      </ul> 
     </li> 

     <li> 
      <ul class="message"> 
       <li class="from">Jame @ Gmail</li> 

       <li class="subject">Out Of Office</li> 

       <li class="date">12/01/2013</li> 

       <li class="preview">Lorem Ipsum....</li> 
      </ul> 
     </li> 

     <li> 
      <ul class="message"> 
       <li class="from">Mike @ Hotmail</li> 

       <li class="subject">Hello</li> 

       <li class="date">13/01/2013</li> 

       <li class="preview">Lorem Ipsum....</li> 
      </ul> 
     </li> 

     <li> 
      <ul class="message"> 
       <li class="from">Jame @ Gmail</li> 

       <li class="subject">Out Of Office</li> 

       <li class="date">12/01/2013</li> 

       <li class="preview">Lorem Ipsum....</li> 
      </ul> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

screen shot of design so far

来源

2013-01-15 Mike

好吧，首先

<ul> 
    <li class="from">Mike @ Hotmail</li> 
    <li class="subject">Hello</li> 
    <li class="date">13/01/2013</li> 
    <li class="preview">Lorem Ipsum....</li> 
</ul>

是没有意义的语义。从，主题，日期和预览不是一个列表。您的电子邮件是一个列表，但电子邮件组件不是。

你应该做的是这样的：

<ul> 
    <li> 
     <span class="from"></span> 
     <span class="date"></span> 
     <p class="subject></p> 
     <p class="preview"></p> 
    </li> 
<ul>

CSS：

li { overflow: hidden; } 
li span.from { float: left; font-weight: bold; } 
li span.date { float: right; } 
li p.subject { clear: both; font-weight: bold; } 
li p.preview { color: #ccc; }

这只是粗略的造型使布局看你想要的方式。你必须调整它适当的填充，颜色等。

来源

2013-01-15 03:17:38 petermk

+1正确的语义标记第一，css第二 – MushinNoShin

谢谢！这是一个完美的答案。 – Mike

CSS的电子邮件客户端的收件箱

回答

相关问题