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 域转移是目标检测器在实际应用中推广的主要挑战。两级检测器的域自适应新兴技术有助于解决这个问题。然而，两级…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
Unity VR/MR开发-VR开发与传统3D开发的差异
视频讲解链接：【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...
CMS内容管理系统的设计与实现：多站点模式的实现
在一套内容管理系统中，其实有很多站点，比如企业门户网站，产品手册，知识帮助手册等，因此会需要多个站点，甚至PC、mobile、ipad各有一个站点。 每个站点关联的有站点所在目录及所属的域名。 一、站点表设计…...
Android Framework预装traceroute执行文件到system/bin下
文章目录 Android SDK中寻找traceroute代码内置traceroute到SDK中traceroute参数说明-I 参数（使用 ICMP Echo 请求）-T 参数（使用 TCP SYN 包） 相关文章 Android SDK中寻找traceroute代码 设备使用的是Android 11，在/s…...
WinUI3开发_使用mica效果
简介 Mica(云母)是Windows10/11上的一种现代化效果，是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果，Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...
Python爬虫（52）Scrapy-Redis分布式爬虫架构实战：IP代理池深度集成与跨地域数据采集
目录 一、引言：当爬虫遭遇"地域封锁"二、背景解析：分布式爬虫的两大技术挑战1. 传统Scrapy架构的局限性2. 地域限制的三种典型表现 三、架构设计：Scrapy-Redis 代理池的协同机制1. 分布式架构拓扑图2. 核心组件协同流程 四、技术实…...