Адресная книга как Outlook - PullRequest
Новая
       4

Адресная книга как Outlook

1 голос
/ 21 декабря 2010

Я хотел бы реализовать своего рода адресную книгу, такую ​​как в outlook, как показано на следующем рисунке

alt text

Может ли кто-нибудь помочь с разметкой и стилем адресной карты?

1 Ответ

3 голосов
/ 21 декабря 2010

Я сделал для вас быстрый пример: вы можете увидеть его вживую здесь на 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;
}

Надеюсь, это поможет вам.Если у вас есть какие-либо вопросы о том, что здесь используется, задайте их в комментариях или задайте новый вопрос относительно вашей проблемы:)

...