通讯录html+css

通讯录HTML和CSS的设计有助于创建一个整洁，易于使用的联系人列表，其中包括每个联系人的姓名，电子邮件地址和电话号码。

!DOCTYPE html&
    gt；html&
    gt；head&
    gt；title>
    联系人列表/title&
    gt；style&
gt；/* 设置页面样式 */body {
    font-family: Arial, sans-serif;
    background-color: #efefef;
    margin: 0;
    padding: 0;
}
/*设置通讯录表 */.contact-list {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 20px auto;
    max-width: 600px;
    padding: 20px;
}
/*设置列表项 */.contact-item {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
/*设置标题和详细信息 */.contact-name {
    font-size: 1.2em;
    font-weight: bold;
}
.contact-email, .contact-phone {
    font-size: 0.9em;
    color: #666;
    margin-left: 10px;
}
    /style&
    gt；/head&
    gt；body&
    gt；div class="contact-list"&
    gt；div class="contact-item"&
    gt；div class="contact-name"&
    gt；约翰·史密斯 /div&
    gt；div class="contact-email"&
    gt；john.smith@gmail.com /div&
    gt；div class="contact-phone"&
    gt；(555) 555-1212 /div&
    gt；/div&
    gt；div class="contact-item"&
    gt；div class="contact-name"&
    gt；娜塔莉·琼斯 /div&
    gt；div class="contact-email"&
    gt；natalie.jones@gmail.com /div&
    gt；div class="contact-phone"&
    gt；(555) 555-2323 /div&
    gt；/div&
    gt；/div&
    gt；/body&
    gt；/html&
    gt；

上述代码可以创建一个基本的通讯录HTML和CSS页面，其中包含一个列表，每个列表项都显示联系人的详细信息.

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！