2条回答 默认 最新
- 有一只小精灵 2023-01-23 19:42关注
可以参考下我写的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>卡片</title> <style> /* 卡片样式 */ .card { width: 310px; height: 164px; background-color: #fff; border: 2px solid #f5f5f5; border-radius: 4px; position: relative; } /* 产品介绍 */ .presentation { margin-top: 16px; } .pic { width: 86px; height: 86px; float: left; margin-left: 14px; } .pic>img { width: 86px; height: 86px; } /* 产品参数 */ .parameter { float: left; margin-left: 14px; font-size: 12px; } .capacity { font-weight: bold; margin-bottom: 18px; } /* 设备指标这边我是用内边距占位了,也可改成宽高 */ .quota { padding: 6px 6px 2px 6px; border: 1px solid #eaeaea; border-radius: 2px; background-color: #fafafa; } /* 绝对定位,把它浮在最下面 */ .instruction { position: absolute; bottom: 0; background-color: #8c9199; height: 30px; line-height: 30px; width: 100%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; color: #fbf6f1; font-size: 12px; } .name { float: left; margin-left: 14px; } .action { float: right; margin-right: 14px; } .model { font-size: 8px; } </style> </head> <body> <!-- 定义一个卡片 --> <div class="card"> <!-- 产品介绍 --> <div class="presentation"> <!-- 产品图片 --> <div class="pic"> <img src="./product.png" alt=""> </div> <!-- 产品参数 --> <div class="parameter"> <div class="capacity"> <span>产量:0件</span> </div> <div class="quota"> <span>○</span> <span>设备指标</span> </div> </div> </div> <div class="instruction"> <div class="name">2#压机<span class="model">(20190214WG0028)</span></div> <div class="action">关机</div> </div> </div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 关于#MATLAB#的问题,如何解决?(相关搜索:信噪比,系统容量)
- ¥500 52810做蓝牙接受端
- ¥15 基于PLC的三轴机械手程序
- ¥15 多址通信方式的抗噪声性能和系统容量对比
- ¥15 winform的chart曲线生成时有凸起
- ¥15 msix packaging tool打包问题
- ¥15 finalshell节点的搭建代码和那个端口代码教程
- ¥15 Centos / PETSc / PETGEM
- ¥15 centos7.9 IPv6端口telnet和端口监控问题
- ¥20 完全没有学习过GAN,看了CSDN的一篇文章,里面有代码但是完全不知道如何操作