学习永不停止
我们一起努力吧!

如何设置wordpress网站导航条两菜单之间的间距

阳江鼎阳抄数设计交流群

wordpress是非常好用也非常流行的博客开源程序,网站模板样式非常丰富,为制作我们心目中的网站提供了非常便利的条件。但是模板终归是模板,在网站制作过程中会遇到各种问题,细节性的调整不可避免。今天为教大家如何修改“wordpress网站导航条菜单之间的间距”。 

导航设置主要控制在/wp-content/themes/模板文件下面的CSS样式文件中。本人的wordpress的模板下面有一个style.css文件。将其打开,找到当中的这一段代码:

/ * Main Navigation * /
.navi{ margin-bottom:10px; padding:0px 15px; width:910px; height:36px; background:url(images/sprite.png) no-repeat 0 0; position:relative; z-index:300;}
.navi li{ float:left; height:24px; line-height:24px; font-size:16px; font-family:"Microsoft Yahei"; text-align:center; color:#FFF; position:relative;}
.navi li a:link, .navi li a:visited{ float:left; padding:0px 20px; height:36px; line-height:32px; _line-height:36px; color:#FFF; text-shadow:1px 1px 0px #105353; text-decoration:none; display:block;}
.navi li a:hover{ color:#FFF; text-shadow:1px 1px 0px #971E00; background:url(images/sprite.png) no-repeat center -40px;}
.navi li.current-menu-item a:link, .navi li.current-menu-item a:visited{ color:#FFF; background:url(images/sprite.png) no-repeat center -40px;}
.navi li.current-menu-item a:hover{ text-decoration:underline;}
.navi li:hover a:link, .navi li:hover a:visited, .navi li:hover a:hover{ color:#FFF; background:url(images/sprite.png) no-repeat center -40px;}

在上面这段代码中,控制间距位于第6行:“.navi li a:link, .navi li a:visited{ float:left; padding:0px 20px; height:36px; line-height:32px; _line-height:36px; ”,这一段代码中的“20px”就是导航菜单之间的间距。

在实际的网站制作中,肯定会有差别,大家根据自己的实际,细心找出来,改一下就行了,应该不难!

未经允许不得转载:http://jdks100.com/风语守望_博客 » 如何设置wordpress网站导航条两菜单之间的间距


分享到:更多 ()
关注“公众平台”:     学习交流QQ群(185619299):

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 7 + 9 = ?

风语守望_博客,共同学习,一起成长!

网站首页联系我们
防复制