打造优快云里最有个性的Blog版面(HTML+CSS) -优快云博客

本文分享了作者花费24小时自学HTML和CSS并成功美化优快云博客的经验。介绍了如何通过分析他人博客源码、使用《CSS中文手册》学习CSS基础知识及实战应用等过程，实现了包括透明背景、定制字体、Flash挂件在内的多项个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

呵呵，从昨天到今天一直在弄优快云的Blog美化。本来我最讨厌的就是网页编程了，不过没办法，
自己的Blog不好看。。。。所以HTML和CSS从0开始自学了满满24小时，做了现在这个版面。。。。
说说我这24小时的一点点经验吧。开始的时候我是打开其它人的Blog，右键看源代码，自己努力分析，
上网查学习资料。这里，介绍一本学CSS很好的书：《CSS中文手册》，吐血推荐。。。。
在对CSS有了个大概的了解以后可以进行实战了。还是先说说别人源码的分析，
我找了几份比较好的： http://blog.youkuaiyun.com/DL88250/archive/2007/02/05/1502837.aspx 进优快云自己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.youkuaiyun.com/images/p_blog_youkuaiyun.com/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;
}

/* 优快云首页、优快云社区、优快云技术中心等等东西 */
#mytopmenu{
display:none;
}
#mylinks{
display:none;
}

/* 页面最下方的Powered by */
.footer{
display:none;
}

/* 隐藏“特别推荐” */
#csdn_zhaig_ad_yahoo{
display:none;
}

/* 中间的主版面 */
body{
    background: url("https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/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.youkuaiyun.com/images/p_blog_youkuaiyun.com/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就放到后台改一下看看效果，呵呵。。。。