1

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

我正在使用 ajax（输出到 XML）从数据库中提取电子邮件本身，然后遍历条目并提取相关元素。

我从来没有信心的是css。我想使用<ul>and创建元素<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>

到目前为止的设计屏幕截图

4

1 回答 1

5

好的，首先

<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-15T03:17:38.487 回答