博客园自定义设计（二）自定义header样式

从博客园的样式中找了很多，发现都不是自己喜欢的风格。那么，就自己来写吧。不过对于一个后端开发人员来说，百度都要被翻烂了。

首先从网上找前辈的文章，都是用了Lessismore这个模版。更换模版后，查看页面结构，顶部是一个id为header的div。好，就从这里开始修改。

一、自定义logo

将header更换为自己喜欢的样式，简单做一个logo的图片，放在原来title所在的div的背景图中。删除之前的title文本。

js代码如下：

//去掉标题
$("#blogTitle").html("");

更换后的样式：

二、修改标题样式

这里在原来的基础上做一些css的调整就足够了。期间不停的翻css文档，太多不会的了。

后面贴出完整的css代码。

三、修改搜索框

基于之前所用的网站的搜索，大多都会在顶部有个好看的搜索框。虽然博客提供了站内搜索，但是位置不是自己想要的。

思路：隐藏之前的，在顶部插入新的，搜索事件绑定到之前的搜索上。

js代码如下：

$("#sidebar_search").hide();
var _search=document.createElement("div");
$(_search).css("float","left").addClass("div-search").append($("<input class="sb-search-input" placeholder="Search" type="search" name="search" id="search"><span class="sb-icon-search"> </span>")).appendTo($("#navigator"));
$(".sb-icon-search").bind("click",function(ev){
    ev.preventDefault();
    if($("input.sb-search-input").hasClass("search-open")){
        if($("input.sb-search-input").val()){
            $("#q").val($("input.sb-search-input").val());
            $(".btn_my_zzk").click();
        }else{
            $("input.sb-search-input").removeClass("search-open").stop().animate({"0px"});        
        }

    }else{
        $("input.sb-search-input").addClass("search-open").stop().animate({"180px"});
    }
    
});

这样，我们自己的搜索，就可以触发真正的搜索了。

加上menu的css代码，全部如下：

_body{cursor:url("http://cnc.i.gtimg.cn/qzone/space_item/orig/0/17168.ani"),url("http://cnc.i.gtimg.cn/qzone/space_item/orig/0/17168.gif"),auto;}
*{padding:0;margin:0;font-family:微软雅黑}
:-moz-placeholder{color:#fff}
::-moz-placeholder{color:#fff}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#fff}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#fff}
input{outline:0}
a:hover {
  transition: 1s all;
  -webkit-transition: 1s all;
  -moz-transition: 1s all;
  -o-transition: 1s all;
}

#header{background-color:#252e38;border-bottom:3px solid #0ab2d2;min-height:90px;min-1366px;}
#header>div{float:left}
#header ul{float:left}
#blogTitle{height:40px;140px;overflow:hidden;margin:25px 100px 25px 50px;background-image:url(http://images.cnblogs.com/cnblogs_com/luochengqiuse/705731/o_logo.png);padding:0px;background-repeat:no-repeat}
#navigator{background-color:inherit;border:none;70%;padding:0}
#navigator li{height:90px;color:#FFFFFF;line-height:90px;margin:0px;}
.blogStats{display:none;}
#navigator a{display:block;color:#fff;backgrounf:red;padding:0px 10px 0px 10px;font-weight:bold;-moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius: 45px; 70px;text-align:center;font-family:微软雅黑}
#navigator a:hover{display:block;background:#0ab2d2;}
.div-search{height:37px;180px;margin-top:26.5px;position:absolute;right:50px;}
.sb-icon-search{background:url(http://images.cnblogs.com/cnblogs_com/luochengqiuse/705731/o_search.png);z-
index:10;37px;height:37px;display:block;position:absolute;float:right;padding:0;margin:0;cursor:pointer;right:2px;z-index:99}
.sb-search-input{height:37px;border:none;background:#0ab2d2;color:#FFFFFF;-moz-border-radius: 45px; -webkit-border-radius: 45px; border-radius: 45px;padding-left:15px;0px;position:absolute;z-index:2;right:13.5px;float:right}

　　

下一步，开始修改左侧栏目的样式。