博客園自定義設計（二）自定義header樣式

從博客園的樣式中找了不少，發現都不是本身喜歡的風格。那麼，就本身來寫吧。不過對於一個後端開發人員來講，百度都要被翻爛了。

首先從網上找前輩的文章，都是用了Lessismore這個模版。更換模版後，查看頁面結構，頂部是一個id爲header的div。好，就從這裏開始修改。

1、自定義logo

將header更換爲本身喜歡的樣式，簡單作一個logo的圖片，放在原來title所在的div的背景圖中。刪除以前的title文本。

js代碼以下：

//去掉標題
$("#blogTitle").html("");

更換後的樣式：

 

 

2、修改標題樣式

這裏在原來的基礎上作一些css的調整就足夠了。期間不停的翻css文檔，太多不會的了。

後面貼出完整的css代碼。

 

3、修改搜索框

基於以前所用的網站的搜索，大多都會在頂部有個好看的搜索框。雖然博客提供了站內搜索，可是位置不是本身想要的。

思路：隱藏以前的，在頂部插入新的，搜索事件綁定到以前的搜索上。

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({width:"0px"});        
        }

    }else{
        $("input.sb-search-input").addClass("search-open").stop().animate({width:"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-width:1366px;}
#header>div{float:left}
#header ul{float:left}
#blogTitle{height:40px;width: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;width: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; width:70px;text-align:center;font-family:微軟雅黑}
#navigator a:hover{display:block;background:#0ab2d2;}
.div-search{height:37px;width: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;width: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;width:0px;position:absolute;z-index:2;right:13.5px;float:right}

　　

下一步，開始修改左側欄目的樣式。