卢松松主题模板导航栏完美优化

2015-08-29 9:28 建站相关 天中好青年

  天中青年在使用卢松松自适应主题时遇到一个问题,那就是当导航栏分类目录过多时,会出现另起一行显示的问题,严重影响了网站美观。

  如图这是卢松松博客和小虎博客的导航栏显示效果:

    曾经试图修改,但总不得其法。

  无意间发现有一款卢松松的非自适应主题却能避免这些问题,(微童年的就是),看了看他的导航栏菜单的自定义CSS,与自己使用的自适应主题的CSS文件不一样。

  于是就将这些代码移植过来,放到导航栏CSS文件里。

    然后重建文件,就完美解决了上述问题。代码如下:

#menu{background: url(images/menu-bg-lusongsong.jpg) no-repeat;width: 950px;font-family:Microsoft YaHei,Verdana,Arial;} 

#menu ul{height: 42px; padding:0 10px;font-weight: normal;} 

#menu ul,  #menu, #menu li{ line-height: 32px; *line-height: 33px;}

#menu li{float: left;text-align: center;line-height: 42px;list-style-type: none;} 

#menu li a{color: #FFF;font-size: 15px;font-weight: bold;line-height: 42px; padding: 0 15px;display: block;}

#menu li a:hover, #menuON,#menu a:hover{color: #FFFF73;text-decoration: underline;} 

#menu li span{line-height: 42px;}

#menu li.page_right{color: #FDFCBC;text-align: center;line-height: 42px;padding: 0 8px;}

#menu li.page_right a{font-size: 13px;padding: 0;display: block;color: #FDFCBC;display: block;line-height: 42px;font-weight: normal;}

#gnew{background-image: url(images/gnew.gif);background-repeat: no-repeat;background-position: right top;padding-top: 10px;}

#hot{background-image: url(images/hot.gif);background-repeat: no-repeat;background-position: right top;padding-top: 10px;}

相关阅读:


如何实现手机端公告栏显示 

卢松松主题模板的几个优化小技巧

卢松松自适应主题如何在手机端实现分页功能 

如何实现卢松松网站那样的相关阅读功能

卢松松模版主题如何实现首页图片轮播效果

发表评论:

  • 8条评论
  • 助推博客2015-09-12 19:24:33回复
  • 其实这个主题也不错,只不过是z-blog的,我是用不了了
  • 清风美文2015-09-01 16:03:09回复
  • 用这个主题的太多了,相来自己也想用呢,但对Z-BLOG不熟悉,还是用回了WP
  • 天中好青年2015-08-29 22:40:36回复
  • 呵呵,主题可选择性很多,关键是个人喜欢就行。
  • 李明2015-08-29 21:08:57回复
  • 不错,但用这主题的人太多了。
  • boke112导航2015-08-29 16:16:09回复
  • 不错啊,现在折腾起卢松松主题越来越熟练了
无言的温柔
不知道想说什么,但还是想说些什么
话家乡☆天中百科
轻松一下:调戏调戏小狗
最近发表
文章归档