效果见图∨∨∨∨
HTML代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>食品列表页</title>
<script src="js/main.js"></script>
</head>
<body>
<div class="foodsList">
<div class="box" >
<img src="imgs/早茶.jpg" title="广州酒家广式早茶点心组合1915g虾饺烧麦速冻食品半成品早餐包子" alt="广州早茶图片">
<p>
<b>广州酒家广式早茶点心组合1915g虾饺烧麦速冻食品半成品早餐包子 </b>
</p>
<div class="info">
<span class="price">
¥138
</span>
<span class="people"> 55人付款</span>
<span class="add"> 福建福州 </span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>广州酒家旗舰店</span>
</div>
</div>
<div class="box">
<img src="imgs/椰子粉.jpg" title="南国食品纯椰子粉海南特产椰汁椰奶无添加糖速溶早餐冲饮生椰拿铁">
<p>
<b>南国食品纯椰子粉海南特产椰汁椰奶无添加糖速溶早餐冲饮生椰拿铁</b>
</p>
<div class="info">
<span class="price">
¥189
</span>
<span class="people"> 84人付款</span>
<span class="add"> 广东深圳 </span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>科奇斯食品专营店</span>
</div>
</div>
<div class="box">
<img src="imgs/水果麦片.jpg" title="Calbee/卡乐比进口富果乐原味水果麦片380g早餐即食饱腹代餐 1件装">
<p>
<b>Calbee/卡乐比进口富果乐原味水果麦片380g早餐即食饱腹代餐 1件装</b>
</p>
<div class="info">
<span class="price">¥33.9</span>
<span class="people"> 300+人付款</span>
<span class="add"> 上海 </span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>天猫超市</span>
</div>
</div>
<div class="box">
<img src="imgs/肉松.jpg" title="花巷猪肉松福建特产儿童早餐配粥拌饭福州非遗肉绒250g内置小袋装">
<p>
<b>花巷猪肉松福建特产儿童早餐配粥拌饭福州非遗肉绒250g内置小袋装</b>
</p>
<div class="info">
<span class="price">¥41.9</span>
<span class="people"> 100+人付款</span>
<span class="add"> 福建 福州 </span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>花巷旗舰店</span>
</div>
</div>
<div class="box">
<img src="imgs/薯片.jpg" title="乐事无限薯片清新三连罐(原味/黄瓜/青柠)104gx3罐">
<p>
<b>乐事无限薯片清新三连罐(原味/黄瓜/青柠)104gx3罐</b>
</p>
<div class="info">
<span class="price">¥19.5</span>
<span class="people"> 100+人付款</span>
<span class="add"> 上海 </span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>天猫超市</span>
</div>
</div>
<div class="box">
<img src="imgs/韩国泡面.jpg" title="【自营】韩国进口方便面不倒翁金拉面超辣泡面夜宵方便食品速食">
<p>
<b>【自营】韩国进口方便面不倒翁金拉面超辣泡面夜宵方便食品速食</b>
</p>
<div class="info">
<span class="price">¥14.57</span>
<span class="people"> 700+人付款</span>
<span class="add"> 浙江 杭州 </span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>天猫国际自营全球超级店</span>
</div>
</div>
<div class="box">
<img src="imgs/饼干.jpg" title="比利时Lotus和情缤咖时焦糖饼干8包*双片装124g茶咖啡伴侣伴手礼" >
<p>
<b>比利时Lotus和情缤咖时焦糖饼干8包*双片装124g茶咖啡伴侣伴手礼
</b>
</p>
<div class="info">
<span class="price ">¥11.9</span>
<span class="people"> 500+人付款</span>
<span class="add">上海</span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>天猫超市</span>
</div>
</div>
<div class="box">
<img src="imgs/榨菜.jpg" title="重庆渝橙榨菜丝去皮涪陵咸菜酱腌菜开味早餐速食菜拌饭拌面下饭菜">
<p>
<b>重庆渝橙榨菜丝去皮涪陵咸菜酱腌菜开味早餐速食菜拌饭拌面下饭菜</b>
</p>
<div class="info">
<span class="price">¥3.53</span>
<span class="people"> 1000+人付款</span>
<span class="add">浙江 杭州</span>
</div>
<div class="shop">
<img class="logo" src="imgs/天猫超市.jpg">
<span>天天特卖工厂店</span>
</div>
</div>
</div>
</body>
</html>
CSS如下:
.foodlist {
border: 1px solid white;
display: flex;
}
.box {
border: 1px solid white ;
width: 250px;
height: 420px;
margin-top: 5px;
border-radius: 20px;
padding: 10px;
flex-wrap: wrap;
float:left;
margin-left: 10px;
}
.box:hover{
border: 1px solid red;
}
.info span {
color: #a6a3a3;
}
.info .price {
color:rgb(255, 0, 0);
font-weight: 700;
font-size: 20px;
}
.box img {
width: 240px;
height: 240px;
}
.shop img {
width: 10%;
height: 10%;
}