右侧个人信息卡片（有张自拍那个）代码片段

css：

 1   <style>
 2     .self-intro {
 3       border: 0.5px solid #dedede;
 4       /*background-color: blanchedalmond;*/
 5       background-color: #fff;
 6       height: 134px;
 7       width: 100%;
 8       margin-bottom: 5px;
 9     }
10     .self-intro > .left {
11       width: 60%;
12       margin-top: 14px;
13       height: 110px;
14       float: left;
15       text-align: center;
16       font-weight: bold;
17       color: #7e8c8d;
18       text-shadow: 2px 2px 2px red;
19       border-right: 0.5px solid #dedede;
20     }
21     .self-intro > .right {
22       margin: 11px 18px;
23       height: 110px;
24       width: 80px;
25       float: right;
26       background-image: url(https://images.cnblogs.com/cnblogs_com/destiny-/1794550/o_20062709005907F5FFDC35BA16079B5CA371DACFA43A.jpg);
27       background-repeat: no-repeat;
28       background-position: center;
29       background-size: 120% 115%;
30     }
31     #blog-calendar {
32       border: 0.5px solid #dedede;
33     }
34   </style>

 

html：

1 <div class="self-intro">
2       <div class="left">
3         <br />
4         <span>Name: LuoJianhang</span><br />
5         <span>Age: 22</span><br />
6         <span>Gender: male</span><br />
7       </div>
8       <div class="right"></div>
9 </div>

把上面的html和css代码一起粘贴在【管理】->【设置】->如图的位置，即可使用。

 

 

PS：

1、好久没有手写过css，虽然这是最基础的，内容也极少，但是调试一个个像素的时候还是费了不少时间，共花了20分钟左右才搞定。

2、学校的事情六月初才弄完，期待秋招之前能把静态页面写熟、学到一大半的Vue也能尽快搞定，加油。😊<--这是一个笑脸emoji表情，如果你看不到的话那你现在知道了。

3、之后看心情更新。

posted @ 2020-06-27 17:55  PupilHang  阅读(134)  评论(1)    收藏  举报