打造CSDN里最有个性的Blog版面(HTML+CSS)http://blog.csdn.net/DL88250/archive/2007/02/06/1503789.aspx
本文共 4096 字,大约阅读时间需要 13 分钟。
呵呵,从昨天到今天一直在弄CSDN的Blog美化。本来我最讨厌的就是网页编程了,不过没办法,
自己的Blog不好看。。。。所以HTML和CSS从0开始自学了满满24小时,做了现在这个版面。。。。
说说我这24小时的一点点经验吧。开始的时候我是打开其它人的Blog,右键看源代码,自己努力分析,
上网查学习资料。这里,介绍一本学CSS很好的书:《CSS中文手册》,吐血推荐。。。。
在对CSS有了个大概的了解以后可以进行实战了。还是先说说别人源码的分析,
我找了几份比较好的: 进CSDN自己Blog的后台,在配置项里添加CSS代码。
由于自己没有一点经验,我一开始是把那几份一份地复制进去看效果,再结合《CSS中文手册》,重点是知道
什么是id,class,只要知道这两个的概念的话,在一开始的Blog板面设计里就勉励够用了。
看到这里,你应该感觉自己没有CSS基础也可以修改Blog的板面了吧,呵呵。。。。下面是我的CSS代码,
先对Blog里CSS的总体布局来个简介:
/* 评论相关,设置这个值是为了透明背景 */ .commentsTable { background-color : #000 ; } /* 隐藏“标语”,我用了自己的图作背景 */ .headerText { display : none ; } /* 最上面的整个Banner */ .header { border : none ; height : 200px ; background : url("https://p-blog.csdn.net/images/p_blog_csdn_net/dl88250/260239/o_Banner_.jpg") no-repeat ; } /* 设置域为a中的文本 */ a { font-family : 华文彩云 ; font-size : 17px ; color : darkgreen ; text-decoration : none ; } a:link { color : mediumvioletred ; text-decoration : none ; } a:visited { color : #990066 ; text-decoration : none ; } a:active { color : #660066 ; } a:hover { color : #660066 ; text-decoration : underline ; } /* 左边导航栏内容 */ #leftcontent { border : none ; padding-top : 99 ; background-color : transparent ; } /* “文章”、“相册”等 */ .listtitle { font-family : 华文行楷 ; color : #6666CC ; background : none ; } /* 不显示WMP播放器,关于播放器的设置是在HTML里做的 */ #MediaPlayer { display : none ; } /* 整个文章的内容栏 */ #centercontent { padding-top : 0 ; font-size : 100px ; } /* 日历表,现在我用的是模板带的 */ .CalTitle { background-color : transparent ; } .CalDayHeader { color : #993366 ; font-family : 华文彩云 ; background-color : transparent ; } .entrylist { background-color : transparent ; font-family : 华文行楷 ; font-size : 130% ; color : green ; border : none ; } /* 整个版面表的设置 */ table { filter : alpha(opacity=60) ; border-collapse : collapse ; } /* CSDN首页、CSDN社区、CSDN技术中心等等东西 */ #mytopmenu { display : none ; } #mylinks { display : none ; } /* 页面最下方的Powered by */ .footer { display : none ; } /* 隐藏“特别推荐” */ #csdn_zhaig_ad_yahoo { display : none ; } /* 中间的主版面 */ body { background : url("https://p-blog.csdn.net/images/p_blog_csdn_net/dl88250/260239/o_%e8%83%8c%e6%99%af.jpg") ; cursor : url('http://webme.bokee.com/inc/mouse020.ani') ; font-size : 0.8em ; font-family : Geneva, Arial, Helvetica, sans-serif ; } /* 评论栏相关 */ #comments { padding-left : 40px ; font-size : 10pt ; background-color : #000 ; } #CommentForm { background-color : #000 ; width : 500 ; background : url("https://p-blog.csdn.net/images/p_blog_csdn_net/dl88250/260239/o_%e8%af%84%e8%ae%ba%e8%83%8c%e6%99%af.gif") no-repeat ; } /* 公告栏 */ .newsItem { font-family : 华文行楷 ; color : red ; } /* 所有img图 */ img { filter : invert() ; } /* 文章正文 */ .post { border : dotted #663333 ; background-color : #000 ; padding-bottom : 5px ; padding-top : 5px ; line-height : 120% ; color : chocolate ; } .postFoot { color : #33CCFF ; } /* 文章摘要 */ .postText { color : chocolate ; } 上面的代码就是我现在用的这个CSS了,可以先都贴在自己的CSS修改栏里看看效果吧^^
现在对Blog的CSS应该怎么改有个大概了解了。我觉得其实美化Blog最重要的是要自己去看
Blog的代码。可以这样,先打开自己的主页,右键看源码。看的时候要特别主意class和id
这两个关键字,关于这两个概念的详细介绍请参考《CSS中文手册》。先不管什么,找到
class或者id就放到后台改一下看看效果,呵呵。。。。
好了,关于CSS的修改可以告一个段落了,下面说说HTML的挂件添加。我的Blog里主要
用的是那个透明的金鱼Flash、一个WMP播放器和一个钟表。代码如下:
< EMBED align =right height =700width=200 src =http://imgfree.21cn.com/free/flash/17.swf style ="LEFT:10px; POSITION:absolute; TOP:-70px" width =700; quality ="high" wmode ="transparent" > < font size =4 > < object classid ="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" class ="OBJECT" id ="MediaPlayer" width ="200" height ="65" > < param name ="ShowStatusBar" value ="-1" > < param name ="Volume" value ="1" > < param name ="Filename" value ="http://www.sy53.com/mp3/brave.mp3" > < embed type ="application/x-oleobject" codebase ="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" flename ="wmv" src ="http://www.wangyanpiano.com/file/Tears0372.wma" width ="185" height ="80" ></ embed ></ object > < EMBED SRC =http://bbs.smgbb.cn/Skins/Default/clock.swf WIDTH =170 HEIGHT =190 wmode =transparent quality =high loop =true menu =false > 代码可以直接Copy过去,调整一下显示时的大小就能用了。这里要提醒的是不要放太多的Flash,相当耗CPU滴。。。。
好了,我简短的CSDN之Blog美化教程到这里就结束了,祝大家都有个个性化的Blog!