css3购物网站商品文字提示实例

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="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即可，而动画也是设置高度属性

时间： 2024-12-22 00:10:49

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

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

大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{m

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

单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

实现密码框默认文字效果实例代码

实现密码框默认文字效果实例代码:大家都知道很多文本框在默认情况下都有默认的提示文本,例如"请输入姓名"之类的语言,当点击文本框的时候,会清除提示语,比较人性化.但是在密码框中实现此效果可能就有点麻烦了,因为密码框不是以明文显示的,下面就介绍一下代码实例解决此问题.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="

手把手教你做一个吸引人的购物网站

购物网站盈利能力相信很多用户都是有目共睹的,因此不少的中小企业对购物网站的建设也是趋之若鹜,怎么企业设计购物网站有什么方法能够为购物网站提高人气呢?下面看看凡科网站建设带来的一些分析. 要对用户的跟随心理进行分析.无论是实体销售还是线上的销售,用户都会有一种莫名的跟随心理.网上购物网站的评论就好想是生活中的口口相传,购买过的用户可以对产品进行评论,这样可以给潜在用户一个引导作用. 企业要对购物网站网页的每一个角落都要发挥极限.企业都知道网页的每一个角落都是有用的,购物网站也一样.一个列表页不会是

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

springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(angular大法好), 项目一共包含了7个静态界面, 静态界面的数据展示都使用了angularJS , 后端是基于java的spring, 容器为tomcat, 项目代码分享到百度云盘 , 这个项目的优势是, 所有的显示都是在前端完成, 数据交互也是通过ajax完成, 没有频繁的页面跳转:先上两张商

密码输入强度提示实例代码

密码输入强度提示实例代码:现在众多的网站的注册表单,在填写密码的时候能够实时的给出密码强度提示,这可以提醒用户当前输入的密码安全程度,算是非常人性化的一个举措,下面就通过一个实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

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

这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息. 语法基本是这个样子:<input placeholder=”提示信息...”> HTML代码 <form> <input

购物网站简介

百科名片 购物网站就是提供网络购物的站点,足不出户即可购买到你所喜欢的商品.目前国内比较知名的专业购物网站有卓越.当当等,提供个人对个人的买卖平台有淘宝.易趣.拍拍等,另外还有许多提供其它各种各样商品出售的网站.购物网站就是为买卖双方交易提供的互联网平台,卖家可以在网站上登出其想出售商品的信息,买家可以从中选择并购买自己需要的物品. 从交易双方类型分为四种形式: 第一种是B2C,即商家对顾客的形式(如当当网.惠心网.卓越亚马逊.第九大道等) 第二种是C2C,即顾客对顾客的形式(如淘宝.易趣.拍拍

CSS3 实现厉害的文字和输入框组合效果

最近在忙着弄网站,学到了不少效果,这又是一个厉害的  Html代码   <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>发送微博页面</title> <style> html{padding:0px;margin:0px;} body{padding:0px;mar