demo.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商品展示</title>
  6.     <link rel="stylesheet" type="text/css" href="demo.css">
  7.     <script type="text/javascript" src="demo.js"></script>
  8. </head>
  9. <body>
  10. <div  class="demo" >
  11.     <ul>
  12.         <li>
  13.             <a href="http://baidu.com">
  14.                 <img src="1.jpg"/>
  15.                 <span>学会html5 你就是赢家</span>
  16.            </a>
  17.         </li>
  18.         <li>
  19.             <a href="http://baidu.com">
  20.                 <img src="1.jpg"/>
  21.                 <span>学会html5 你就是赢家</span>
  22.             </a>
  23.         </li>
  24.         <li>
  25.             <a href="http://baidu.com">
  26.                 <img src="1.jpg"/>
  27.                 <span>学会html5 你就是赢家</span>
  28.             </a>
  29.         </li>
  30.     </ul>
  31. </div>
  32. </body>
  33. </html>

demo.css

  1. div,ul,li,dl,dt,dd {
  2.     margin:0;
  3.     padding:0;
  4.  
  5. }
  6. ul,li,dl,dt,dd {
  7.     list-style: none;
  8. }
  9. .demo{
  10.     width:930px;
  11. }
  12. .demo ul li {
  13.     float:left;
  14.     width:300px;
  15.     margin-right: 6px;
  16.     position:relative;
  17. }
  18. .demo ul li img{
  19.     border:none;
  20.     position:relative;
  21.     z-index:22;
  22. }
  23. .demo ul li a{
  24.     width:300px;
  25.     display:block;
  26.     border:2px solid #ccc;
  27. }
  28. .demo ul li a:hover{
  29.     border:2px solid #C03;
  30. }
  31. .demo ul li a span{
  32.     position:absolute;
  33.     z-index:33;
  34.     bottom:2px;
  35.     left:2px;
  36.     width:300px;
  37.     height:40px;
  38.     filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;
  39.     background:#000;
  40.     color:#fff;
  41.     line-height:40px;
  42.     text-align:center;
  43.     display:none;
  44. }
  45. .demo ul li a:hover span{
  46.     display:block;
  47. }

　　效果：

图片

    21:32:21 2017-09-06

html/css 图片展示效果的更多相关文章

  1. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  2. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  3. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  4. 如何用Jquery做图片展示效果

    一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...

  5. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  6. css图片切换效果分析+翻译整理

    Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/1 ...

  7. lightbox图片展示效果

    1.lightbox 头部导入: <script type="text/javascript" src="../Public/Js/prototype.js&quo ...

  8. css 图片波浪效果

    参考:https://blog.csdn.net/zhichaosong/article/details/80944924#_99 效果: wave2.png html: <!DOCTYPE h ...

  9. css实现六边形图片（最简单易懂方法实现高逼格图片展示）

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

随机推荐

  1. leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和]

    题目链接 Given a m x n matrix mat and an integer threshold. Return the maximum side-length of a square w ...

  2. 【HDOJ6645】Stay Real（堆）

    题意:给定一个n个点的堆,每个点有一个值a[i],每个点必须将在其所有儿子被取之后才能被取 有两个人都按最佳策略行动,问结束之后两人分别取的值之和 n<=1e5,1<=a[i]<=1 ...

  3. eclipse 4.5 离线安装mybatis generator1.3.6卡在Install New Software的解决方法

    转载:https://blog.csdn.net/ssshen14/article/details/80004459 离线插件 下载:https://github.com/mybatis/genera ...

  4. Win32下session和window station以及desktop一些介绍和应用

    会话(session).工作站(WindowStation).桌面(Disktop).窗口(window) https://blog.csdn.net/hlswd/article/details/77 ...

  5. web接口开发基础知识－什么是web接口？

    比如我们访问百度的首页,输入的url地址是:https://www.baidu.com/ 那么当我们在浏览器地址栏中输入url,敲回车后,发生了什么事情?怎么就能通过1个url地址就能看到百度的首页了 ...

  6. 深入学习Keras中Sequential模型及方法

    https://www.cnblogs.com/wj-1314/p/9579490.html

  7. 测开之路七十八：shell之函数和参数

    函数 function function_name(){    statement1    Statement2    ....    statementn} function_name $var1  ...

  8. Linux下jdk1.6安装指引

    Linux安装JDK步骤1. 先从网上下载jdk(jdk-6u4-linux-x64-rpm.bin) ,推荐SUN的官方网站www.sun.com,下载后放在/home目录中,当然其它地方也行. 进 ...

  9. telnet访问出现telnet:Unable to connect to remote host: No route to host

    Linux下的防火墙默认是不允许telnet服务通过的,所以,当防火墙不允许telnet服务通过时就会出现上面的这种情况,可以将防火墙关闭或者勾选允许telnet服务即可解决如上的问题.

  10. P2634 [国家集训队]聪聪可可(题解)(点分治)

    P2634 [国家集训队]聪聪可可(题解)(点分治) 洛谷题目 #include<iostream> #include<cstdlib> #include<cstdio& ...