关注互联网、关注WEB前端设计、关注技术、关注程序、关注生活
上一篇:列表页list_article.htm带页码的SEO修改方法 下一篇:dede5.3自定义模型使用教程详解

DEDE 5.3 完美实现两行导航栏的样式修改

先请看图片效果:

 





修改方法:

第一步:修改CSS: 找到源码5.3模板目录中"\templets\style\dedecms.css " 大约在188行的样子,如下部分

找到这段代码

.header .nav{
width:100%;
height:32px;
background:url(../images/nav-bg.gif) repeat-x;
clear:both;
overflow:hidden;
}
.header .nav ul{
height:32px;
margin:0px auto;
overflow:hidden;
}
.header .nav ul li{
float:left;
line-height:31px;
background:url(../images/nav-bg.gif) 0px -32px no-repeat;
margin-left:-2px;
}
.header .nav ul li a{
height:32px;
padding:0px 16px 0px 17px;
display:block;
color:#FFF;
float:left;
}
.header .nav ul li a:hover{
color:#FF3;
}



把它替换为
 

.header .nav{
height:61px;
background:url(../images/nav-bg.jpg) left top repeat-x;
}
.header .nav ul{
width:1002px;
height:58px;

overflow:hidden;
padding-top:3px;
}
.header .nav ul li{
float:left;
margin-left:-2px;
text-align:center;
white-space:nowrap;
}
.header .nav ul li a{
float:left;
color:#FFFDDD;
display:block;
padding-left:17px;
padding-right:15px;
text-decoration:none;
height:29px;
line-height:29px;
}
.header .nav ul li a:hover{
text-decoration:underline;
color:#000;
}




第二步:下载所需要的图片文件并上传到模板目录"\templets\images\"解得文件直接覆盖这个文件夹即可

修改并后进入后台进行栏目、文档等页面的更新即可,你所希望的就会看到如上图。。。
 


欢迎关注,TC文章有的来源于网络,如果侵犯了您的权益,我们将在第一时间处理。

本文地址:http://20tc.com/int/dedecms/2042.html

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博

热点标签

Google 广告

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循"署名-非商业用途-保持一致"的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.