第一篇博客

概述

  这将是一个具有纪念意义的开始,今天在浏览博客园的时候看到了@wolfy的博客,突然出动了我心中的某个角落,让我有一种将我的编程生涯写成博客的冲动,这只是个开始。。。

小试牛刀

  刚刚整体对博客园进行了一系列的尝试,觉得这个网站着实做的比较好,因为所有的页面都可定制和编辑样式,这就是博客的精髓吧。

  整整花了一上午的时间对我的博客进行了“装修”,本来觉得好浪费时间啊,后来想想觉得其实还是挺值的,花了心血的东西,我想我一定能够坚持下去,好好写写自己技术成长历程。从一个只会学习的开始,到能够分享,甚至能发表自己的理解和认识的过程,将会是我真正的学到知识的过程。

  下面就将我装修博客的经历分享出来、、、

分享

  其实,说白了,我还是太菜,“装修”其实就是一些CSS样式,只要有HTML基础和CSS基础的同学,应该都能研究出来。


 

一、如上图所示,这个H3标题的样式,是在博客管理的设置里

代码如下:

h3 {
    background-color: #339900;
    border-radius: 5px;
    color: black;
    margin: 10px 0;
    padding: 6px;
    text-shadow: 1px 1px 2px #404040;
}
View Code

  这就是我为什么说博客园网站做的好的原因,里面可以加上自己喜欢的样式,甚至是一些JS代码,不过得申请权限,真的十分灵活。(不过网站安全问题,我想我有时间得好好琢磨一下)


 

二、如上图所示,这个签名的设置是在博客管理的设置里左侧操作栏里有个“博客签名”

代码如下:

 1 <table style="  background-color: #339900;
 2     border-radius: 5px;
 3     color: black;
 4     margin: 10px 0;
 5     padding: 6px;
 6     text-shadow: 1px 1px 2px #404040;">
 7         <tr>
 8             <td id="tdSign" style="width: 80px;">博客地址:</td>
 9             <td><a href="http://www.cnblogs.com/HJL-Blog">http://www.cnblogs.com/HJL-Blog/</a></td>
10         </tr>
11         <tr>
12             <td style="width: 80px;">博客版权:</td>
13             <td>本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。</td>
14         </tr>
15         <tr>
16             <td>&nbsp;</td>
17             <td>如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!</td>
18         </tr>
19         <tr>
20             <td>&nbsp;</td>
21             <td>再次感谢您耐心的读完本篇文章。</td>
22         </tr>
23     </table>
View Code

这里你可以写上任何HTML格式的代码,都将在你每篇博客中显示出来。


 

三、如上图所示,这个推荐栏的设置是在博客管理的设置里

代码如下:

 1  1 <style>
 2  2 #div_digg {
 3  3     background-color: #ffffff;
 4  4     border: 2px solid red;
 5  5     bottom: 0;
 6  6     opacity: 0.8;
 7  7     position: fixed;
 8  8     right: 0;
 9  9     z-index: 1000;
10 10 }
11 11 #div_digg {
12 12     float: right;
13 13     font-size: 12px;
14 14     margin-bottom: 10px;
15 15     margin-right: 30px;
16 16     margin-top: 10px;
17 17     text-align: center;
18 18     width: 125px;
19 19 }
20 20 *
21 21 {
22 22    padding:0px;
23 23 }
24 24 </style>
View Code


其实就是对页面中的元素样式进行规范成自己喜欢的样子、、、


 

这里就先介绍这么多,大家有什么好玩的样式啊,技巧啊,也可以分享出来,看谁玩的花样多,欢迎指正。。。


 

posted @ 2014-12-16 10:01  H:JL  阅读(131)  评论(0)    收藏  举报