• 网站首页
  • 安装指南
  • 模板设计
  • 模块说明
  • 常见问题
  • 优化技巧
  • 开发指南
  • 帮助中心
  • 入门必读
    • -模板首页
    • -目录结构
  • css规范
    • -css实例
    • -基本样式
    • -表格样式
    • -表单样式
    • -布局样式
    • -常用样式
    • -醒目效果
    • -常用界面
  • 网页规范
    • -总体布局示例
    • -提交表单示例
    • -table表格示例
    • -文章列表示例
    • -文章阅读示例
    • -tab标签示例
    • -li列表
  • JS规范
    • -js文件说明
    • +通用函数
      • |-$函数
      • |-$A
      • |-$F
      • |-loadJs
    • +Element扩展
      • |-previousElement
      • |-nextElemet
      • |-remove
      • |-subTag
      • |-setValue
      • |-getValue
      • |-show
      • |-hide
    • +String扩展
      • |-trim
      • |-cint
      • |-stripTags
      • |-hasSubString
    • +Array扩展
      • |-indexOf
      • |-each
    • +Cookie处理
      • |-get
      • |-set
      • |-del
    • +Form处理
      • |-serialize
      • |-getElements
      • |-enable
      • |-disable
      • |-reset
    • +Ajax处理
      • |-Request
      • |-Update
      • |-Tip
    • +界面控件
      • |-对话框
      • |-日期选择框
      • |-UBB提交框
  • 模板设计
    • -模板标签标记
    • -赋值变量形式
    • -变量调节器
    • -函数调用
    • -判断语句
    • -循环语句
    • -页面显示相关说明
    • -页面显示配置语法
    • -页面定制
    • -包含子模块
  • 导航示例
    • -横向切换导航
    • -竖向下拉导航
    • -横向下拉导航
  • 文章列表特效
    • -排行榜列表一
    • -排行榜列表二
    • -图文列表
  • tab标签特效
    • -切换效果
    • -三角切换
    • -时间切换
    • -竖向切换
    • -特殊切换1
    • -特殊切换2
    • -相互切换1
    • -相互切换2
    • -相互切换3
    • -颜色切换
您现在所在的位置:JIEQI CMS模板设计手册 > tab标签特效 > 颜色切换

颜色切换


最终效果:
点击免费下载...

DIV结构如下:
   │body {} /*这是一个HTML元素*/
   └. m_top {} /*页面顶部*/
      ├. fl {} /*登录*/
      ├. fr {} /*颜色切换*/
        ├. soso {} /*颜色切换图标*/
   └. m_head {} /*页面头部*/
      ├. h_logo {} /*网站标志*/
      ├. h_link {} /*BANNER旁边的链接*/
        ├. ulitem {} /*项目列表*/
   └. m_menu {} /*菜单栏*/
      ├# jieqi_menu {} /*子菜单*/
   └. block {} /*区块容器*/
      ├. blocktitle {} /*区块标题*/
      ├. blockcontent {} /*区块内容*/
   └# topm {} /*页面推荐部分*/
      ├# cleft {} /*封面推荐*/
        ├. block {} /*区块容器*/
           ├. blocktitle {} /*区块标题*/
           ├. blockcontent {} /*区块内容*/
              ├. ultow {} /*文章列表*/
              ├. ultow {} /*文章列表*/
      ├# cright {} /*小说推荐*/
        ├. block {} /*区块容器*/
           ├. blocktitle {} /*区块标题*/
           ├. blockcontent {} /*区块内容*/
              ├. ultow {} /*文章列表*/
              ├. ultow {} /*文章列表*/
   └. main {} /*整个页面容器*/
      ├# left {} /*页面左边*/
        ├. block {} /*用户登录区块*/
           ├. blocktitle {} /*用户登录标题*/
           ├. blockcontent {} /*用户登录内容*/
        ├. block {} /*文章总排行区块*/
           ├. blocktitle {} /*文章总排行标题*/
           ├. blockcontent {} /*文章总排行内容*/
              ├. ultop {} /*文章列表*/
      ├# centers {} /*页面中间*/
        ├. block {} /*本站公告区块*/
           ├. blocktitle {} /*本站公告标题*/
           ├. blockcontent {} /*本站公告内容*/
        ├. block {} /*最近更新区块*/
           ├. blocktitle {} /*最近更新标题*/
           ├. blockcontent {} /*最近更新内容*/
              ├. ulmul {} /*文章列表*/
      ├# right {} /*页面右边*/
        ├. block {} /*文章搜索区块*/
           ├. blocktitle {} /*文章搜索标题*/
           ├. blockcontent {} /*文章搜索内容*/
              ├. ulrow {} /*文章列表*/
        ├. block {} /*总推荐榜区块*/
           ├. blocktitle {} /*总推荐榜标题*/
           ├. blockcontent {} /*总推荐榜内容*/
              ├. ultop {} /*文章列表*/
        ├. block {} /*投票栏区块*/
           ├. blocktitle {} /*投票栏标题*/
           ├. blockcontent {} /*投票栏内容*/
   └. main {} /*整个页面容器*/
       ├. block {} /*友情链接区块*/
          ├. blocktitle {} /*友情链接标题*/
          ├. blockcontent {} /*友情链接内容*/
   └. main {} /*整个页面容器*/
       ├. m_foot {} /*页面版权*/