给你的网站侧边栏添加一个联系方式 基本通用

kingkare

本站演示效果图：


代码如下：

1. <div class="attentionus">
   
2.    
   
3. <ul class="items clearfix">
   
4.    
   
5. <span class="social-widget-link social-link-weibo">
   
6. <span class="social-widget-link-count">
   
7. <i class="icon-weibo"></i>荷包蛋部落</span><span class="social-widget-link-title">新浪</span>
   
8. <a href="javascript:;" target="_self" rel="nofollow"></a></span>
   
9. 
   
10. 
    
11. <span class="social-widget-link social-link-tencent-weibo">
    
12. <span class="social-widget-link-count">
    
13. <i class="icon-tencent-weibo"> </i>荷包蛋部落</span><span class="social-widget-link-title">抖音</span>
    
14. <a href="javascript:;" target="_self" rel="nofollow"></a></span>
    
15. 
    
16. <span class="social-widget-link social-link-qq">
    
17. <span class="social-widget-link-count"><i class="icon-qq"></i>8641340</span><span class="social-widget-link-title">QQ号</span>
    
18. <a href="javascript:;" rel="nofollow"></a></span>
    
19.                            
    
20. <span class="social-widget-link social-link-email">
    
21. <span class="social-widget-link-count">
    
22. <i class="icon-mail"></i>8641340@qq.com</span><span class="social-widget-link-title">邮箱</span>
    
23. <a href="javascript:;" target="_self" rel="nofollow"></a></span>
    
24.                                     
    
25. <span class="social-widget-link social-link-wechat">
    
26. <span class="social-widget-link-count">
    
27. <i class="icon-wechat"></i>www.hbd0.cn</span><span class="social-widget-link-title">荷包蛋</span>
    
28. <a id="tooltip-s-weixin" href="javascript:void(0);"></a></span>
    
29. 
    
30. </ul>
    
31. 
    
32. </div>
    
33. 
    
34. 
    
35. <style>.suxingme_social {
    
36.     overflow: initial
    
37. }
    
38. 
    
39. .social-widget-link {
    
40.     position: relative;
    
41.     margin-bottom: 10px;
    
42.     position: relative;
    
43.     display: block;
    
44.     font-size: 13px;
    
45.     background: #fff;
    
46.     color: #525252;
    
47.     line-height: 40px;
    
48.     padding: 0 14px;
    
49.     border: 1px solid #DDD;
    
50.     border-radius: 2px
    
51. }
    
52. 
    
53. .social-widget-link-count i {
    
54.     margin-right: 9px;
    
55.     font-size: 17px;
    
56.     vertical-align: middle
    
57. }
    
58. 
    
59. .social-widget-link-title {
    
60.     position: absolute;
    
61.     top: -1px;
    
62.     right: -1px;
    
63.     bottom: -1px;
    
64.     width: 100px;
    
65.     text-align: center;
    
66.     background: rgba(255,255,255,.08);
    
67.     transition: width .3s;
    
68.     border-radius: 0 3px 3px 0
    
69. }
    
70. 
    
71. .social-widget-link:hover .social-widget-link-title {
    
72.     width: 116px
    
73. }
    
74. 
    
75. .social-widget-link a {
    
76.     position: absolute;
    
77.     top: 0;
    
78.     left: 0;
    
79.     right: 0;
    
80.     bottom: 0
    
81. }
    
82. 
    
83. .social-link-weibo {
    
84.     border-color: rgba(236,61,81,.39)
    
85. }
    
86. 
    
87. .social-link-weibo i {
    
88.     color: #ec3d51
    
89. }
    
90. 
    
91. .social-link-weibo .social-widget-link-title {
    
92.     background-color: #ec3d51;
    
93.     color: #fff
    
94. }
    
95. 
    
96. .social-link-tencent-weibo {
    
97.     border-color: rgba(104,166,214,.39)
    
98. }
    
99. 
    
