产品使用及交流论坛

注册

 

QQ登录

只需一步，快速开始

返回列表
发新话题 回复该主题
查看: 2890|回复: 3

设置文章页视力保护色教程 [复制链接]

scjzs
头像

  • PageAdmin学员
  • 136
  • 325
  • 2009-04-16
1#
t T
发表于 2014-12-08 13:31 |只看楼主
引入JS:
  1. function ChangeColor(color)
  2. {
  3.    $("sublanmu_content").style.backgroundColor=color;
  4. }
复制代码
CSS中加入：
  1. .articleinfor .info span.co{line-height:12px;font-size:10px;padding:0 6px;zoom:1;border:1px solid #666;margin-right:5px;cursor:pointer}
  2. .articleinfor .c1{background-color:#F9F6AF;}
  3. .articleinfor .c2{background-color:#9DDBF4;}
  4. .articleinfor .c3{background-color:#DEDEDE;}
  5. .articleinfor .c4{background-color:#F9D1D9;}
  6. .articleinfor .c5{background-color:#E4C8F8;}
  7. .articleinfor .c6{background-color:#ffffff;}
复制代码
内容页模型中合适位置加入：
  1. 视力保护色：
  2. <span onClick="ChangeColor('#F9F6AF')"  class="co c1"></span>
  3. <span onClick="ChangeColor('#9DDBF4')"  class="co c2"></span>
  4. <span onClick="ChangeColor('#DEDEDE')"  class="co c3"></span>
  5. <span onClick="ChangeColor('#F9D1D9')"  class="co c4"></span>
  6. <span onClick="ChangeColor('#E4C8F8')"  class="co c5"></span>
  7. <span onClick="ChangeColor('#ffffff')"  class="co c6"></span>
复制代码
最后记得更新模型文件哦······
效果如下：
分享 转发
四川注册建造师网 www.scjzs.net
TOP
scjzs
头像

  • PageAdmin学员
  • 136
  • 325
  • 2009-04-16
2#
t T
发表于 2014-12-09 15:58 |只看楼主

DIV模块固顶教材

1、下载http://www.pageadmin.net/e/js/jquery.min.js到本地2、需要固定DIV模块中加入如下代码：
  1. <script type="text/javascript" src="http://www.pageadmin.net/e/js/jquery.min.js"></script>
复制代码
  1. <script type="text/javascript">
  2.     $(function () {
  3.         var ie6 = /msie 6/i.test(navigator.userAgent)
  4.         , dv = $('#test'), st;            //test为DIV标签ID
  5.         dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
  6.         $(window).scroll(function () {
  7.             st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
  8.             if (st >= parseInt(dv.attr('otop'))) {
  9.                 if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
  10.                     dv.css({ position: 'absolute', top: st });
  11.                 }
  12.                 else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 30 });//top: 30为距离顶部距离，置顶请设置为0
  13.             } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
  14.         });
  15.     });
  16. </script>
复制代码
演示：http://keleyi.com/keleyi/phtml/fixdiv.htm
四川注册建造师网 www.scjzs.net
TOP
scjzs
头像

  • PageAdmin学员
  • 136
  • 325
  • 2009-04-16
3#
t T
发表于 2014-12-09 16:06 |只看楼主

导航中火字图标添加教程

右键查看源代码，每个栏目菜单都一个类似
<li class="menu_style" id="MenuItem67" ....
比如你要给MenuItem67这个菜单加图标，可以在css文件中增加样式

#MenuItem67{background:url(图标路径) no-repeat;no-repeat right top}
四川注册建造师网 www.scjzs.net
TOP
lxt0556
头像

  • PageAdmin学员
  • 261
  • 468
  • 2013-04-25
4#
t T
发表于 2014-12-10 10:31 |只看该用户

好东西，收藏，希望再出精品
安庆市人民路小学  www.aqrmlxx.com
TOP
上一主题| 下一主题
返回列表
发新话题 回复该主题
高级编辑器高级编辑器