微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

css3购物网站商品文字提示实例_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:37:05
原创
1378人浏览过

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

  4.        
  5.         购物网站商品文字提示
  6.        
  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.        
  14.        
  15.         商品图
  16.                

    泰迪熊

  17.        
  • 复制代码

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

    造好物
    造好物

    一站式AI造物设计平台

    造好物 70
    查看详情 造好物
    • HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：简单实现兼容各大浏览器的js复制内容到剪切板_html/css_WEB-ITnose 下一篇：面试必备：文本框与按钮的最简组合_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    JavaScript价格计算器：根据支付周期动态调整价格及弹窗显示 本教程详细阐述如何在JavaScript价格计算器中实现根据用户选择的支付周期（月付或年付）动态调整商品价格。我们将重点介绍如何为月付选项应用20%的加价，并确保这一价格变化不仅体现在总价计算中，也准确地反映在价格详情弹窗的阶梯价格显示里，从而提供一个功能完善且用户友好的价格估算体验。
    2025-11-14 12:57:25
    545
    PHP循环中动态生成HTML元素与JavaScript局部交互的最佳实践 本文旨在解决PHPforeach循环中动态生成HTML元素时，因ID非唯一导致JavaScript交互失效的问题。通过采用事件委托机制和相对DOM遍历，避免了为每个元素生成唯一ID的复杂性，实现了对循环内独立模块的精确控制。教程将详细阐述如何优化HTML结构，并利用原生JavaScript（或jQuery）实现高效、可扩展的局部显示/隐藏功能。
    2025-11-14 12:57:01
    446
    强制所有链接在新标签页打开的实现与限制 本文探讨了如何通过JavaScript和HTML标签强制网页中的链接在新标签页打开，特别是针对同一来源（same-origin）的链接。同时，文章深入分析了跨域（cross-origin）内容（如iframes和广告）中链接行为的限制，强调了浏览器同源策略在安全方面的作用，并解释了为何无法直接控制这些外部内容的链接行为。
    2025-11-14 12:56:15
    909
    利用CSS Grid实现响应式布局中只显示第一行流体高度卡片 本文旨在解决在响应式布局中，仅显示容器内第一行流体高度项目，并隐藏后续换行项目的挑战。通过深入探讨CSSGrid布局的强大功能，我们将展示如何利用grid-template-rows和grid-auto-rows属性精确控制行高，结合overflow:hidden和内部包裹元素，实现既美观又功能完善的单行显示效果，避免了Flexbox在处理此类流体高度场景下的局限性。
    2025-11-14 12:54:08
    684
    HTML文本局部下划线实现技巧：精细控制文本装饰样式 本教程旨在解决HTML中text-decoration:underline样式应用于整个元素而非特定文本片段的问题。通过引入标签进行内容拆分与精细化样式管理，本文将演示如何精确控制下划线仅作用于指定文本，从而实现更灵活和符合预期的界面表现。
    2025-11-14 12:53:19
    326
    理解相对路径：如何在不同文件夹中引用CSS文件 本文详细介绍了在Web开发中如何利用相对路径引用位于不同文件夹中的CSS文件。通过解释.（当前目录）、..（父目录）和/（子目录）的用法，文章提供了一个实际案例，演示了如何在复杂的目录结构中准确链接CSS样式表，确保项目资源的正确加载和管理。
    2025-11-14 12:53:02
    657
    CSS背景图像与颜色叠加及定位指南 本教程详细阐述了如何在HTML元素中实现背景图像与背景颜色的叠加，并精确控制图像的定位，特别是将其放置在容器底部。文章深入探讨了CSSbackground系列属性的应用，包括background-color、background-image、background-repeat和background-position，并提供了解决常见问题（如CSS特异性冲突）的策略。此外，教程还介绍了使用标签进行内容图像定位的替代方案，以及多背景层叠的高级技巧，旨在帮助开发者构建视觉效果丰富的网页布局。
    2025-11-14 12:49:00
    346
    Vue 3 中实现表格单元格点击切换文本内容的交互式显示 本教程详细介绍了在Vue3应用中，如何通过管理组件的响应式状态，实现表格（）单元格点击时动态切换显示文本内容的功能。我们将利用ref定义当前展开项的索引，并结合条件渲染（v-text）来实现在截断文本和完整文本之间的无缝切换，从而提升用户交互体验。
    2025-11-14 12:46:31
    494
    A-Frame中动态创建与添加实体：正确使用DOM API 在A-Frame场景中动态添加3D对象，应避免使用innerHTML，因为这无法正确初始化A-Frame实体。正确的做法是利用JavaScript的DOMAPI，通过document.createElement()创建A-Frame实体元素，使用setAttribute()设置其属性，然后通过appendChild()将其添加到a-scene中。这种方法确保了A-Frame组件系统能够正确处理和渲染这些动态生成的对象，对于构建程序化生成或交互式场景至关重要。
    2025-11-14 12:45:01
    796
    CSS实现文本下方装饰性图形的定位与生成教程 本教程详细介绍了如何使用CSS在文本内容下方添加装饰性图形。我们将探讨两种主要方法：一是通过父元素相对定位结合子元素绝对定位来精确控制图形位置，二是利用CSS伪元素直接生成圆形或椭圆形装饰，并结合绝对定位和z-index属性实现图形在文本下方的层叠效果，同时强调优化文本布局的最佳实践。
    2025-11-14 12:40:50
    281
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部