账号通
    

账号  

密码  

1497

查看

0

回复
主题:[分享]运用css技巧实现网站地图中突出显示频道 [收藏主题]  
zhitaige 当前离线

1196

主题

0

广播

0

粉丝
添加关注
级别:八年级

用户积分:7830 分
登录次数:267 次
注册时间:2006/11/8
最后登录:2015/9/4
zhitaige 发表于:2009/5/25 9:56:00   | 显示全部帖子 查看该作者主题 楼主 
做在线知识付费 选科汛云开店

官方默认的网站地图无法突出显示频道,栏目和频道混在一起,如下图

 


此主题相关图片如下:qq截图未命名1.jpg
qq截图未命名1.jpg


频道的名称样式和栏目的样式都是一样的,如果不去修改源码的话,这样的效果很不好看

我们通过修改网站地图模板的css样式,可以有效的解决这个问题

css样式如下:

<style>
.map { width:100%px; }
.map a:link, .map a:visited { font-size:12px; font-weight:normal }
.map li { width:135px; line-height:25px; float:left; border-bottom: 1px  dashed #CCC; text-align: center; margin-right: 15px; background-image: url(/Images/map.jpg); background-repeat: no-repeat; background-position: left top; margin-top: 5px; }
</style>

把上面的样式覆盖到网站地图的模板中
我们给li增加浮动,增加宽度,实现横排的效果
给li设置一个背景,这个背景必须和li的高度和宽度一致
把这个背景设置为水平居左,垂直居上,并且不重复,这样做是为了只让频道下有背景而栏目下没有
再给li设置一个虚线下边框,目的是为了和别的频道区别开来
通过上面的设置我们可以到达下面的效果


此主题相关图片如下:qq截图未命名.jpg
qq截图未命名.jpg

 

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.04688秒 powered by KesionCMS 9.0