简易商品列表页-CSS

最新推荐文章于 2024-04-29 13:33:45 发布
最新推荐文章于 2024-04-29 13:33:45 发布
阅读量270 收藏
点赞数 4
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky20071110/article/details/137741814
版权

效果见图∨∨∨∨

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%;
}

苏辞鸭
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【汇智学堂】-div+css布局十一(商品管理-商品图文列表展示页面)
weixin_39593940的博客
06-30 1316
效果图： 完整css文件： ul{ list-style: none; } ul li{ float: left; } .mainNavigation{ position:absolute; top:-25px; left:300px; } ul li img{ width: 430px; height: 230px; padding: 15px; } ul li p{...
2021-06-03——CSS属性制作家用电器商品分类表
m0_58822480的博客
06-03 2923
练习：完成《家用电器商品分类列表》练习样式参考：背景：#0f7cbf ;字体大小：18px; 加粗 ，文本缩进1个文字的高度，行高35px。大家电等小标题：背景：#e4f1fa; 字体大小：14px; 加粗，文本缩进 2 个文字的高度，行高30px，颜色：#0f7cbf，当鼠标放上去时内容增加下划线。平板电视等内容：字体颜色：#666,行高20px，文本缩进1个文字的高度，当鼠标放上去时颜色显示为#F60，并且增加下划线。文本素材： 家用电器 大家电 平板电视 洗衣机 冰箱 空调 烟机/灶...
Html+Css简单仿京东商品分类导航
10-12
用HTML语言写的一个仿京东商城的界面，商品分类导航。
CSS-商品分类实现
王子老师
10-18 445
我告诉我喜欢你并不是说一定要和你在一起，我只是希望你以后能记住，在你人生低谷的时候，不要灰心，曾经有人被你的魅力所吸引，曾经是，以后也会是。 CSS-商品分类实现 全部商品分类和商品列表展示，鼠标滑过的时候全部展示 放在一个盒子里面 上面的盒子占满全部，下面的盒子就只能到下面了。 <nav class="nav"> <div class="w"> <div class="dropdown"> .
CSS实现jd的商品列表，附完整代码！
最新发布
u013179804的博客
04-29 358
今天，我们综合以前学习的知识，来写一下 jd 的商品列表，如下。其实很多这种列表啊，都是类似的，比如，tb的，无非是增加了少许文字，改下宽度和间距，加个边框，通过定位或者背景增加一些小周边等。写多了就熟能生巧了。OK，咱们的效果如下。那来一起看看代码吧。
html仿写简易淘宝购物页面
07-14
在“html仿写简易淘宝购物页面”中，HTML将用于创建商品列表、导航菜单、搜索栏等基本元素。例如，`<div>`标签用于分组元素，`<ul>`和`<li>`组合用来创建列表，`<a>`则用于链接到其他页面或商品详情。此外，`<form>`...
h5+css 实现简易商城首页
12-06
在本项目中，"h5+css 实现简易商城首页"是一个使用HTML5（H5）和CSS技术构建的无JavaScript版本的电商网站主页。这个练习主要目标是掌握HTML5的标签应用和基本的网页布局技巧。下面我们将深入探讨这个项目所涉及的...
HTML+CSS+JS构建的电商网站页面（源码）
07-14
例如，`<div>`元素可以用来组织页面布局，`<a>`用于链接，`<img>`展示商品图片，`<h1>`至`<h6>`定义标题等级，`<p>`用于段落，`<ul>`和`<li>`构建无序列表（如商品分类），以及`<form>`和`<input>`构建用户交互的...
管理系统系列--简易商品管理系统.zip
02-26
【简易商品管理系统】是IT行业中常见的管理信息系统的一个实例，它主要设计用于帮助企业或个人更有效地管理他们的商品库存、销售和订单。在这个系统中，我们通常会遇到以下几个关键的知识点： 1. **数据库设计**：...
一个基于Vuejs的小型商城项目包含登录商品列表购物车页面数据为本地mock
08-10
标题中的“一个基于Vuejs的小型商城项目包含登录商品列表购物车页面数据为本地mock”表明这是一个使用Vue.js框架开发的简易在线商城应用。这个项目主要用于学习和实践Vue.js的相关技术，包括用户登录、商品展示、...
CSS实战项目之商品列表
qq_42915159的博客
02-11 1199
HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品列表</title> <link rel="stylesheet" type="text/css" href="css/post4.css"> </head> <body> <!--第一行--> &l.
Vue移动端系列 =＞ [04] 首页-文章列表
Write less，do more
11-05 788
四、首页—文章列表 页面布局 头部导航栏 1、使用导航栏组件 2、在导航栏组件中插入按钮 文本 图标 3、样式调整 宽高 背景色 边框 文本大小 图标大小 <template> <div class="home-container"> <!-- 导航栏 --> <van-nav-bar class="page-nav-bar"> <van-button class="search-btn"
【CSS】CSS列表【CSS基础知识详解】
@花无缺
01-21 2801
CSS精品专栏之CSS列表详解
纯CSS制作的新闻网站中的文章列表
wenlyli的专栏
09-05 976
CSS新闻列表制作 .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px; padding: 0px; } .list li{ width: 100%; } .list li a{ color: #777777; display:
使用CSS3制作一个简单的商品列表、浮动布局
m0_67372185的博客
03-21 2781
代码如下： <style> *{ margin: 0px; padding: 0px; list-style: none; } .box{ width: 1365px; height: 490px; border: 1px solid rgb(201,201,201); ...
制作一个简单的文章列表页面样式
请叫我二狗哥
04-20 6672
仿制了一个简单的文章列表页面样式&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; *{ margin:0; padding:0; font-family:宋体; } div{ width:50%; height:250px; border:1px s...
分享一个展示文章列表的CSS样式
weixin_30703911的博客
11-22 1120
最近在帮朋友处理一个网站前端显示文章列表的时候,其中有个变通的思路,现整理出来留给有需要的朋友参考及自己备忘. 显示效果为:标题左对齐,日期右对齐. 标题和日期中间用常规的原点(“.”) 代替,显示效果如下图所示. 至于第一点要求,很容易就实现了,将日期显示的东东,加上 “ float:right “基本上就搞定了. 但第二点要求: 中间显示原点这个试了很多方式...
DIV + CSS优秀文章列表收集
kwklover
04-06 1292
彻底弄懂CSS盒模型 Box Model
Html+Css 全部商品分类（内部样式）
weixin_51967087的博客
09-20 3612
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .z{ background-color: #FF0000; width: 300px; color: white; font-size: 20px; font-w...
简易购物车界面 html 和css
06-12
下面是一个简易的购物车界面的 HTML 和 CSS 代码示例，你可以根据自己的需求进行修改和美化。 HTML: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>购物车</h1> <table> <tr> <th>商品</th> <th>数量</th> <th>单价</th> <th>小计</th> </tr> <tr> <td>商品1</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td>100</td> </tr> <tr> <td>商品2</td> <td><input type="number" value="2" min="1"></td> <td>50</td> <td>100</td> </tr> <tr> <td colspan="3">总计</td> <td>200</td> </tr> </table> <button>结算</button> </div> </body> </html> ``` CSS: ```css .container { width: 80%; margin: 0 auto; text-align: center; } h1 { margin-top: 50px; font-size: 36px; } table { margin-top: 50px; width: 100%; border-collapse: collapse; } th, td { padding: 10px; border: 1px solid #ddd; } th { background-color: #f2f2f2; } input[type="number"] { width: 50px; text-align: center; } button { margin-top: 50px; padding: 10px 20px; background-color: #008CBA; color: #fff; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color .3s; } button:hover { background-color: #005E7F; } ``` 注意：这只是一个简单的示例，实际项目中需要更加详细的设计和开发。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值