怎么把百度空间的菜单栏用图片来选择

2024-12-12 10:10:26
推荐回答(2个)
回答1:

以下代码是这个空间的代码,参考如下: /*头部*/ #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 里的宽度高度用代码放置在图片的位置,实现链接距离完美结合。。。

回答2:

拿你的这个模板来说:它的理念是这样的 上面的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;} 介绍了这么多总该明白了吧 主要是给你介绍这样做的理念,不要禁锢与一个想法 当然这个模板就是这个理念。