dl+ol应用分析

题目: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;
}

var ddiShow=2;
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";
var iShow;
ddiShow=iShow;
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";
return false;
}

测试菜单一
  1. 测试内容(菜单一)1-24
  2. 测试内容(菜单一)1-24
  3. 测试内容(菜单一)1-24
  4. 测试内容(菜单一)1-24
  5. 测试内容(菜单一)1-24
  6. 测试内容(菜单一)1-24
  7. 测试内容(菜单一)1-24
  8. 测试内容(菜单一)1-24
测试菜单二
  1. 测试内容(菜单二)1-24
  2. 测试内容(菜单二)1-24
  3. 测试内容(菜单二)1-24
  4. 测试内容(菜单二)1-24
  5. 测试内容(菜单二)1-24
  6. 测试内容(菜单二)1-24
  7. 测试内容(菜单二)1-24
  8. 测试内容(菜单二)1-24
测试菜单三
  1. 测试内容(菜单三)1-24
  2. 测试内容(菜单三)1-24
  3. 测试内容(菜单三)1-24
  4. 测试内容(菜单三)1-24
  5. 测试内容(菜单三)1-24
  6. 测试内容(菜单三)1-24
  7. 测试内容(菜单三)1-24
  8. 测试内容(菜单三)1-24
测试菜单四
  1. 测试内容(菜单四)1-24
  2. 测试内容(菜单四)1-24
  3. 测试内容(菜单四)1-24
  4. 测试内容(菜单四)1-24
  5. 测试内容(菜单四)1-24
  6. 测试内容(菜单四)1-24
  7. 测试内容(菜单四)1-24
  8. 测试内容(菜单四)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部分  


代码如下:

<script type="text/javascript"> 
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; 

</script>

改个事件试一下

学习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;
}

var ddiShow=2;
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";
var iShow;
ddiShow=iShow;
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";
return false;
}

测试菜单一
  1. 测试内容(菜单一)1-24
  2. 测试内容(菜单一)1-24
  3. 测试内容(菜单一)1-24
  4. 测试内容(菜单一)1-24
  5. 测试内容(菜单一)1-24
  6. 测试内容(菜单一)1-24
  7. 测试内容(菜单一)1-24
  8. 测试内容(菜单一)1-24
测试菜单二
  1. 测试内容(菜单二)1-24
  2. 测试内容(菜单二)1-24
  3. 测试内容(菜单二)1-24
  4. 测试内容(菜单二)1-24
  5. 测试内容(菜单二)1-24
  6. 测试内容(菜单二)1-24
  7. 测试内容(菜单二)1-24
  8. 测试内容(菜单二)1-24
测试菜单三
  1. 测试内容(菜单三)1-24
  2. 测试内容(菜单三)1-24
  3. 测试内容(菜单三)1-24
  4. 测试内容(菜单三)1-24
  5. 测试内容(菜单三)1-24
  6. 测试内容(菜单三)1-24
  7. 测试内容(菜单三)1-24
  8. 测试内容(菜单三)1-24
测试菜单四
  1. 测试内容(菜单四)1-24
  2. 测试内容(菜单四)1-24
  3. 测试内容(菜单四)1-24
  4. 测试内容(菜单四)1-24
  5. 测试内容(菜单四)1-24
  6. 测试内容(菜单四)1-24
  7. 测试内容(菜单四)1-24
  8. 测试内容(菜单四)1-24

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

(0)

相关推荐

  • dl+ol应用分析

    题目: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; lin

  • cssQuery()的下载与使用方法

    Introduction cssQuery() is a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors. Usage Syntax elements = cssQuery(selector [,

  • 如jQuery般易用的api风格代码分享

    回到正题,如jQuery般易用的api风格?那到底是什么样的风格呢?个人觉得比较重要的有两点,一是对dom操作的链式调用,并且都呈队列状态,不仅仅使代码的可读语义变得通俗易懂,而且省去了对同一dom元素的多个链式操作时的回调中嵌回调的方式,这是很重要的一点. 二是对元素的批量操作,这是建立在它强大的选择器上的.jq选择器很强大,这是人所众知的,就不多说了.而且肯定也不是一两天就能实现的了的,所以下面就对我所说的这两点谈谈我的看法. 基于它强大的选择器,jquery所有的dom操作都依赖于根据它选

  • jQuery实现的简单歌词滚动功能示例

    本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css  /* CSS Document */ * { margin: 0; padding: 0; font-size: 12px; } body { background: none; } input, button, select, textarea { outline: none; } ul, li, dl, ol { list-style: none; } a { colo

  • vue移动端屏幕适配详解

    flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localhost:8080 npm run dev 原理概述 插件安装 # 插件一:amfe-flexible npm install amfe-flexible --save #  插件二: node-sass npm

  • js实现楼层滚动效果

    本文实例为大家分享了jquery实现滑动楼梯效果,实现楼层的滚动以及点击楼层按钮跳转到对应的楼层,代码如下 html代码: <div style="height: 500px; background-color: black; color: #fff;">无意义的文本</div> <div class="layerbox"> <div class="layer num1">第一层</div&g

  • div+css布局必了解的列表元素ul ol li dl dt dd详解

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>--</li> <li>--</li> <li>--</li> </ol> 表现为: 1-- 2-- 3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul> <li>--</li> <li>--</li> </ul&

  • 基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能,总结前端学习过的内容. 技术:NodeJS.Express.Monk.MongoDB.AngularJS.BootStrap.跨域 效果: 一.Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错. Bootstrap是Twitter推出的一款简洁.直

  • javascript模版引擎-tmpl的bug修复与性能优化分析

    精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 "javascript micro templating" 最为精妙,寥寥几笔便实现了模板引擎核心功能. 它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-micro-templating/ 让我们先看看他的源码: 复制代码 代码如下: (function(){ var cache = {}; this.tmpl = function (st

  • javascript委托(Delegate)blur和focus用法实例分析

    本文实例讲述了javascript委托(Delegate)blur和focus用法.分享给大家供大家参考.具体分析如下: Opera (9.5b) 对于所有的focus和blur事件,不能正确的触发两次: 因此,focus和blur事件的处理函数可以被委派到事件的捕获阶段. 例子1(列表类): 复制代码 代码如下: <ol id="列表">   <li><a href="#">列表项1</a>     <ol&g

随机推荐