文章教程

关于Nana主题顶部菜单用竖线分隔的css样式修改

微信扫一扫,分享到朋友圈

关于Nana主题顶部菜单用竖线分隔的css样式修改
2

额,昨天跟一个老哥聊天的时候觉得他做的站挺好看的,也是他推荐我用这个主题的,索性差不多搭建完了,慢慢修改我的博客,这里推荐一下他的网站 集优小站(关于设计方面的),有兴趣的可以看看!

对不起,我又特么的扯远了,回到主题,关于Nana主题顶部菜单用竖线分隔的css样式修改,因为我觉得顶部文字看起来有点拥挤分隔不是很好(垃圾UI的狗屁感觉,请忽略)

然后看了这个老哥的站,发现他使用的是用汉字的“丨”最为分隔,搜索引擎把那个丨会抓取进去,跟自己想表达的关键词好像有点偏远了!

个人认为对seo优化不是很友好,强迫症又来了,所以动手改一下css样式:下面贴一下代码(修改位置就是style.css里面)

.top-menu li{
float:left;
padding: 0px 5px;
border-right: 1px solid #ddd;
text-align: center;
line-height: 16px;
display: block;
width: 72px;
height: 16px;
margin-top:5px;
}

很简单的一个css样式添加:

具体修改:复制.top-menu li以后直接打开style.css,按ctrl+f粘贴关键词.top-menu li,找到相应的位置替换就ok了,

实测没错位,手机端也没影响,值得注意的是,我顶部添加的是四个汉字,然后两个字的请修改width: 72px;把72换成合适的像素就对了,我猜48比较合适!

简单教程,不喜勿喷!

补充:贴进去以后会断行,这里贴一个不断行的

.top-menu li{float:left;padding: 0px 5px;border-right: 1px solid #ddd;text-align: center;line-height: 16px;display: block;width: 72px;height: 16px;margin-top:5px}
90后,思维跳跃双子座。 兴趣:游戏,网站,设计,UI。 志向:好好学习,好好挣钱才能做我想做的事情!

复制文章内容弹出版权提示框+复制内容后版权提示粘贴于复制内容之中

上一篇

移除阿里云、腾讯云监控的vcp实例CentOS7

下一篇

你也可能喜欢

2 条评论

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
关于Nana主题顶部菜单用竖线分隔的css样式修改

长按储存图像,分享给朋友