css+div实现手机通讯录增删改查网页ui交互代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现手机通讯录增删改查网页ui交互代码
代码标签: css div 手机 通讯录 增 删 改 查 网页 ui 交互 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>通讯录</title> <style> /* CSS Reset and Basic Styles */ :root { --primary-color: #007bff; --danger-color: #dc3545; --light-gray: #f0f2f5; --text-color: #333; --text-secondary-color: #888; --white-color: #fff; --border-color: #eee; --green-color: #28a745; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* 移除移动端点击高光 */ } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f8f8f8; overflow: hidden; /* 防止body滚动 */ } /* Phone Simulator Container */ .phone-container { width: 100%; max-width: 450px; height: 100%; margin: 0 auto; background-color: var(--light-gray); position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } @media (min-width: 451px) { .phone-container { height: 90vh; max-height: 800px; margin-top: 5vh; border-radius: 30px; border: 10px solid #111; } } /* Page Structure */ .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--light-gray); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; } .page.active { transform: translateX(0); z-index: 1; } .page.hidden-right { transform: translateX(100%); } .page.hidden-left { transform: translateX(-100%); } /* Header Styles */ .header { padding: 15px 20px; background-color: var(--white-color); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .header-main { justify-content: space-between; border-bottom: 1px solid var(--border-color); } .header h1 { font-size: 20px; font-weight: 600; color: var(--text-color); } .header .contact-count { font-size: 14px; color: var(--text-secondary-color); } .back-button { background: none; border: none; font-size: 24px; cursor: pointer; padding-right: 15px; } .header-edit { justify-content: flex-start; } .status-bar { padding: 8px 20px; font-size: 13px; color: var(--green-color); display: flex; align-items: center; gap: 5px; background: var(--light-gray); } .status-bar .check-icon { display: inline-block; width: 16px; height: 16px; background-color: var(--green-color); color: white; border-radius: 50%; text-align: center; line-height: 16px; font-size: 12px; } /* Page Content Area */ .page-content { flex-grow: 1; overflow-y: auto; padding: 0 15px; } /* Contacts List */ #contact-list { padding-top: 10px; padding-bottom: 80px; /* Space for FAB */ } .contact-item-wrapper { position: relative; overflow: hidden; margin-bottom: 10px; border-radius: 12px; } .contact-item { display: flex; align-items: center; padding: 15px; background-color: var(--white-color); cursor: pointer; transition: transform 0.2s ease-out; user-select: none; } .contact-avatar { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white-color); font-size: 20px; f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0