AddressBook喜欢Outlook

Question

我想实现一种类似于Outlook中的AddressBook，如下图所示

有人可以帮助解决地址卡的标记和样式吗？

Answer 1

我为你做了一个简单的例子：你可以看到它live here on jsFiddle.net。

HTML：

<div class="outl-add">
    <div class="outl-add-top">
       Duck, Daffy
    </div>
    <div class="outl-add-left-vert">
       &nbsp;
    </div>
    <div class="outl-add-right-info">
        <p class="info-top">
        <span class="user-name">Daffy Duck</span>
        <span>ACME International</span>
        <span>Manager</span>
        </p>
        <p class="address-info"></p>
        <span> +122323i9092<span class="grey-text">UIofcio</span>
        <p>daffy@acme.org</p>
        <p>666, 5th Avenue</p>
        <p>New York</p>
        <p>www.daffysite.com</p>
    </div>
</div>

CSS：

.outl-add
{
    width: 400px;
    border: 1px solid #000;
}

.outl-add-top
{
    height: 25px;
    background-color: orange;
}

.outl-add-left-vert
{
    float: left;
    height: 200px;
    width: 35px;
    background-color: #ccc;
}

.outl-add-right-info
{
    height: 200px;
    float; left;
    background-color: #eee;
}

p.info-top
{
    margin-bottom: 10px;
}

p.info-top span
{
    display: block;
}

.user-name
{
    font-weight: bold;
}

.grey-text
{
    color: #ccc;
}

希望能帮助你解决一些问题。如果您对此处使用的任何内容有任何疑问，请在评论或相关问题的新问题中询问他们：）