前端练习2-分页效果

原理：

     利用超链接实现分页效果。（但此效果的实现与周文彬网站上的方法不同）

<! 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 : 240px ; 

  height : 170px ; 

  border : 10px solid #eee ; 

 } 

dd  { 

  margin : 0 ; 

  width : 240px ; 

  height : 170px ; 

  overflow : hidden ; 

 } 

img  { 

  border : 1px solid black  

 } 

dt  { 

  position : absolute ;  

  top : 50px ;

  margin-top :  125px ;

  margin-left :  90px ;

 } 

a  { 

  display : inline-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.jb51.net/upload/2007322173319560.jpg"  alt =  ""  title  = ""  id = "a"  />  

< img  src =  "http://www.jb51.net/upload/2007322173319816.jpg"  alt =  ""  title  = ""  id = "b"  />  

< img  src =  "http://www.jb51.net/upload/2007322173320970.jpg"  alt =  ""  title  = ""  id = "c"  />  

</ dd >   

</ dl >   

</ body >   

</ html >

运行结果：

<dl><dt><dd>列表标签用法：

     <dl>

          <dt>列表标题</dt>

          <dd>列表内容</dd>

          <dd>列表内容</dd>

     </dl>

     注：dt和dd放于dl标签内，标签dt与dd处于dl下相同级——即dt不能放入dd内，dd不能放入dt内；dd标签可以若干；同时不能不加dl地单独使用dt标签或dd标签。