我的Cnblog个人主页美化重构小结

首先感谢国家感谢党，也感谢Cnblog，给博主自主编辑CSS和Html代码的权利，于是自然也能添加<script>标签，加入JS代码。

先看下效果：

当然这个是一个很粗糙的改版，我比较喜欢微软雅黑字体，在火狐中国版中看上去还可以，但是在其他非雅黑字体的浏览器中看上去就不是很好了，尤其在现在号称最快的浏览器Opera10.50上字体和段落行间距上渲染得都不是很好。

注意一个小地方，背景小色块的位置和颜色是随机变化的，实现这个效果的不复杂，下面会说到。

我禁用了模板默认的CSS之后，存了个人主页的在本地用Dreamwaver边修改编测试的。

HTML的结构（还算清晰）：

#footer没有标出来，还有一些外包#container和#warpper等，但是主要结构就是这几个。搞笑的是#topMnu是不是故意的？

CSS代码如下：

 

<style>
/*------------------整体修改-------------------------*/
body{
    margin:0;
    padding:0;
    font-size:85%;
    color:#333;
    background-color:#ACE6E6;
}
a,a:link,a:visited,a:active{
    text-decoration:none;
    color:#000;
}
a:hover{
    color:#999;
}
.minyx{
    display:none;
}
#mySearchWrapper{
    display:none;
}
#itnews{
    display:none;!important
}
/*------------------#topMnu-----------------------*/
#topMnu{
    width:100%;
    text-align:right;
    background-color:#009999;
    margin:0;
    padding:10px;
    float:right;
    color:#FFF;
    border-bottom:#fff 4px solid;
    word-spacing:0.5em;
}
#topMnu li{
    color:#55331C;
}

#topMnu a,#topMnu a:link,#topMnu a:visited,#topMnu a:active{
    color:#FFF;
}
#menu a,#menu a:link,#menu a:visited,#menu a:active{
    color:#FFF;
}
#topMnu a:hover,#menu a:hover{
    color:#FF6600;
}
/*----------------#menu-and---#header-----------------*/

#header h1 a{
    margin-left:19px;
    padding-bottom:20px;
    width:550px;
    display:block;
    color:#FF6600;
}
#header h1 a:first-letter{
    font-size:1.5em;
    color:#FFF;
}
#header h1 small{
    margin-left:20px;
    font-size:60%;
    color:#999;
}
#menu{
    clear:both;
    font-size:2.5em;
    margin:0;
    padding:5px;
    padding-left:20px;
    word-spacing:1em;
    position:relative;
    top:-4px;
    background-color:#009999;
    width:600px;
    border-bottom:#fff 4px solid;
    border-right:#fff 4px solid;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
}
#menu li.current{
    color:#00F;!import
}

/*-------一起定义menu----------*/
#topMnu,#menu{
    list-style:none;
}
#topMnu li,#menu li{
    display:inline;
}
/*-----------------#content--------------------*/
#content{
    background-color:#FFF;
    width:575px;
    float:left;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border: 8px #CCC solid;
    border-left:none;
    padding-right:20px;
    overflow:hidden;
}
.PostTitle{
    background-color:#ACE6E6;
    width:95%;
    display:block;
    padding:10px;
}
.post small{
    float:right;
    margin-right:10px;
}
.post small a{
    font-weight:bold;
    font-size:1.3em;
    color:#009999;
}
.post .entry{
    clear:both;
    padding:10px;
    text-indent:2em;
    border-bottom:#CCC 4px dashed;
}
.post .entry strong{
    color:#F00;
}
.post .entry .desc_link{
    color:#090;
    font-weight:bold;
}
.postmetadata li a{
    color:#F00;
}
#pager{
    text-align:right;
    font-weight:bold;
    margin-bottom:20px;
    font-size:1.5em;
}
/*------------------#sidebar--------------------*/
#sidebar{
    position:relative;
    background-color:#FFF;
    width:30%;
    float:right;
    margin-right:70px;
    padding:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    top:-80px;
}
#sidebar ul{
    list-style:none;
}
#sideMain ul li a,#sideRight ul li a,#sideLeft ul li a{
    margin-bottom:10px;
    display:block;
    color:#999;!important
}
#sideMain ul li a:hover,#sideRight ul li a:hover,#sideLeft ul li a:hover{
    color:#090;
    text-decoration:underline;
}
#sideMain,#sideRight,#sideLeft h2{
    color:#3C0;!important
}
/*----------#footer------------*/
#footer{
    clear:both;
}
#footer a{
    display:none;
}
.footText{
    float:right;
    margin-right:100px;
    font-weight:bold;
    color:#333;
}
</style>

关键步骤：

1. 首先应藏了下没必要的两个.minyx等连接；
2. font-size:85%;调节了字体大小，下一步整体定义所有a标签；
3. 对顶菜单和主菜单的<li>inline显示，调节#topMnu位置，右对齐文本，将#menu的position：absolute，top:-4px在原位置上上移4个像素，和#topMnu的下边框重叠，出现连接在一起的效果；
4. 左浮动#content，右浮动#sidebar，类似于#menu一样上调#sidebar的位置，调节边框和和内外边距，处理好位置关系；
5. #footer clear：both，清除浮动。
6. 整体布局弄好后，调节局部大小和颜色；
7. 圆角效果是采用了CSS3标准的border-radius：除了IE和Opera都有不错的支持；
8. 最后觉得背景有些单调，于是把寒假自己DIY的用Javascript随机显示的彩色方块加了进去，下面说一些具体的细节。

Javascript部分：

<script type="text/javascript">

    var width = screen.availWidth;
    var height = screen.availHeight;
    var count = 40;

    for (var i = 0; i < count; i++) {
        var left = Math.round(Math.random() * width);
        var top1 = Math.round(Math.random() * height);
        var redColor = Math.round(Math.random() * 255);
        var greenColor = Math.round(Math.random() * 255);
        var blueColor = Math.round(Math.random() * 255);
        document.write('<div style="width:60px; height:60px; position:fixed; background-color:RGB(' + redColor + ',' + greenColor + ',' + blueColor + '); top:' + top1 + 'px; left:' + left + 'px;z-index:-1000;"></div>')
    }
</script>

解释下：

    var width = screen.availWidth;
    var height = screen.availHeight;

取屏幕的高度和宽度；

        var left = Math.round(Math.random() * width);
        var top1 = Math.round(Math.random() * height);

随机产生每个小彩块的位置；

  3.

        var redColor = Math.round(Math.random() * 255);
        var greenColor = Math.round(Math.random() * 255);
        var blueColor = Math.round(Math.random() * 255);

随机产生每个小块的RGB颜色；

4.画彩块。

有没有注意到变量是top1，而不是top，因为用top的时候在chrome会有个小bug，显示top的类型为DOMobject，我也弄不明白，请高人指点下。

这是一个很粗糙的改版，请大家提提意见，喜欢的话也可以把代码拷过去，自己改改用用。