更改.css文件代码来自定义导航样式

Sunday, May 6, 2012 | 1分钟阅读 | 更新于 Sunday, May 6, 2012

@
更改.css文件代码来自定义导航样式

在修改picmemo时的笔记

[][1]
修改前的原貌

修改要求:1.将菜单的字体颜色改成其它颜色(找到改的位置)2.将高亮效果改变

1.将菜单的字体颜色改成其它颜色

在style.css中的修改代码关键词:nav

位置:

更改导航的字体颜色所在行列,padding

将最后的color改成自己想要的颜色。我改成的是黑色。

[][2]
after

 

2.将高亮效果改变

原来的高亮效果是深灰色的,不怎么好看,现在准备改成自定义图片的高亮样式,示例是个个粉色的(色调和主站不搭,这里讲究用,嘿嘿!)

我们找到#nav li.current-menu-item a

[][3]
菜单高亮按钮代码

将background color改成自己喜欢的颜色:background-color:喜欢颜色的代码;

或者自己上传的图片链接:background:url(images/文件名);(将图片放到wp-content\themes\主题名\images\目录下)

[][4]
after高亮更改后

 

更改后所在页面的高亮就变成了我们现在的边缘虚化的粉红色,而鼠标掠过的高亮还没有变,我们找到hover关键字然后锁定行列

[][5]
hover更改行列代码

按照上边的更改方式将background中的这一堆改成background:url(images/文件名);

 

  • 有的时候我们做的图片并不完全合适
[][6]
before字体宽度限定

我们还要给每个菜单按钮限制长度,位置在#nav li a{}

随意位置加入代码width:100px;(px之前的数值可以根据自己的情况进行调整)

 

  • 有的时候我们的高亮图片不能居中显示
[][7]
before图片剧中

我们在代码后边加入 top center no-repeat;

例:background:url(images/XX.gif) top center no-repeat;

[][8]
before图片剧中

这样图片就乖乖的居中显示咯!

 

© 2008 - 2025 回忆的故乡

🌱 Powered by Hugo with theme Dream.

About Me

Coding(the Vibe one), Tennis, Portrait Photographer

Boston University Worcester Polytechnic Institute

欢迎来到我的个人博客!