当前位置：移动技术网 > IT编程>网页制作>CSS > XHTML下用dl,dt,dd标签实现翻页的效果代码

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

2017年12月08日 | 移动技术网IT编程 | 我要评论

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">  
<head profile="http://www.w3.org/2000/08/w3c-synd/#">  
<meta http-equiv="content-language" content="zh-cn">  
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style>

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  
  }  
</style>  
</head>  
<body>  
<dl>  
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>  
<dd>  
<img src="http://www.lhsxpumps.com/_images/10qianwan/20171208/b_1_201712081952295943.jpg" alt="" title="" id="a">  
<img src="http://www.lhsxpumps.com/_images/10qianwan/20171208/b_1_201712081952291458.jpg" alt="" title="" id="b">  
<img src="http://www.lhsxpumps.com/_images/10qianwan/20171208/b_1_201712081952292744.jpg" alt="" title="" id="c">  
</dd>  
</dl>  
</body>  
</html>

[Ctrl+A 全选注:]

也许很多人对HTML的UL,OL,LI标签可能都比较熟习,但是对DL,DT,DD可能就不怎么了解了,那么到W3.ORG去看看吧,

,

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

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

给出了术语名，

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

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

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

和

都必须放在

< /dl>标志对之间。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

使用css样式，制作表格（小程序）

效果图：wxml:<view class="table-wrap"><view class="... [阅读全文]
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框

今天在chrome浏览器上测试项目时，突然发现所有的表单控件都被加上了一个奇怪的黑色边框，翻了半天css文件后，... [阅读全文]
4.3 人脸融合应用程序的设计

文章目录4.3 人脸融合应用程序的设计4.3 人脸融合应用程序的设计ManyMasks软件打开之后,将展现一个实... [阅读全文]
LeetCode解析------155.最小栈-设计

题目：设计一个支持 push ，pop ，top 操作，并能在常数时间内检索到最小元素的栈。push(x) ——... [阅读全文]
4.复杂选择器、权重计算、css基础属性

CSS权重!importantInfinity行间样式1000id100class/属性/伪类10标签/伪元素1... [阅读全文]
荐 20200714——git/mac配置/项目运行步骤/一些报错

分布式：GIT工作模式下，每个开发者（安装了git客户端）的电脑就等同于传统SVN服务器svn工作模式：co... [阅读全文]
antd 菜单组件使用时报错：Cannot read property ‘isRootMenu‘ of undefined

项目中使用了antd ui框架，在使用Menu组件得SubMenu组件时报出以下错误：Uncaught Type... [阅读全文]
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来

div的style="background-image: url(img/a.bmp)图片显示不出来首先我的di... [阅读全文]
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）

WHQL提交账户建立指南建立Microsoft 帐户如果你有hotmail，outlook，OneDriver，... [阅读全文]
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系

前些天在开发中遇到了关于浏览器cookie的一些小细节问题。例如：我创建的一个小购物车的web项目。用ngi... [阅读全文]

网友评论


验证码：

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

2017年12月08日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论