|
|
@@ -0,0 +1,149 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* css reset */
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 页面背景色 */
|
|
|
+ body {
|
|
|
+ background-color: #0f3460;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 个人信息卡片的样式 */
|
|
|
+ .profile-card {
|
|
|
+ width: 380px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 100px auto;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 个人信息卡片的头像部分 */
|
|
|
+ .profile-image {
|
|
|
+ height: 140px;
|
|
|
+ background-color: #667eea;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ /* overflow: hidden; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-image .profile-image-bg {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 80px auto 10px;
|
|
|
+ border: 4px solid #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-image .profile-image-bg img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 个人信息卡片的个人签名部分 */
|
|
|
+ .profile-signature {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-signature .nickname {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #2d3436;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-signature .profile-signature-tag span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #667eea;
|
|
|
+ padding: 5px 15px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-signature .signature-text {
|
|
|
+ padding: 0 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #636e72;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 个人信息卡片的个人数据部分 */
|
|
|
+ .content-padding{
|
|
|
+ padding:0 20px;
|
|
|
+ }
|
|
|
+ .profile-data {
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1px solid #e5e5e5;
|
|
|
+ border-bottom: 1px solid #e5e5e5;
|
|
|
+ margin:20px 0;
|
|
|
+ padding:20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .profile-data .data-item {
|
|
|
+ display: inline-block;
|
|
|
+ margin:0 20px;
|
|
|
+ }
|
|
|
+ .profile-data .data-item .data-item-num{
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ color:#2d3436;
|
|
|
+ }
|
|
|
+ .profile-data .data-item .data-item-text{
|
|
|
+ font-size:12px;
|
|
|
+ color:#b2bec3;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="profile-card">
|
|
|
+ <!-- 个人信息卡片的头像部分 -->
|
|
|
+ <div class="profile-image">
|
|
|
+ <div class="profile-image-bg">
|
|
|
+ <img src="./img/touxiang.png" alt="头像">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 个人签名部分 -->
|
|
|
+ <div class="profile-signature">
|
|
|
+ <div class="nickname">前端小栈</div>
|
|
|
+ <div class="profile-signature-tag">
|
|
|
+ <span>博主</span>
|
|
|
+ </div>
|
|
|
+ <div class="signature-text">热爱前端技术，专注分享 CSS 技巧与生活感悟在这里记录我的成长，也希望能帮助到你</div>
|
|
|
+ </div>
|
|
|
+ <!-- 个人数据部分 -->
|
|
|
+ <div class="content-padding">
|
|
|
+ <div class="profile-data">
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-item-num">86</div>
|
|
|
+ <div class="data-item-text">文章</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-item-num">12.4k</div>
|
|
|
+ <div class="data-item-text">粉丝</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data-item-num">3,628</div>
|
|
|
+ <div class="data-item-text">评论</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
