css3购物网站商品文字提示实例
先来看效果图：
<ignore_js_op> 
当鼠标划过图片时，有着泰迪熊黑色长方形的背景就会出现。
来看HTML5+CSS3代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>购物网站商品文字提示</title>
  6. <style type="text/css">
  7. *{margin:0;padding:0;}
  8. #con{width:500px;height:470px;margin:50px auto;position:relative;}
  9. #con p{background:#000;color:#fff;width:100%;height:30px;text-align:center;line-height:30px;position:absolute;left:0;bottom:0;opacity:0.6;height:0;-webkit-transition:height 0.5s;}
  10. #con:hover p{height:30px;}
  11. </style>
  12. </head>
  13. <body>
  14. <div id="con">
  15. <img src="data:images/dog.jpg" alt="商品图" title="商品图">
  16. <p>泰迪熊</p>
  17. </div>
  18. </body>
  19. </html>

复制代码

代码解释：
构建一个div，div中存放一张需要展示的商品图片，再添加商品图片的文字表述，
给div添加css样式属性，给p元素也添加css样式属性，其中那个高度设置为0，不可见。重点在与用到了绝对定位与相对定位，还对他们不了解的请看此贴http://www.00h5.com/thread-133-1-1.html
把描述文字定位好后添加transition动画，这里我们要鼠标划过div的时候改变的只是p的高度为原来30px即可，而动画也是设置高度属性

css3购物网站商品文字提示实例的更多相关文章

  1. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

  2. jQuery 浮动导航菜单（购物网站商品类型）

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...

  3. 基于Spring+Spring MVC+Mybatis的B2C购物网站

    代码地址如下:http://www.demodashi.com/demo/12935.html 准备工作 当前项目运行的系统环境是MacOS,已经测试可以正常运行,并且之前开发的时候也在Windows ...

  4. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  5. springMVC+angular+bootstrap+mysql的简易购物网站搭建

    springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(a ...

  6. PHP操作实现一个多功能购物网站

    PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...

  7. php实现一个简单的购物网站

    实现一个简单的购物网站 一.考试时间:8小时 二.开发工具:DW 三.数据库:见附件 四.需要实现的页面: Index:浏览商品页面,显示商品列表,用户可以点击“购买“. ViewCart:查看购物车 ...

  8. Redis构建处理海量数据的大型购物网站

    本系列教程内容提要 Java工程师之Redis实战系列教程教程是一个学习教程,是关于Java工程师的Redis知识的实战系列教程,本系列教程均以解决特定问题为目标,使用Redis快速解决在实际生产中的 ...

  9. PHP给图片加上图片水印和文字水印实例

    下面给大家分享一下PHP给图片加上图片水印和文字水印实例,这也是网站经常用到的功能,把代码加上去,调用就很简单了. 核心代码: function imageWaterMark($groundImage ...

随机推荐

  1. CTSC模拟题 树上的路径

    Description 给定一棵\(N\)个结点的树,结点用正整数\(1 \dots N\)编号,每条边有一个正整数权值.用\(d(a, b)\)表示从结点\(a\)到结点\(b\)路径上经过边的权值 ...

  2. salt-API基本验证命令

    配置SALT-API,网上有很多,作下来也很顺利. 我的参考: 作一下验证的记录: curl -k https://x.x.x.x:8000/login -H "Accept: applic ...

  3. Hibernate 注解多对一 要求在多那边产生一个外键而不会另外产生一个表

    在使用hibernate注解的时候,我们映射一对多时,有时候莫名其妙的产生了两张表,其中一张表是A_B,这并不符合数据库中多的一方放置一个外键的原则,那么如何控制只产生一个表呢,请看下面的例子: 多的 ...

  4. C/C++ 开源库及示例代码

    C/C++ 开源库及示例代码 Table of Contents 说明 1 综合性的库 2 数据结构 & 算法 2.1 容器 2.1.1 标准容器 2.1.2 Lockfree 的容器 2.1 ...

  5. 14.5.5.2 Deadlock Detection and Rollback Deadlock 检测和回滚

    14.5.5.2 Deadlock Detection and Rollback Deadlock 检测和回滚 InnoDB 自动检测事务死锁和回滚一个事务 InnoDB 尝试挑选小的事务来回滚,事务 ...

  6. Java中类Exchaner浅析

    Exchaner用于实现两个人之间的数据交换,每个人在完成一定的事物后想与对方交换数据,第一个先拿出数据的人将一直等待第二个人拿着数据到来时,才能彼此交换数据. 张孝祥老师在讲解Exchaner时的比 ...

  7. IP定位 C#

    IP定位 已经不是什么新的技术,但是在做项目中却会常常用到.找网上找了许久,也做了许多的实验,觉得QQwry.dat,很很好用的,作者也提供了开发的源码和大家分享. 在这里感谢作者.我在项目中也用到了 ...

  8. Unity3d 使用DX11的曲面细分

    Unity3d surface Shaderswith DX11 Tessellation Unity3d surface shader 在DX11上的曲面细分 I write this articl ...

  9. HDOJ 2012 素数判定

    Problem Description 对于表达式n^2+n+41,当n在(x,y)范围内取整数值时(包括x,y)(-39<=x < y<=50),判定该表达式的值是否都为素数. I ...

  10. 正则表达式的先行断言(lookahead)和后行断言(lookbehind)

    正则表达式的先行断言和后行断言一共有4种形式: (?=pattern) 零宽正向先行断言(zero-width positive lookahead assertion) (?!pattern) 零宽 ...