标签：font 自定义 color text 博客园 页面 sidebar margin 255
1.页面定制CSS代码：
1 /* 公共样式区域开始 */
2
3 body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select {
4 margin: 0;
5 padding: 0;
6 }
7
8 body {
9 font: 12px "幼圆";
10 word-wrap: break-word;
11 }
12
13 /* 去掉线 */
14 a,u,s,del {
15 color: #666;
16 text-decoration: none
17 }
18
19 /* 去掉默认属性 */
20
21 i,em,b {
22 font-style: normal;
23 font-weight: 100;
24 }
25
26 /* 去掉上下结构时img下面的空隙 */
27
28 img {
29 vertical-align: middle;
30 }
31
32 /* 合并相邻边框(细线边框) */
33
34 table {
35 border-collapse: collapse;
36 }
37
38 /* 去除前面点 */
39
40 li {
41 list-style: none;
42 }
43
44
45 /* 公共样式区域结束 */
46
47
48 /* --------------------------- 设置背景及样式 ----------------------------- */
49
50 body {
51 background: rgba(12, 100, 129, 1) url('https://images.cnblogs.com/cnblogs_com/jwyblogs/1576071/o_bg.jpg') fixed no-repeat;
52 background-position: 50% 5%;
53 background-size: cover;
54 }
55
56
57 /* --------------------------- 整个页面 ----------------------------- */
58
59 #home {
60 margin: 0 auto;
61 width: 90%;
62 /*原始65*/
63 min-width: 980px;
64 /*页面顶部的宽度*/
65 background-color: rgba(245, 245, 245, 0.4);
66 padding: 30px;
67 margin-top: 50px;
68 margin-bottom: 50px;
69 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
70 }
71
72 /* --------------------------- 头部：标题加导航区域start----------------------------- */
73
74 #header {
75 overflow: hidden;
76 }
77
78 #blogLogo {
79 display: none;
80 }
81
82 /* 头部的标题区域 */
83
84 #blogTitle {
85 height: 100px;
87 clear: both;
88 background-color: rgba(240, 255, 255, 0.5);
89 margin-top: 30px;
90 width: 100%;
91 overflow: hidden;
92 border-radius: 5px;
93 }
94
95 #blogTitle h1 {
96 font: 700 36px/36px "宋体";
97 width: 50%;
98 margin-top: 25px;
99 overflow: hidden;
100 }
101
102
103 /* 昵称 */
104
105 #blogTitle h1 #Header1_HeaderTitle {
106 margin-left: 30px;
107 color: #000;
108 text-shadow: #0d1218 1px 1px;
109 }
110
111
112 /* 签名 */
113
114 #blogTitle h2.bounceInRight {
115 font: 17px/2 "幼圆";
116 color: #FF1493;
117 float: right;
118 width: 30%;
119 }
120
121
122 /* 第二块导航区域 */
123
124 #navigator {
125 background-color: rgba(135, 206, 205, 0.5);
126 margin-top: 20px;
127 height: 54px;
128 }
129
130
131 /* 左边的导航 */
132
133 #navList {
134 float: left;
135 margin-left: 20px;
136 }
137
138 #navList li {
139 float: left;
140 margin: 0 20px;
141 font: 700 18px/3 "幼圆";
142 }
143
144 #navList li a {
145 display: block;
146 padding: 0 15px;
147 height: 54px;
148 text-align: center;
149 color: #fff;
150 }
151
152 #navList li a:hover {
153 background: #CC99FF;
154 color: #000;
155 transition-duration: .3s;
156 text-shadow: 0 0 1px #000;
157 }
158
159
160 /* 右边的count */
161
162 .blogStats {
163 color: #eee;
164 float: right;
165 font: 12px/3 "幼圆";
166 margin: 10px 10px 0 0;
167 text-align: center;
168 }
169
170
171 /* --------------------------- 头部：标题加导航区域end----------------------------- */
172
173
174 /* --------------------------- 主体区域start----------------------------- */
175
176 #main {
177 min-width: 640px;
178 clear: both;
179 margin-top: 20px;
180 }
181
182
183 /* --------------------------- 主体内容区域start----------------------------- */
184
185 #mainContent {
186 float: left;
187 width: 80%;
188 padding: 30px;
189 box-sizing: border-box;
190 background: rgba(255, 255, 255, 0.5);
191 }
192
193
194 /* 主体区域侧边栏 */
195
196 #sideBar {
197 float: right;
198 width: 18%;
199 }
200
201
202 /* 主体区域博客列表— - - - >博客发布的日期 */
203
204 .day {
205 /* .day表示整个博文的所有区域，包括标题，内容，统计 */
206 border-bottom: 1px dashed #FF0099;
207 }
208
209
210 /* 发布日期 */
211
212 .day .dayTitle{
213 overflow:hidden;
214
215 }
216
217 .day .dayTitle a {
218 display: block;
219 font: 16px/2 "微软雅黑";
220 color: #9900FF;
221 text-align: right;
222 width: 15%;
223 float: right;
224 }
225
226
227 /* 标题 */
228
229 .day .postTitle {
230 font: 700 20px/2 "幼圆";
231 width: 100%;
232 clear: both;
233 }
234
235 .postTitle a {
236 color: #000000;
237 text-shadow: 0 0 1px #669966;
238 }
239
240 .postTitle a:link,
241 .postTitle a:visited,
242 .postTitle a:active {
243 transition: all 0.4s linear 0s;
244 }
245
246 .postTitle a:hover {
247 margin-left: 30px;
248 text-decoration: none;
249 }
250
251
252 /* 博客的简要内容 */
253
254 .day .postCon {
255 width: 100%;
256 clear: both;
257 padding: 10px 0;
258 font: 14px/2 "微软雅黑";
259 }
260
261 .day .postCon .c_b_p_desc {
262 text-indent: 20px;
263 margin-left: 15px;
264 font: 14px/2 "微软雅黑";
265 }
266
267
268 /* 阅读全文按钮 */
269
270 .day .postCon .c_b_p_desc .c_b_p_desc_readmore {
271 display: block;
272 text-align: right;
273 font: 700 12px/2 "微软雅黑";
274 color: #FF0000;
275 }
276
277
278 /*附加信息*/
279
280 .day .postDesc {
281 color: #757575;
282 width: 100%;
283 clear: both;
284 text-align: left;
285 font-family: "微软雅黑", "宋体", "黑体", Arial;
286 font-size: 13px;
287 padding-right: 20px;
288 line-height: 1.8;
289 padding-bottom: 35px;
290 }
291
292
293 /* --------------------------- 主体内容区域end----------------------------- */
294
295
296 /* --------------------------- 侧边栏start----------------------------- */
297
298
299 /* 侧边栏父元素公共样式 */
300
301 #sidebar_news,#blog-calendar,#sidebar_search,#sidebar_shortcut,#sidebar_postcategory,#sidebar_postarchive,#sidebar_imagecategory,#sidebar_topviewedposts {
302 background: rgba(255, 255, 255, 0.5);
303 margin-bottom: 20px;
304 border-radius: 3px;
305 }
306
307 #sidebar_news,#blog-calendar,#sidebar_search,#sidebar_shortcut,#sidebar_postcategory,#sidebar_postarchive,#sidebar_imagecategory,
308 #sidebar_topviewedposts ul li a {
309 text-indent: 9px;
310 }
311
312 /* 侧边栏的h3.catListTitle公共样式 */
313
314 .catListTitle {
315 background-color: rgba(255, 110, 180, 0.6);
316 font: 16px/2 "幼圆";
317 text-align: center;
318 }
319
320
321 /* --------------------------- 侧边栏公告 ------------------------------------ */
322
323 #sidebar_news {
324 font: 14px/20px "幼圆";
325 margin-bottom: 20px;
326 text-indent: 0;
327 }
328
329 #sidebar_news.newsItem #blog-news #profile_block {
330 padding: 0 9px;
331 }
332
333 h3.catListTitle{
334 margin:0px;
335 }
336 /* -------- DIY头像 -------- */
337 .headimg{
338 display:block;
339 width:80px;
340 height:80px;
341 border-radius:50%;
342 margin: 12px auto;
343 }
344
345
346 /* --------------------------- 侧边栏日历 ------------------------------------ */
347
348
349 #blog-calendar td {
350 padding: 5px 3px;
351 font-size: 14px;
352 }
353
354 #blog-calendar td a {
355 font-weight: bold;
356 color: #59a020;
357 }
358
359 #blog-calendar table a:hover {
360 color: #59a020;
361 text-decoration: underline;
362 background: transparent;
363 }
364
365 #blog-calendar table u {
366 text-decoration: none;
367 }
368
369
370 /* --------------------------- 侧边栏搜索 ------------------------------------ */
371
372
373 #sidebar_search {
374 text-indent: 0;
375 }
376
377 #sidebar_search .div_my_zzk {
378 margin: 7px 0;
379 padding:0 5px;
380 }
381
382 #sidebar_search .div_my_zzk .input_my_zzk {
383 width: 59%;
384 border: 1px solid #ccc;
385 background: #F4F4F7;
386 border-radius: 3px;
387 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
388 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
389 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
390 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
391 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
392 }
393
394 #sidebar_search .div_my_zzk .input_my_zzk:focus {
395 border-color: #66afe9;
396 outline: 0;
397 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
398 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
399 }
400
401
402 /* 按钮样式 */
403
404 #sidebar_search .btn_my_zzk {
405 position: relative;
406 display: inline-block;
407 font-weight: 400;
408 white-space: nowrap;
409 text-align: center;
410 background-image: none;
411 border: 1px solid transparent;
412 -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
413 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
414 cursor: pointer;
415 -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
416 transition: all .3s cubic-bezier(.645, .045, .355, 1);
417 -webkit-user-select: none;
418 -moz-user-select: none;
419 -ms-user-select: none;
420 user-select: none;
421 -ms-touch-action: manipulation;
422 touch-action: manipulation;
423 border-radius: 4px;
424 color: rgba(0, 0, 0, 0.65);
425 background-color: #fff;
426 border-color: #d9d9d9;
427 }
428
429
430 /* 找找看的input */
431
432 #q {
433 background: rgba(255, 255, 255, 0);
434 margin: 5px 0;
435 border: 1px solid #000;
436 }
437
438 #google_q {
439 background: rgba(255, 255, 255, 0);
440 margin: 5px 0;
441 border: 1px solid #000;
442 }
443
444
445 /* --------------------------- 侧边栏常用链接 ------------------------------------ */
446
447
448 /* #sidebar_shortcut {
449 background: rgba(255, 255, 255, 0.5);
450 margin-bottom: 20px;
451 } */
452
453 #sidebar_shortcut ul li a {
454 display: block;
455 font: 14px/2 "幼圆";
456 text-decoration: underline;
457 text-indent: 9px;
458 }
459
460
461 /* --------------------------- 侧边栏随笔分类------------------------------------ */
462
463
464 /*
465 #sidebar_postcategory {
466 background: rgba(255, 255, 255, 0.5);
467 } */
468
469 #sidebar_postcategory ul li a {
470 display: block;
471 font: 14px/2 "幼圆";
472 text-decoration: underline;
473 text-indent: 9px;
474 }
475
476
477 /* --------------------------- 侧边栏随笔档案------------------------------------ */
478
479
480 /* #sidebar_postarchive {
481 background: rgba(255, 255, 255, 0.5);
482 margin-bottom: 20px;
483 } */
484
485 #sidebar_postarchive ul li a {
486 font: 14px/2 "幼圆";
487 }
488
489
490 /* --------------------------- 侧边栏相册------------------------------------ */
491
492
493 /* #sidebar_imagecategory {
494 background: rgba(255, 255, 255, 0.5);
495 margin-bottom: 20px;
496 } */
497
498 #sidebar_imagecategory ul li a {
499 display: block;
500 font: 14px/2 "幼圆";
501 }
502
503 /* --------------------------- 侧边栏阅读排行榜----------------------------------- */
504
505
506 /* #sidebar_topviewedposts {
507 background: rgba(255, 255, 255, 0.5);
508 margin-bottom: 20px;
509 } */
510
511 #sidebar_topviewedposts ul li{
512 margin:10px 0;
513 }
514 #sidebar_topviewedposts ul li a {
515 font: 14px/20px "幼圆";
516
517 }
518 #TopViewPostsBlock{
519 padding:0 9px;
520 }
521
522
523 /* 个性签名 */
524 #MySignature {
525 box-shadow: 8px 1px 10px #989898;
526 padding: 10px;
527 text-shadow: 1px 1px 1px #FFF;
528 font-size: 17px;
529 border-left: solid 5px #55895B;
530 background: #F3F3F3;
531 border-radius: 10px 10px 50% 10px;
532 line-height: 2.4;
533 margin: 40px 0;
534 }
535
536 #MySignature a {
537 text-decoration: none;
538 color: #4183c4;
539 font-weight: bold;
540 }
541
542 #MySignature a:hover {
543 text-decoration: underline;
544 color: #f60;
545 }
546
547 /*底部隐藏作者，隐藏推荐和反对*/
548 #author_profile {
549 display: none;
550 }
551
552 #div_digg {
553 display: none;
554 }
555
556 /*隐藏广告*/
557 #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
558 display: none;
559 }
560
561 #footer{
562 font: 12px/2 "微软雅黑";
563 text-align: center;
564 margin-top:15px;
565 }
2.博客侧边栏公告：
说明：需要现申请JS权限；
<!-- 头像 -->
<img src="https://images.cnblogs.com/cnblogs_com/jwyblogs/1576071/o_img.jpg" class="headimg">
<!-- 看板娘 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<!-- 鼠标特效 -->
<script type="text/javascript">
(function() {
var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
index = Math.floor(Math.random() * coreSocialistValues.length);
document.body.addEventListener('click',
function(e) {
if (e.target.tagName == 'A') {
return;
}
var x = e.pageX,
y = e.pageY,
span = document.createElement('span');
span.textContent = coreSocialistValues[index];
index = (index + 1) % coreSocialistValues.length;
span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
document.body.appendChild(span);
animate(span);
});
function animate(el) {
var i = 0,
top = parseInt(el.style.top),
id = setInterval(frame, 16.7);
function frame() {
if (i > 180) {
clearInterval(id);
el.parentNode.removeChild(el);
} else {
i += 2;
el.style.top = top - i + 'px';
el.style.opacity = (180 - i) / 180;
}
}
}
} ());
</script>
3.页脚HTML代码
<script type="text/javascript">
$(function(){
$('#blogTitle h1').addClass('bounceInLeft animated');
$('#blogTitle h2').addClass('bounceInRight animated');
// 删除反对按钮
$('.buryit').remove();
initCommentData();
});
function initCommentData() {
$('.feedbackItem').each(function() {
var text = $(this).find('.feedbackListSubtitle .layer').text();
// 将楼层信息放到data里面
// $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
$(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
});
}
$(document).ajaxComplete(function(event, xhr, settings) {
// 监听获取评论ajax事件
if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
initCommentData();
}
});
</script>
<script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script>
<div id="scrollTop" style="display:none;">
<div class="level-2"></div>
<div class="level-3"></div>
</div>
<script src="http://files.cnblogs.com/files/hafiz/scroll2top.js"></script>
<script type="text/javascript">
UI.global_search();
var uvOptions = {};
// !important
(function() {
initScrollTop();
})();
</script>
标签：font,自定义,color,text,博客园,页面,sidebar,margin,255 来源： https://www.cnblogs.com/jwyblogs/p/11742921.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。