当前位置:  编程技术>WEB前端

dl+ol应用分析

    来源: 互联网  发布时间:2014-09-06

    本文导语:  题目:dl+ol的练习 作者:嗷嗷 上次 li 把 dl 模拟了~dl不知道要干什么了~找了ol一起来做复合列表~ 这个练习除了css外~外加用了点JS  先看下难看的演示  因为最近太懒~没做漂亮的样式   学习dl中 dl * { ma...

题目:dl+ol的练习
作者:嗷嗷

上次 li 把 dl 模拟了~dl不知道要干什么了~找了ol一起来做复合列表~

这个练习除了css外~外加用了点JS 
先看下难看的演示  因为最近太懒~没做漂亮的样式  
学习dl中 dl * { margin: 0; padding: 0; font-size:12px; } dl { width: 405px; height:128px; border:1px #000 solid; } dt { width:120px; height: 32px; line-height: 32px; text-align: center; } dt a { display: block; text-decoration: none; } dt.ing a { background:#efefef; } dd { position: absolute; display: none; width:280px; background-color: #fff; } dd li { line-height: 16px; list-style-type: none; text-align:right; color:#999; } dd li a { float:left; display:inline; padding-left:5px; } dd.ing { display: block; } dd.no { display:none; } dd#d1 { margin-top:-32px; margin-left:120px; } dd#d2 { margin-top:-64px; margin-left:120px; } dd#d3 { margin-top:-96px; margin-left:120px; } dd#d4 { margin-top:-128px; margin-left:120px; } 测试菜单一
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试菜单二
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试菜单三
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试菜单四
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24

  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    CSS的重点 
    代码如下:

    dt.ing a 

            background:#efefef;/*移上去的背景*/ 

    dd 

            position: absolute;/*把DD流出来*/ 
            display: none;/*把DD默认隐藏起来*/         
            width:280px; 
            background-color: #fff; 

    dd.ing 

            display: block;/*移上去的显示*/ 

    dd.no 

            display:none; 

    dd#d1 

            margin-top:-32px; 
            margin-left:120px;/*把dd移到合适的地方 #d2#d3#d4也一样*/ 
    }  
     
    JS部分  
    代码如下:

     
    var ddiShow=2;//定义一个变量来记录选中的 因为dl dd都要~为了省个变量所以..用数字 
    function show(iShow) 
    {   
            document.getElementById(['d'+ddiShow]).className="no"; 
            document.getElementById(['t'+ddiShow]).className="no";//改掉原来的样式~隐藏起来 
            var iShow; 
            ddiShow=iShow;//把选中的的值给ddiShow 留下次用 
            document.getElementById(['d'+iShow]).className="ing"; 
            document.getElementById(['t'+iShow]).className="ing";//改样式显示出来~~ 
        return false; 

      
     
    改个事件试一下
    学习dl中 dl * { margin: 0; padding: 0; font-size:12px; } dl { width: 405px; height:128px; border:1px #000 solid; } dt { width:120px; height: 32px; line-height: 32px; text-align: center; } dt a { display: block; text-decoration: none; } dt.ing a { background:#efefef; } dd { position: absolute; display: none; width:280px; background-color: #fff; } dd li { line-height: 16px; list-style-type: none; text-align:right; color:#999; } dd li a { float:left; display:inline; padding-left:5px; } dd.ing { display: block; } dd.no { display:none; } dd#d1 { margin-top:-32px; margin-left:120px; } dd#d2 { margin-top:-64px; margin-left:120px; } dd#d3 { margin-top:-96px; margin-left:120px; } dd#d4 { margin-top:-128px; margin-left:120px; } 测试菜单一
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试内容(菜单一)1-24
  • 测试菜单二
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试内容(菜单二)1-24
  • 测试菜单三
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试内容(菜单三)1-24
  • 测试菜单四
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24
  • 测试内容(菜单四)1-24

  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

        
     
     

    您可能感兴趣的文章:

  • 应用性能分析套件 zPerfmon
  • 开源的移动分析应用 Countly
  • 应用性能分析工具 HPC Toolkit
  • 用hook 函数,抓到了应用层的包,如何分析
  • 应用密码分析工具 Bletchley
  • VC++的if语句应用范围分析
  • 应用分析监控平台 闪电狗
  • 基于mysql事务、视图、存储过程、触发器的应用分析
  • 大家帮忙分析一下程序在哪个地方出了错?管道应用实例.
  • Android Mms之:联系人管理的应用分析
  • C#数组应用分析第1/2页
  • android 开发 文件读写应用案例分析
  • (急)有劳分析关于websphere的出错:与数据库相连的应用程序已达到最大数目
  • C#词法分析器之输入缓冲和代码定位的应用分析
  • Android Handler主线程和一般线程通信的应用分析
  • HDOJ 1443 约瑟夫环的最新应用分析详解
  • C++中new与delete、malloc与free应用分析
  • 嵌入式Linux系统中应用的GTK+和X分析
  • c# 数组应用分析(初级)
  • 深入分析Android ViewStub的应用详解
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 重装服务器后IIS网站错误(应用程序中的服务器错误)
  • 让HTML5应用与原生应用一样运行流畅 Steroids.js
  • 隐藏andriod 应用app启动图标的几种方法
  • 如何将应用程序加到桌面或应用程序组?
  • ​传统应用的docker化迁移
  • 怎样开发在LINUX 上运行的应用程序,像WINDOWS桌面应用程序一样
  • Http协议3XX重定向介绍及301跳转和302跳转应用场景
  • adnroid已安装应用中检测某应用是否安装的代码实例
  • Docker 1.12.4应用容器引擎发布及下载地址
  • linux商业应用或者说开源软件商业应用是否需要付费?
  • Docker v1.13.0 应用容器引擎正式版发布及下载地址
  • 在多cpu的linux系统上,到底是用多线程应用好些还是多进程应用好些??
  • docker应用之利用Docker构建自动化运维
  • 我要监测一台远程电脑的状态(未上线/上线但没打开每个应用程序/上线且打开应用程序),该如何作?
  • Windows下Docker应用部署相关问题详解
  • Android应用内调用第三方应用的方法
  • Docker详细的应用与实践架构举例说明
  • asp.net应用程序的生命周期和iis应用程序池
  • 手动执行应用程序ok,但用crontab(在正确的用户名下)运行应用程序就报-12545(tns连接错误),怎么解决?
  • 一个静态库包含多个函数,应用程序连接了库中的某个函数,应用程序目标代码中是否还包含了该静态库中的其他函数代码?
  • 介绍下速度快而应用功能齐全的LINUX版本,忍受不了windows的低速了……应用即可,最好带X。


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3