iNove导航栏和侧边栏样式的修改

此次iNove导航栏的修改是完全参照WordPress的经典主题Twenty Eleven，貌似最近导航栏流行的都是黑底白字的样式，这不得不说谷歌老大是互联网行业的风向标。

先看一下更改后的样式效果：

修改的文件自然是博客主题的层叠样式表文档（style.css），导航栏控制代码是：

/* navigation START */#navigation {background:#FFF;border-bottom:1px solid #A6A6A6;}#menus li {display:inline;list-style:none;}#menus li a {background:transparent url(img/menu.gif) no-repeat;display:block;color:#382E1F;height:31px;line-height:31px;padding:0 20px;margin-left:-10px;text-decoration:none;font-size:11px;float:left;z-index:1;}#menus li a:hover,#menus li a.current {background-position:0 -31px;}#menus li.current_page_item a,#menus li.current-cat a {background-position:0 -62px;}#menus li a.home {background-position:0 -93px;width:45px;padding:0;margin-left:0;text-indent:-999em;}#menus li a.home:hover {background-position:0 -124px;}#menus li.current_page_item a.home {background-position:0 -155px;}#menus li a.lastmenu:hover {background-position:0 0;cursor:default;}#searchbox {background: url(img/searchbox.gif) no-repeat;width:209px;height:21px;display:block;float:right;margin-top:4px;margin-right:10px !important;margin-right:5px;padding:3px 2px;}#searchbox .textfield {background:none;border:0px;width:185px;float:left;}#searchbox .button {background:none;border:0px;width:18px;height:18px;cursor:pointer;float:left;margin-top:1px;}#searchbox .searchtip {color:#999;}/* navigation END */

只需把Twenty Eleven的导航栏代码稍作修改，替换以上的代码即可，如下所示：

/* navigation START */#navigation {	background:#181818;	border-bottom:1px solid #A6A6A6;}#menus li {	display:inline;	list-style:none;	}#menus li a {	color: #eee;	display:block;			line-height: 3.333em;	padding: 0 1.2125em;	text-decoration:none;	font-size:11px;	float:left;	z-index:1;	}#menus li a:hover, #menus li a.current {	background: #f9f9f9; /* Show a solid color for older browsers */	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);	background: -o-linear-gradient(#f9f9f9, #e5e5e5);	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);	color: #373737;}#menus li.current_page_item a, #menus li.current-cat a {	font-weight: bold;}#searchbox {background: url(img/searchbox.gif) no-repeat;width:209px;height:21px;display:block;float:right;margin-top:8px;margin-right:10px !important;margin-right:5px;padding:3px 2px;}#searchbox .textfield {background:none;border:0px;width:185px;float:left;}#searchbox .button {background:none;border:0px;width:18px;height:18px;cursor:pointer;float:left;margin-top:1px;}#searchbox .searchtip {color:#999;}/* navigation END */

默认的侧边栏widget的分割是图片实现的分割线，代码如下：

#centersidebar,#northsidebar .widget,#southsidebar .widget {background:url(img/widgetsep.png) bottom no-repeat;padding:10px 15px 16px;}

我把这条分割线去掉，然后用widget的标题加底色来分割，代码如下：

#centersidebar,#northsidebar .widget,#southsidebar .widget {padding:4px 15px 6px;}#centersidebar .widget h3,#northsidebar .widget h3,#southsidebar .widget h3 {background: #E1E7E9;margin: 0 -10px;padding: 5px 10px;font-size: 11px;border-bottom: 1px solid white;}