HTML5 CSS3专题 纯CSS打造相册效果

• 

  

• 

  

• 

  

• 

  

  简单描述一下：

  1、ul 中 li决定了照片的个数

  2、ul使用样式float:right，width:140px;使得显示在相册的右侧区域

  3、li的float：left，使得li可以左浮动；li中存放大图的div，position为absolute会根据div#gallary进行定位，默认只有第一个显示

  4、当鼠标移动到li上时，改变li span img的透明度和li div的display将大图显示

  接下来就是css文件：

  css中没有什么复杂的样式，就不做描述了。此外html中我引入了一个重置样式的css , reset.css ，大家也可以使用自己习惯的重置样式：

  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{

  margin: 0;

  padding: 0;

  font-size: 100%;

  border: 0;

  outline: 0;

  background: transparent;

  }

  ol, ul {

  list-style: none;

  }