time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】9、css装饰图片画廊示例之使用:before 和:after 伪类创建一个span标签

【HTML5实践教程】9、css装饰图片画廊示例之使用:before 和:after 伪类创建一个span标签

时间:2012-12-05 23:19 点击:2993次 字体:[ ]




  在上一讲中,我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式,使用:before 和 :after 伪类。:before经常会用到,他可以用来添加额外的元素。

  demo预览地址:http://webdesignerwall.com/demo/decorative-gallery-2/

 

  HTML

  下面是一个ul列表代表的图片画廊。

  1. <ul class="gallery clip"> 
  2.     <li> 
  3.         <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"> 
  4.     </li> 
  5.     <li> 
  6.         <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image"> 
  7.     </li> 
  8.     <li> 
  9.         <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image"> 
  10.     </li> 
  11. </ul> 

 

  CSS

  下面是为.gallery设置的css,这里需要注意的一点是,我们需要为.gallery下面的a标签设置position: relative。

  1. .gallery { 
  2.     margin0 0 25px
  3.     text-aligncenter
  4. .gallery li { 
  5.     display: inline-block
  6.     margin5px
  7.     list-stylenone
  8. .gallery a { 
  9.     positionrelative
  10.     display: inline-block

 

 

 

  :before元素

  我们将会为 :before 元素指定一个30 x 60px大小的曲别针背景图片。注意到我将css的content属性设为空值。没有空的content属性,容器就不会显示。

【HTML5实践教程】9、css装饰图片画廊示例之使用:before 和:after 伪类创建一个span标签_www.fengfly.com

  1. .clip a:before { 
  2.     positionabsolute
  3.     content' '
  4.     top: -5px
  5.     left: -4px
  6.     width30px
  7.     height60px
  8.     backgroundurl(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat

 

 

  艺术边框

  利用这种技术,你可以再图片上添加任意的遮罩效果。下面的例子,我把图片背景换成了艺术边框。

【HTML5实践教程】9、css装饰图片画廊示例之使用:before 和:after 伪类创建一个span标签_www.fengfly.com

  1. .frame a:before { 
  2.     positionabsolute
  3.     content' '
  4.     top: -22px
  5.     left: -23px
  6.     width216px
  7.     height166px
  8.     backgroundurl(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat

 

 

  HTML5画廊

  我们可以使用html5标签,创造更高级的画廊。下面的例子,我们使用<figure>包装图片,<figcaption>包含图片标题。

【HTML5实践教程】9、css装饰图片画廊示例之使用:before 和:after 伪类创建一个span标签_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-210741-1.html
标签: HTML5 css :after :before
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: