以下代码是这个空间的代码,参考如下:
/*头部*/
#header{height:297px;background:url(https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/%D3%EA%C1%B0%DB%AD%D2%ED/pic/item/86bb6e180ff00e6d42a9ad2a.jpeg
" target="_blank" >https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/%D3%EA%C1%B0%DB%AD%D2%ED/pic/item/86bb6e180ff00e6d42a9ad2a.jpeg
) no-repeat 50% 0%;}
#header div.lc{}
#header div.rc{}
#header div.tit{display:none;}/*博客标题*/
#header div.tit a.titlink{color:#999999;font-size:15px;text-decoration:none}
#header div.tit a.titlink:visited{color:#999999;font-size:15px;text-decoration:none}
#header div.desc{display:none;} /*隐藏空间简介*/
/*导航栏设置*/
#tab{width:auto!important;display:table;left:122px;top:59px;line-height:5px!important}
html)body #tab{width:650px!important;}
#tab a{padding-left:0!important;font-size:1px;padding-right:0!important;height:0px;line-height:230px;overflow:hidden;background:#ffffff;display:block;float:left;width:100px;}
#tab a.on{padding:0px!important;}
html)body #tab a{-moz-opacity:0;}
#tab a,#tab a:link,#tab a:visited{font-size:1px;color:#666;filter:alpha(opacity=0);}
#tab a:hover{font-size:1px;color:#ffffff;background:#ffffff;filter:alpha(opacity=50)}
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{color:#ffffff;background:#ffffff;filter:alpha(opacity=30)}
#tab span{display:none}
#tab line{display:none}
#tab2{color:#999999;position:relative;top:10px;background: repeat-y 50% 0%;}
#tab2 span{font-size:12px;font-weight:bold}
#tab2 a{color:#999999;font-size:12px;}
#tab2 a:link{color:#999999;font-size:12px;}
------------------------------------------
首先你先制作一副图片置于空间头部中https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/%D3%EA%C1%B0%DB%AD%D2%ED/pic/item/86bb6e180ff00e6d42a9ad2a.jpeg
" target="_blank" >https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/%D3%EA%C1%B0%DB%AD%D2%ED/pic/item/86bb6e180ff00e6d42a9ad2a.jpeg
,当然图片上写的字体及图像内容任你自己发挥ps,然后把#tab 里的宽度高度用代码放置在图片的位置,实现链接距离完美结合。。。
拿你的这个模板来说:它的理念是这样的
上面的6个人物图片和背景是一整张图片,只不过是吧导航栏的背景去掉然后加高加宽,直接照在6个人物上面,再设置当鼠标指向是改变它的(导航栏)透明度,
头部代码:
/*头部*/
#header{height:297px;background:url(https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/%D3%EA%C1%B0%DB%AD%D2%ED/pic/item/86bb6e180ff00e6d42a9ad2a.jpeg
) no-repeat 50% 0%;}
#header div.lc{}
#header div.rc{}
#header div.tit{display:none;}/*博客标题*/
#header div.tit a.titlink{color:#999999;font-size:15px;text-decoration:none}
#header div.tit a.titlink:visited{color:#999999;font-size:15px;text-decoration:none}
#header div.desc{display:none;} /*隐藏空间简介*/
/*导航栏设置*/
#tab{width:auto!important;display:table;left:122px;top:59px;line-height:5px!important}
html>body #tab{width:650px!important;}
#tab a{padding-left:0!important;font-size:1px;padding-right:0!important;height:0px;line-height:230px;overflow:hidden;background:#ffffff;display:block;float:left;width:100px;}//这儿就是设置的它的宽高(因为导航栏是个链接所以要在链接里设置)
#tab a.on{padding:0px!important;}
html>body #tab a{-moz-opacity:0;}
#tab a,#tab a:link,#tab a:visited{font-size:1px;color:#666;filter:alpha(opacity=0);}
#tab a:hover{font-size:1px;color:#ffffff;background:#ffffff;filter:alpha(opacity=50)}//当鼠标指向时透明度为50
#tab a.on,#tab a.on:link,#tab a.on:visited,#tab a.on:hover{color:#ffffff;background:#ffffff;filter:alpha(opacity=30)}//平常为30,alpha(opacity=30)的数值是从0到100的值越大越清晰,反之
#tab span{display:none}
#tab line{display:none}
#tab2{color:#999999;position:relative;top:10px;background: repeat-y 50% 0%;}
#tab2 span{font-size:12px;font-weight:bold}
#tab2 a{color:#999999;font-size:12px;}
#tab2 a:link{color:#999999;font-size:12px;}
介绍了这么多总该明白了吧
主要是给你介绍这样做的理念,不要禁锢与一个想法
当然这个模板就是这个理念。