源码
<!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>