Hi 您目前尚未登陆
请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

上官雨伦

2006年接触 Discuz。原 New.Discuz! Support Team 开发团队负责人,致力于网页前端设计。现职河北省张家口市职业技术学院教师。

Discuz 主题列表页左侧板块导航栏美化 heatlevel

2017-12-24 13:24:11 发布

Discuz /[教程] 1647 2 0

上官雨伦Writer

张家口市 | 博主、教师

90

主题

99

帖子

99

积分

Admin

Rank: 16

积分
99
发表于 2017-12-24 13:24 | 显示全部楼层 |阅读模式 [离线请留言]
1.png

HTML:
  1. <!--{if $leftside}-->
  2.         <div id="sd_bdl" class="bdl" onmouseover="showMenu({'ctrlid':this.id, 'pos':'dz'});" style="width:{$_G['setting']['leftsidewidth']}px;margin-left:-{$_G['leftsidewidth_mwidth']}px">
  3.                 <!--{hook/forumdisplay_leftside_top}-->
  4.                 <!--[diy=diyleftsidetop]--><div id="diyleftsidetop" class="area"></div><!--[/diy]-->

  5.                 <div id="forumleftside">
  6.                         <!--{subtemplate forum/forumdisplay_leftside}-->
  7.                 </div>

  8.                 <!--[diy=diyleftsidebottom]--><div id="diyleftsidebottom" class="area"></div><!--[/diy]-->
  9.                 <!--{hook/forumdisplay_leftside_bottom}-->
  10.         </div>
  11. <!--{/if}-->
复制代码

CSS:
  1. /*
  2.         主题列表页 - 左侧板块导航
  3. ------------------------------------------------------------------- */
  4. #sd_bdl{width: 150px;border: 1px solid #dbeffc;background-color: #FFF;}
  5. #sd_bdl .bdl_h{color: #09E;height: 48px;background: #FFF;text-align: center;line-height: 48px;font-size: 20px;border-bottom: 1px solid #edf7fe;}
  6. #sd_bdl.bdl dl{border-bottom: 1px solid #edf7fe;text-align: center;background: #f5fafe;font-size: 14px;color: #3f95e5;cursor: pointer;overflow: hidden;margin: 0;}
  7. #sd_bdl.bdl dl.a dt{background: #99cdf1;}
  8. #sd_bdl.bdl dl.a dt a{color: #FFF;background: url("../images/forum_arrow_normal.png") no-repeat 6px -57px;}
  9. #sd_bdl.bdl dt{margin-bottom: 0;border: 0;background: inherit;display: block;padding-left: 12px;height: 40px;line-height: 40px;}
  10. #sd_bdl.bdl dt a{padding: 0;background: url("../images/forum_arrow_normal.png") no-repeat 6px 14px;}
  11. #sd_bdl.bdl dd{border-bottom: 1px solid #dcefff;background-color: #FFF;padding-left: 32px;height: 40px;line-height: 40px;font-size: 13px;color: #666;overflow: hidden;}
  12. #sd_bdl.bdl dd:last-child{border-bottom: 0;}
  13. #sd_bdl.bdl dd a{height: 40px;line-height: 40px;}
  14. #sd_bdl.bdl dd.bdl_a a{background-color:inherit; color: #09E; font-weight: 500; }
复制代码


图片:
forum_arrow_normal.png

0 使用道具 举报

附件信息

forumdisplay_leftside.htm

864 Bytes, 下载次数: 4

您需要登录后才可以回帖 登录 | 立即注册

xiaocai [离线请留言]Member 2017-12-28 16:18

子菜单前面留白比较多,最好是加点什么。
还有你居然能控制住不用驼峰式写法也是不易。

上官雨伦Writer [离线请留言]Admin 2017-12-29 12:11

xiaocai 发表于 2017-12-28 16:18
子菜单前面留白比较多,最好是加点什么。
还有你居然能控制住不用驼峰式写法也是不易。 ...

大体的样式做出来了,那些细节就懒得去改。
至少比默认的那个好看一些。