100. .social-link-tencent-weibo i {
     
101.     color: #68a6d6
     
102. }
     
103. 
     
104. .social-link-tencent-weibo .social-widget-link-title {
     
105.     background-color: #68a6d6;
     
106.     color: #fff
     
107. }
     
108. 
     
109. .social-link-email {
     
110.     border-color: rgba(42,179,154,.4)
     
111. }
     
112. 
     
113. .social-link-email i {
     
114.     color: #2ab39a
     
115.     margin-right: -10px;
     
116. }
     
117. 
     
118. .social-link-email .social-widget-link-title {
     
119.     background-color: #2ab39a;
     
120.     color: #fff
     
121. }
     
122. 
     
123. .social-link-qq {
     
124.     border-color: rgba(18,170,232,.39)
     
125. }
     
126. 
     
127. .social-link-qq i {
     
128.     color: #12aae8
     
129. }
     
130. 
     
131. .social-link-qq .social-widget-link-title {
     
132.     background-color: #12aae8;
     
133.     color: #fff
     
134. }
     
135. 
     
136. .social-link-wechat {
     
137.     border-color: rgba(25,152,114,.4)
     
138. }
     
139. 
     
140. .social-link-wechat i {
     
141.     color: #199872
     
142. }
     
143. 
     
144. .social-link-wechat .social-widget-link-title {
     
145.     background-color: #199872;
     
146.     color: #fff
     
147. }
     
148. 
     
149. .f-weixin-dropdown {
     
150.     position: fixed;
     
151.     height: 100%;
     
152.     width: 100%;
     
153.     top: 0;
     
154.     left: 0;
     
155.     background: #FFF;
     
156.     z-index: 9998;
     
157.     display: none;
     
158.     -webkit-animation: fade-zoom-in .3s forwards;
     
159.     -o-animation: fade-zoom-in .3s forwards;
     
160.     animation: fade-zoom-in .3s forwards;
     
161.     display: none;
     
162.     -webkit-backface-visibility: hidden
     
163. }
     
164. 
     
165. .f-weixin-dropdown .qcode img {
     
166.     width: 100%;
     
167.     height: auto
     
168. }
     
169. 
     
170. .f-weixin-dropdown.is-visible {
     
171.     display: block
     
172. }
     
173. 
     
174. .f-weixin-dropdown .tooltip-weixin-inner {
     
175.     max-width: 300px;
     
176.     padding: 0 20px;
     
177.     margin: auto;
     
178.     text-align: center;
     
179.     position: absolute;
     
180.     width: 100%;
     
181.     left: 0;
     
182.     right: 0;
     
183.     height: 320px;
     
184.     top: -150px;
     
185.     bottom: 0
     
186. }
     
187. 
     
188. .f-weixin-dropdown .tooltip-weixin-inner h3 {
     
189.     color: #273746;
     
190.     font-size: 32px;
     
191.     font-weight: 300;
     
192.     margin-bottom: 10px;
     
193.     line-height: 1.3
     
194. }
     
195. 
     
196. .f-weixin-dropdown .close_tip {
     
197.     position: fixed;
     
198.     z-index: 99999;
     
199.     top: 80px;
     
200.     right: 80px;
     
201.     color: #BDBDBD;
     
202.     font-size: 36px;
     
203.     cursor: pointer;
     
204.     -webkit-transition: all .4s ease;
     
205.     transition: all .4s ease
     
206. }
     
207. 
     
208. .widget_cjtz {
     
209.     position: relative;
     
210.     display: block
     
211. }
     
212. 
     
213. .widget_cjtz_img {
     
214.     position: relative
     
215. }
     
216. </style>

复制代码

七夏

🌟 顶贴留名，内容真心很棒！ 🌟

—— 来自：荷包蛋部落（HBD0.CN）已读乱回

SanS三石

这个有点6

Amani

❤️ 爱是一种力量，它能改变一切。 ❤️

—— 来自：荷包蛋部落（HBD0.CN）已读乱回