html----图片按钮，商品展示
源码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图标</title><style>.box{width: 100px;height: 50px;border: 1px solid white;border-radius: 30px;background-color: blue;color: aliceblue;margin: auto;display: flex;justify-content: center;align-items: center;opacity: .8;font-family: 宋体;font-weight: bold;}</style>
</head>
<body><div class="box">下载客户端</div>
</body>
</html>
源码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/reset.css" /><style>.content {width: 1150px;margin: auto;height: 1800px;/* border: 1px solid red; */display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;}.goods {width: 260px;height: 480px;border-radius: 5px;margin: 0 10px 10px 0;border: 1px solid white;}.goods:hover {border: 1px solid #ccc;box-shadow: 2px 2px 5px #999;}.goods-img {width: 220px;height: 220px;margin: 40px 10px 20px 10px;}p.price {font-size: 20px;color: red;}p.title {height: 35px;/* border: 1px solid red; *//* overflow-y: scroll; */overflow: hidden;}p.comment>a {color: #5678AA;font-weight: 600;}p.store {width: 180px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}.qq {vertical-align: middle;}.send span {color: red;border: 1px solid red;font-size: 14px;}.bottom-btn {margin-left: 15px;}.bottom-btn>a {/* display: inline-block; */display: block;width: 70px;border: 1px solid #ccc;font-size: 13px;color: #999;/* margin-left: -4px; */float: left;}.bottom-btn>a:hover {border: 1px solid red;}</style></head><body><div class="content"><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9.9</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="../img/客服.jpg" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">gs存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p> <p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div><div class="goods"><img class="goods-img" src="../img/三折叠.jpg" alt=""><p class="price left">￥9999.00</p><p class="left title"><a href="#">华为三折叠手机 Mate XT 非凡大师</a></p><p class="left comment"><a href="#">200万+</a>条评论</p><p class="left store"><a href="#">工商存储京东自营旗舰店</a><img class="qq" src="img/qq.png" alt="" /></p><p class="left send"><span>满赠</span></p><p class="left bottom-btn"><a href="#"><input type="checkbox">对比</a><a href="#">关注</a><a href="#">加入购物车</a></p></div></div></body>
</html>相关文章：
html----图片按钮，商品展示
源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图标</title><style>.box{width:…...
YOLOv11改进策略【卷积层】| ECCV-2024 小波卷积WTConv 增大感受野，降低参数量计算量，独家创新助力涨点
一、本文介绍 本文记录的是利用小波卷积WTConv模块优化YOLOv11的目标检测网络模型。WTConv的目的是在不出现过参数化的情况下有效地增加卷积的感受野，从而解决了CNN在感受野扩展中的参数膨胀问题。本文将其加入到深度可分离卷积中，有效降低模型参数量和计算量，并二次创新C3…...
redis高级篇之redis源码分析List类型quicklist底层演变 答疑159节
(1)ziplist压缩配置:list-compress-depth 0 表示一个quicklist两端不被压缩的节点个数。这里的节点是指quicklist双向链表的节点，而不是指ziplist里面的数据项个数参数list-compress-depth的取值含义如下: 0:是个特殊值，表示都不压缩。这是Redis的默认值…...
Elasticsearch 与 Lucene 的区别和联系
Elasticsearch 与 Lucene 的区别和联系 Elasticsearch 与 Lucene 的区别和联系一、知识背景Elasticsearch 简介Lucene 简介 二、Elasticsearch 和 Lucene 的区别适用场景性能优势和劣势架构设计的异同点 三、Elasticsearch和Lucene的联系四、Elasticsearch和Lucene的应用案例及…...
OpenCV视觉分析之运动分析(5)背景减除类BackgroundSubtractorMOG2的使用
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 基于高斯混合模型的背景/前景分割算法。 该类实现了在文献[320]和[319]中描述的高斯混合模型背景减除。 cv::BackgroundSubtractorMOG2 类是 O…...
【SAP Hana】X-DOC：数据仓库ETL如何抽取SAP中的CDS视图数据
【SAP Hana】X-DOC：数据仓库ETL如何抽取SAP中的CDS视图数据 1、无参CDS对应数据库视图2、有参CDS对应数据库表函数3、封装有参CDS为无参CDS，从而对应数据库视图 1、无参CDS对应数据库视图 select * from ZFCML_REP_V where mandt 300;2、有参CDS对应数…...
WPF的UpdateSourceTrigger属性
在WPF中，UpdateSourceTrigger属性用于控制数据绑定中何时将绑定目标（通常是UI元素）的值更新回绑定源（通常是数据对象）。这个属性有以下几个值： Default：这是默认值，对于不同的绑定目…...
2024-09-25 环境变量，进程地址空间
一、认识常见的环境变量 1. echo $HOME 输出当前用户对应的家目录 当用户登录系统时，流程如下： （1）用户登录系统后，系统启动Shell程序。 （2）启动bash shell，准备接收用户指令。 &a…...
中国移动机器人将投入养老场景；华为与APUS共筑AI医疗多场景应用
AgeTech News 一周行业大事件 华为与APUS合作，共筑AI医疗多场景应用 中国移动展出人形机器人，预计投入养老等场景 作为科技与奥富能签约，共拓智能适老化改造领域 天与养老与香港科技园，共探智慧养老新模式 中山大学合作中国…...
青少年编程能力等级测评CPA C++ 四级试卷（1）
青少年编程能力等级测评CPA C 四级试卷（1） 一、单项选择题（共15题，每题3分，共45分） CP4_1_1.在面向对象程序设计中，与数据构成一个相互依存的整体的是（ ）。 A. 对数据…...
树上任意两点的距离
题目描述 给出 n 个点的一棵树，多次询问两点之间的最短距离。 注意：边是双向的。 输入描述 第一行为两个整数 n 和 m。n 表示点数，m 表示询问次数； 下来 n−1 行，每行三个整数 x,y,k，表示点 x 和点 y 之间…...
【 thinkphp8 】00008 thinkphp8数据查询，常用table，name方法，进行数据查询汇总
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 【 t…...
Git的命令合集
关于Git的一些命令合集，会慢慢更新！ 20241024程序员节开始写的，记录一下~~ git查看log、查看详细提交记录 会显示之前的提交记录 , 排序由近及远 git log log按q退出 git回退到某个commit命令： 退到/进到指定commit的sha码&…...
博客搭建之路：hexo搜索引擎收录
文章目录 hexo搜索引擎收录以百度为例 hexo搜索引擎收录 hexo版本5.0.2 npm版本6.14.7 next版本7.8.0 写博客的目的肯定不是就只有自己能看到，想让更多的人看到就需要可以让搜索引擎来收录对应的文章。hexo支持生成站点地图sitemap 在hexo下的_config.yml中配置站点…...
创建Windows系统还原点
系统保护...
Linux等保测评需要用到的命令
三权设置 查看账户情况 cd /home/ ll 设置审计账户 useradd shenji passwd shenji 修改密码 passwd新密码 设置管理账户 useradd guanli passwd guanli compgen -u 查看用户 切换到root账户 su root 设置审计用户权限 vim /etc/sudoers shenji ALL (root) NOPASSWD:…...
PostgreSQL的学习心得和知识总结（一百五十六）|auto_explain — log execution plans of slow queries
目录结构 注：提前言明 本文借鉴了以下博主、书籍或网站的内容，其列表如下： 1、参考书籍：《PostgreSQL数据库内核分析》 2、参考书籍：《数据库事务处理的艺术：事务管理与并发控制》 3、PostgreSQL数据库仓库…...
数据结构模板代码合集(不完整)
P3368 【模板】树状数组 2 #include <bits/stdc.h> using namespace std; const int maxn 5e5 7;int n, m, s, t; int ans; int a[maxn]; struct node{int l, r;int num; }tr[maxn * 4];void build(int p, int l, int r){tr[p] {l, r, 0};if(l r){tr[p].num a[l];r…...
shell脚本语法详解
目录 shell语法基础 指定shell解析器 注释 运行 变量 定义变量 引用变量 清除变量值 从键盘获取值 输入单值 添加输入提示语 读取多值 编辑 定义只读变量 环境变量 设置环境变量与查看环境变量 特殊变量 三种引号的作用与区别 小括号与大括号 参数传递 位…...
2021亚洲机器学习会议：面向单阶段跨域检测的域自适应YOLO（ACML2021）
原文标题：Domain Adaptive YOLO for One-Stage Cross-Domain Detection 中文标题：面向单阶段跨域检测的域自适应YOLO 1、Abstract 域转移是目标检测器在实际应用中推广的主要挑战。两级检测器的域自适应新兴技术有助于解决这个问题。然而，两级…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
【JavaEE】-- HTTP
1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...
结构化文件管理实战：实现目录自动创建与归类
手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题，进而引发后续程序异常。使用工具进行标准化操作，能有效降低出错概率。 需要快速整理大量文件的技术用户而言，这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB，…...