bootstrap实现移动端手机端我的小店商店个人中心代码
代码语言:html
所属分类:布局界面
代码描述:bootstrap实现移动端手机端我的小店商店个人中心代码
代码标签: bootstrap 移动端 手机端 我的 小店 商店 个人 中心 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人中心</title> <!-- Bootstrap CSS --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css"> <!-- Bootstrap Icons --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.11.3.css"> <!-- ECharts --> <style> :root { --primary-bg: #e0f2fe; /* 浅蓝色背景 */ --card-bg: #ffffff; --text-color: #333333; --primary-blue: #1e88e5; --secondary-blue: #0d6efd; --gold-color: #ffc107; } body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background-color: var(--primary-bg); color: var(--text-color); padding-bottom: 70px; /* 为底部导航栏留出空间 */ } .header { background-color: var(--primary-bg); padding: 20px 15px; position: relative; } .avatar-container { display: flex; align-items: center; } .avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background-color: #f0f0f0; margin-right: 15px; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .settings-icon { position: absolute; right: 15px; top: 20px; color: #666; font-size: 1.2rem; } .membership-card { background-color: #1a237e; color: white; border-radius: 10px; padding: 15px; margin: 10px 0; position: relative; overflow: hidden; } .membership-card::after { cont.........完整代码请登录后点击上方下载按钮下载查看
网友评论0