分享一个小demo

算命

秦始皇觉得你的帖子很赞
6.66

算命

// 使用请先勾选附加选项的H码,再点击右上角纯文本   代码附注释不懂留言

1. 
   
2. <style type="text/css">
   
3.     .qi {
   
4.         width: 350px;
   
5.         height: 400px;
   
6.         background-color: #CD2626;
   
7.         margin: 40px auto;
   
8.         -webkit-box-shadow: 0 0 16px #454345;
   
9.         -moz-box-shadow: 0 0 16px #454345;
   
10.         box-shadow: 0 0 16px #454345;
    
11.         font-family: "Poiret One", "微软雅黑 Light", sans-serif;
    
12.         font-width: 300;
    
13.         border-radius: 5px;
    
14.     }
    
15. 
    
16.     .qi-a {
    
17.         height: 120px;
    
18.         background-color: #B22222;
    
19.         text-align: center;
    
20.         overflow: hidden;
    
21.         border-bottom-left-radius: 40px;
    
22.         border-bottom-right-radius: 40px;
    
23.         box-shadow: 0 0 10px 0px #454345;
    
24.     }
    
25. 
    
26.     .qi-a img{
    
27.         vertical-align: middle;
    
28.         width: 85px;
    
29.         height: 85px;
    
30.         margin: 17px;
    
31.         border-radius: 50%;
    
32.     }
    
33.     .qi-b {
    
34.         text-align: center;
    
35.     }
    
36. </style>
    
37. 
    
38. <div class="qi">
    
39.     <div class="qi-a">
    
40.         <img src="http://www.qqmcc.net/data/attachment/album/201707/07/174744s72tfsltf9f139wl.jpg"> <!-- 这里放头像链接 -->
    
41.     </div>
    
42.     <div class="qi-b">
    
43.         <span style="display: block; margin-top: 60px;">
    
44.             <span style="color: #EEEE00;font-size: 16px;letter-spacing: 1px;">秦始皇觉得你的帖子很赞</span><br>
    
45.             <span style="color: #ffffff;font-size: 90px;font-weight: bold">6.66</span>
    
46.         </span>
    
47.     </div>
    
48. </div>

复制代码

QQmcc-如初

比心 送给你
5.20

五月十二

这个好看啊。   厉害了

爱你痛彻我心扉

厉害了

QQmcc-玫瑰

你是前端