科技大气用户信息展示模块源码HTML+CSS

​

​

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>个人资料｜账号信息美化页面</title>

<style>

*{margin:0;padding:0;box-sizing:border-box;}

body{

font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

background:#F2F4F7;

color:#1D2939;

font-size:14px;

}

.layout-wrap{

display:flex;

min-height:100vh;

}

/*侧边栏模拟*/

.sidebar{

width:240px;

background:#ffffff;

border-right:1px solid #E4E7EC;

padding:20px 0;

flex-shrink:0;

}

.sidebar-logo{

display:flex;

align-items:center;

gap:8px;

padding:0 20px 24px;

font-weight:600;

font-size:16px;

}

.sidebar-menu-item{

display:flex;

align-items:center;

gap:10px;

padding:11px 20px;

color:#475467;

cursor:pointer;

}

.sidebar-menu-item.active{

background:#F2F4F7;

color:#165DFF;

border-right:3px solid #165DFF;

}

.main-content{

flex:1;

padding:32px;

}

.page-title{

margin-bottom:24px;

}

.page-title h1{

font-size:22px;

font-weight:600;

margin-bottom:6px;

}

.page-title p{

color:#667085;

font-size:13px;

}

.card-wrap{

background:#ffffff;

border-radius:16px;

padding:28px;

box-shadow:0 2px 12px rgba(0,0,0,0.04);

}

.card-header-bar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:28px;

}

.card-header-bar h2{

font-size:17px;

font-weight:600;

}

.btn-edit{

color:#165DFF;

cursor:pointer;

font-size:14px;

}

/*账号头部信息区*/

.account-head{

display:flex;

align-items:center;

gap:20px;

margin-bottom:30px;

}

.avatar-wrap{

position:relative;

}

.avatar{

width:80px;

height:80px;

border-radius:50%;

object-fit:cover;

border:2px solid #ff9547;

box-shadow: 0 0 0 1px rgba(255,149,71,0.1),0 0 0 4px rgba(255,149,71,0.32);

}

.head-info .username{

font-size:20px;

font-weight:600;

margin-bottom:4px;

}

.head-info .email-text{

color:#667085;

margin-bottom:6px;

}

.tag-demo{

display:inline-block;

padding:2px 8px;

background:#fff2e5;

color:#d97706;

border-radius:6px;

font-size:11px;

border:1px solid #ffd6a5;

}

/*信息网格布局*/

.info-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:16px;

margin-bottom:28px;

}

.info-item{

border:1px solid #E4E7EC;

border-radius:10px;

padding:14px 16px;

}

.info-item label{

display:block;

font-size:12px;

color:#667085;

margin-bottom:6px;

}

.info-item .val{

font-size:14px;

font-weight:500;

}

/*存储容量进度条模块*/

.storage-block{

margin-top:12px;

}

.storage-title-row{

display:flex;

justify-content:space-between;

margin-bottom:10px;

}

.storage-title-row span{

font-size:13px;

color:#344054;

}

.progress-outer{

width:100%;

height:10px;

background:#E4E7EC;

border-radius:999px;

overflow:hidden;

}

.progress-inner{

height:100%;

width:62%;

background:#00b468;

border-radius:999px;

}

/*底部备注提示*/

.tip-text{

margin-top:14px;

font-size:12px;

color:#98a2b3;

}

</style>

</head>

<body>

<div class="layout-wrap">

<!--侧边栏模拟-->

<div class="sidebar">

<div class="sidebar-logo">

<span>🔵</span>联新科技

</div>

<div class="sidebar-menu-item">📊 数据中心</div>

<div class="sidebar-menu-item">🗃️ 我的资源</div>

<div class="sidebar-menu-item">📑 合集管理</div>

<div class="sidebar-menu-item">❤️ 我的收藏</div>

<div class="sidebar-menu-item">↕️ 分享管理</div>

<div class="sidebar-menu-item active">👤 个人资料</div>

<div class="sidebar-menu-item">📝 信息管理</div>

</div>

<div class="main-content">

<div class="page-title">

<h1>个人资料</h1>

<p>查看账号基础信息，资料修改统一在弹窗内完成。</p>

</div>

<div class="card-wrap">

<div class="card-header-bar">

<h2>账号资料</h2>

<div class="btn-edit">编辑资料</div>

</div>

<!--头像+账号头部-->

<div class="account-head">

<div class="avatar-wrap">

<img class="avatar" src="https://api.dicebear.com/7.x/identicon/svg?seed=xin" alt="avatar">

</div>

<div class="head-info">

<div class="username">xin</div>

<div class="email-text">xin@example.com</div>

<div class="tag-demo">示范</div>

</div>

</div>

<!--信息网格：用户名、邮箱、用户级别、创建时间、到期时间、存储空间-->

<div class="info-grid">

<div class="info-item">

<label>用户名</label>

<div class="val">xin</div>

</div>

<div class="info-item">

<label>邮箱</label>

<div class="val">xin@example.com</div>

</div>

<div class="info-item">

<label>用户级别</label>

<div class="val"><span class="tag-demo">示范</span></div>

</div>

<div class="info-item">

<label>账号创建时间</label>

<div class="val">2026‑05‑12 14:22</div>

</div>

<div class="info-item">

<label>账号到期时间</label>

<div class="val">永久有效</div>

</div>

<div class="info-item">

<label>存储空间</label>

<div class="val">6.2GB / 10GB</div>

<div class="storage-block">

<div class="progress-outer">

<div class="progress-inner"></div>

</div>

</div>

</div>

</div>

<div class="tip-text">

存储空间为账号分配总容量；账号到期时间为永久代表无时间限制。

</div>

</div>

</div>

</div>

</body>

</html>

编辑

​