写这篇文章有两个原因:
1.老白已经写了篇《Donews Blog小花招01--偷别人的CSS 》,互联网的精神是共赏,所以,如果你看到donews blog里谁的模板漂亮,那你先斩后奏,把他的css代码拿来后再跟他打个招呼,这样人家应该不会有什么意见;
2.大多数人不知道怎么写css代码,一般菜鸟更是不可能,而donews blog系统提供的模板简单得不能再简单了,对于我们这些草根,好的版面也是吸引网友的一个手段,所以,我们需要自己的个性模板。然而,把别人的模板拿过来后,如果一点都不改的话,那也不好,因为“偷”来的模板一般都有原作者的印记,我们需要在原模板上动动手术!
好,菜鸟(这里指不懂css的)怎样才能拥有自己的个性模板呢?两个步骤:
一、仔细读读老白的《Donews Blog小花招01--偷别人的CSS 》把别人的css代码拿来(至于什么是css代码,简单的说,css代码就是控制布局的,如果你看到别人的版面和你的不同,那就是css代码的作用);
二、跟零度一起修改拿来的css代码,我拿我现在的这个模板为例,逐步讲解我是怎样拥有我自己的个性模板的(到现在为止,零度空间的这个模板应该是唯一的)。
我的模板来自demson,但是又有不少区别,首先,我的banner改了吧,我的背景也改了吧,现在有图片了,还有,整篇文章我加了一个凹框,文章标题已及网友评论、评论框都有了自己的图片,另外,我的滚动条也是透明的;
修改规则:改一下,刷新一下,直到你满意为止!这是你自己学会修改的最好办法,实践出真知!
分步讲解:
1.背景(background)
backround这个元素很有用,这个主要是用来控制背景颜色和图片的(背景颜色的代码你可以查看:html颜色代码一览表),donews blog模板css代码中什么地方要用到这个元素呢,头部(也就是最顶端的图片,我们说的banner,代码中一般用header表示);主体(body,也就是日志的背景);公告栏(右侧或者左侧);文章的标题,评论的标题,已及评论框,现在你比较一下零度空间和demson的模板,有很大的不同吧,没错,在background上我下了很大功夫,然后,你再把我的css代码和demson的css代码中的background元素比较一下,很快你就知道是怎么回事了!(还不会“偷”零度空间和demson的css代码?赶快回去读老白的《Donews Blog小花招01--偷别人的CSS 》,这是你首先必须会的!)
2.width和heighth
这两个元素主要是控制宽度和高度的,我不具体讲在什么地方会用到这个元素了,很多地方都有!你只要在css代码一个一个尝试,改变他们后面的数字大小,然后保存,再刷新一下你的blog一下,你就会很容易发现它们控制哪些地方了!为什么不具体讲?因为不同的作者对控制的位置命名不同,没法讲,你自己摸索着改这两个元素,改一下刷新一下,你很快就会明白了!
3.font (包括font_size和font_color等)
这个标签主要是控制字体大小、字体颜色、字体类型的,也很简单,字体大小还是用数字,颜色用上面提到的html颜色代码一览表,字体类型可以参考一下这个网页,讲得很全,再提一下修改规则:改一下,刷新一下,直到你满意为止!
没错,基本上就这些了,上面提到的这几个元素是拥有个性的最主要元素,还有其他的元素,只要运用修改规则,呵呵,摸索几下就可以拥有新鲜的东西了;
特别贡献一下我的几个代码:
1.滚动条DIY,把以下代码加入到自定义css样式中,我的是银白色的,你也可以DIY,改变#后面的数字就可以了
/*控制滚动条颜色*/
2.给评论框加上背景图片
我的css代码中使用textarea控制的,代码如下(粗体部分):
textarea {
color:#000000;
font-size:10pt;
height:200;
width:300;
background: url(http://blog.donews.com/images/blog_donews_com/winnersong/
97588/_index%20copy.jpg) fixed;
}
用background元素加了一张固定的(fixed)背景图片,关于背景控制,建议你看看这个网页;
3.给日志体加一个框,代码如下(粗体部分) :
.post {
padding:10 0 10 20;
font-size:10pt;
margin:0;
border : 5px groove/*立體內凸框*/
}
就说这么多,相信你能得到一些体会,有问题请留言,我会尽力解答!
相关文章阅读:《我也来美化donews blog系列》
本篇文章使用aigaogao Blog软件发布, “我的Blog要备份”
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=856490