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>