1

メールクライアントを作成しています。受信トレイをMacMailの受信トレイに似せたいです。Macメール受信ボックス

私は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>

これまでのデザインのスクリーンショット

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>

意味的に意味がありません。From、subject、date、previewはリストではありません。電子メールメッセージはリストですが、電子メールコンポーネントはリストではありません。

あなたがすべきことは次のようなものです：

<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 に答える