XHTML下用dl,dt,dd标签实现翻页的效果代码

2024-04-05 15:20:22

今天在标准之类的blog(http://www.aa25.cn)看到"纯CSS代码实现翻页"
的文章

dl {
position:absolute;
width:389px;
height:154px;
border:10px solid #eee;
}
dd {
margin:0;
width:389px;
height:154px;
overflow:hidden;
}
img {
border:1px solid black
}
dt {
position:absolute;
right:3px;
top:50px;
}
a {
display:block;
margin:1px;
width:20px;
height:20px;
text-align:center;
font:700 12px/20px "宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;
border:1px solid #fff;
filter:alpha(opacity=40);
opacity:.4;
}
a:hover {
background:#000
}

123

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

也许很多人对HTML的UL,OL,LI标签可能都比较熟习,但是对DL,DT,DD可能就不怎么了解了,那么到W3.ORG去看看吧,
http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-list.html
,http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-list.html

标记(“definition title”，定义标题)和

标记(“definition description”，定义描述)创建的。

给出了术语名，

标记给出了术语的定义。
也就是说

用来创建列表中的上层项目，

用来创建列表中最下层项目，

和

都必须放在

< /dl>标志对之间。

XHTML下用dl,dt,dd标签实现翻页的效果代码

今天在标准之类的blog(http://www.aa25.cn)看到"纯CSS代码实现翻页" 的文章 dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; overflow:hidden; } img { border:1px solid black } dt { position:absolute; r
DL.DT.DD实现左右的布局简单例子第1/2页

这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方: 1.如果用UL还布局,右边一栏比较麻烦: 2.文字外边的边框自适应比较麻烦: 3.很可能要定死高度: 所以,细细地看一看这个布局,想一想还是用DL.DT.DD作是合理的: 1.布局合理一些: 2.将来扩展很方便: 3.CSS一定很少: 试着写了写,看一看还行!在可控范围内! 布局布分当然不用说了: 复制代码代码如下: <h1>标题</h1> <div> <
dl,dt,dd制作的CSS垂直菜单

感觉跟ul和li有点类似,不过也算是一种新思路,源码如下: dl,dt,dd制作的CSS垂直菜单 #menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(file:///E|/ceshi/media/bottom.gif) no-repeat bottom left;} #menu dt {margin:0; padding: 10px; font-size: 1.4em; font-we
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&
jQuery实现类似标签风格的导航菜单效果代码

本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引入了jquery,若运行代码后左上角提示错误,刷新页面即可正常.你可点击菜单查看到整体的效果.点击后对应菜单项下移,可扩展成二级菜单,也可以改成TAB标签布局,感兴趣的朋友自己研究吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bq-style-nav-menu-co
jsp实现上一页下一页翻页功能(示例代码)

前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可二话不多说,看代码,代码里面写的还算比较清楚.
点下网页的任意地方,都可到达指定页面的js代码

var Then = new Date(); Then.setTime(Then.getTime() + 12*60*60*1000 ); //秒分 var cookieString = new String(document.cookie); var cookieHeader = "POPWIN" ; var beginPosition = cookieString.indexOf(cookieHeader); if (beginPosition == -1) { var newto
XHTML下,JS浮动代码失效的问题

对联代码,查阅它在xhtml下的表达方式,结果很简单了.这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML 的(也就是 document.documentElement 对象)所以,解决办法是:把html下不标准的代码"document.body.scrollTop"变换为"document.documentElement.scrollTop",一切ok! (失效范围:XHTML 1.0 transitional.dtd:XHTML
基于jQuery实现的向下滑动二级菜单效果代码

本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
js+css实现超简洁的二级下拉菜单效果代码

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

XHTML下用dl,dt,dd标签实现翻页的效果代码

相关推荐

随机推荐