第一篇博客

概述

　　这将是一个具有纪念意义的开始，今天在浏览博客园的时候看到了@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)    收藏  举报