|
|
@@ -106,6 +106,56 @@
|
|
|
font-size:12px;
|
|
|
color:#b2bec3;
|
|
|
}
|
|
|
+ /* 个人信息卡片的个人技能标签部分 */
|
|
|
+ .area-title{
|
|
|
+ font-size:14px;
|
|
|
+ font-weight:700;
|
|
|
+ color:#b2bec3;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .profile-skills li{
|
|
|
+ display:inline-block;
|
|
|
+ height:35px;
|
|
|
+ padding:0 10px;
|
|
|
+ background-color:#f8f9fa;
|
|
|
+ color:#636e72;
|
|
|
+ border:1px solid #e8e8e8;
|
|
|
+ line-height: 35px;
|
|
|
+ border-radius: 18px;
|
|
|
+ margin:0 5px 10px 0;
|
|
|
+ }
|
|
|
+ /* 个人信息卡片的个人社交主页部分 */
|
|
|
+ .profile-social{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .profile-social li{
|
|
|
+ display:inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ /* line-height: 40px; */
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .profile-social li img{
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .profile-social button{
|
|
|
+ background-color: #667eea;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ /* none 表示没有边框线 */
|
|
|
+ border: none;
|
|
|
+ width: 100%;
|
|
|
+ margin:20px 0;
|
|
|
+ padding:14px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -125,8 +175,8 @@
|
|
|
</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>
|
|
|
@@ -141,8 +191,37 @@
|
|
|
<div class="data-item-text">评论</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <!-- 个人技能标签部分 -->
|
|
|
+ <div class="profile-skills">
|
|
|
+ <div class="area-title">专注领域</div>
|
|
|
+ <ul>
|
|
|
+ <li>JavaScript</li>
|
|
|
+ <li>Vue</li>
|
|
|
+ <li>CSS</li>
|
|
|
+ <li>Node.js</li>
|
|
|
+ <li>React</li>
|
|
|
+ <li>摄影</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 个人社交主页 -->
|
|
|
+ <div class="profile-social">
|
|
|
+ <div class="area-title">社交主页</div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="./img/x.png" alt="x">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/wb.png" alt="wb">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/qq.png" alt="qq">
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="./img/wx.png" alt="wx">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <button>+ 关注博主</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
