Question

我正在创建一个电子邮件客户端，我希望收件箱类似于Mac Mail {0}}

我使用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>

Mac Mail Inbox

Answer 1

好的，首先

<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; }

这只是粗略的样式，使布局看起来像你想要的方式。你必须调整它以获得适当的填充，颜色等。

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

1 个答案: