Dedecms 模板中心

您现在的位置: 首页 > 教程文档 > 织梦技巧 >

DEDECMS V5两行导航栏的样式修改

来源:未知 发布时间:2016-05-31热度:
很多用户反馈当前默认模板的栏目只能显示一行 如果栏目过多就无法显示了 其实可以简单的修改CSS文件即可让栏目两行显示. 效果预览: 修改方法: 1.修改CSS: 替换 模板目录\样式目录(templets\style) 中dede.css的栏目菜单的CSS: .topmenu{ height:40px; backgr...

很多用户反馈当前默认模板的栏目只能显示一行 

如果栏目过多就无法显示了 

其实可以简单的修改CSS文件即可让栏目两行显示. 

效果预览: 

 


修改方法: 

1.修改CSS: 

替换 "模板目录\样式目录(templets\style) " 中dede.css的栏目菜单的CSS: 

.topmenu{ 
height:40px; 
background:url(../images/topmenu_bg.gif) left top repeat-x; 

.topmenu ul{ 
width:900px; 
height:40px; 
background:url(../images/topmenu_r.gif) top center no-repeat; 
overflow:hidden; 

.topmenu ul li{ 
float:left; 
margin-left:-2px; 
text-align:center; 
background:url(../images/topmenu_bg.gif) left bottom no-repeat; 

.topmenu ul li a{ 
float:left; 
color:#FFFFFF; 
display:block; 
padding-left:17px; 
padding-right:15px; 
text-decoration:none; 
height:40px; 
line-height:37px; 

.topmenu ul li a:hover{ 
color:#FFFF99; 
background:url(../images/topmenu_o.gif) center bottom no-repeat; 

.topmenu .rssbut{ 
position:relative; 
float:right; 
margin:-30px 8px auto; 
display:inline; 



替换为 

.topmenu{ 
height:61px; 
background:url(../images/topmenu_bg2.jpg) left top repeat-x; 

.topmenu ul{ 
width:900px; 
height:58px; 
background:url(../images/topmenu_r.gif) top center no-repeat; 
overflow:hidden; 
padding-top:3px; 

.topmenu ul li{ 
float:left; 
margin-left:-2px; 
text-align:center; 
white-space:nowrap; 

.topmenu ul li a{ 
float:left; 
color:#FFFFFF; 
display:block; 
padding-left:17px; 
padding-right:15px; 
text-decoration:none; 
height:29px; 
line-height:29px; 

.topmenu ul li a:hover{ 
text-decoration:underline; 
color:#FFFFCC; 

.topmenu .rssbut{ 
display:none; 




然后更新 "模板目录\图片目录(templets\images) "下的两个文件

topmenu_bg2.jpg
topmenu_r.gif

    责任编辑:好织梦