关于电商产品展示，无论是从首页还是到栏目页，再到产品的详情页，产品展示效果不仅仅是在电商平台，在很多的企业网站也使用频繁，今天为大家分享一个HTML+CSS小案例项目：小米电商平台的商品展示页面！我们来一起看看吧！
那么我们要开发一个什么样的效果呢？来吧展示！！！
接着下来我们实战开发吧！
温馨提示：本期课程是三十个实战案例的第2节，为了更好的学好前端，可以配合艾编程30天计划学习效果更好，因为30个案例就是30天计划的实战作业一部分！具体参与方式，我放在文章的最底部了，大家可以看完这个效果后找助理老师领取！
1、操作步骤
（1）构建 一个名为product的盒子
<divclass=product></div>（2）给product 添加宽度、高度 、背景颜色。这里的高度正常情况下是不能设置死，是为了方便大家理解看效果，所以加上的。后面我们会去掉
.product{width:268px;/*宽度*/ height:400px;/*高度*/ background-color: red;/*背景颜色*/ }（3）、清除body自带的的默认样式
body{ margin:0px;/*外边距为0px*/ }（4）、设置.product 长方形盒子与浏览器顶部50px间距，同时水平居中显示
.product{ margin:50px auto; /*上外边距50px 左右外边距自动相等-水平居中*/ }（5）、给盒子添加边框线,，同时把添加的背景注释掉。背景是为了开始演示效果
.product{ /* background-color: red;背景颜色*/ border:1pxsolid#ddd; /*1像素 实线 灰色边框*/ }2、代码
<style type="text/css"> body{ margin:0px; } .product{ width:268px; height:400px; /* background-color: red; */ margin:50px auto; border:1px solid #ddd; } </style> <div class="product"></div>3、实现效果
1、操作步骤
（1）、在.product盒子中添加产品图,同时设置图片宽度和alt描述
<body> <div class="product"> <!--img标签，用来在页面当中插入图片--> <img src="images/kettle.png" alt="电水壶" width="195px"> </div> </body>（2）、设置图片在水平方向居中显示
.product{ text-align:center;/*设置内容文字或图片在盒子中水平居中*/ }2、代码
<style type="text/css"> body{ margin:0px; } .product{ width:268px; height:400px; /* background-color: red; */ margin:50px auto; border:1px solid #ddd; text-align: center;/*文字和图片水平居中*/ } </style> <body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> </div> </body>3、实现效果
1、操作步骤
1、在.product盒子中添加p标签，同时到名为describe，p标签用来包裹产品描述
<body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class=describe>快速煮水，安心饮用</p> </div> </body>2、去掉h3自带的默认margin外边距样式
body,p{ margin:0px;/*同时去掉body和h3标签的默认外边距*/ }3、修饰h3中的文字样式
.product p.describe{ font-size:16px ;/*字体大小*/ font-weight: 400;/*字体粗细*/ color:#845f3f;/*字体颜色*/ }2、实现代码
<style type="text/css"> body,h3{ margin:0px; } .product{ width:268px; height:400px; /* background-color: red; */ margin:50px auto; border:1px solid #ddd; text-align: center; } .product h3{ font-size:16px ; font-weight: 400; color:#845f3f; } </style> <body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <h3>快速煮水，安心饮用</h3> </div> </body>3、实现效果
1、操作步骤
1、在.product盒子中，再构建一个名为 .product-text的盒子
<body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"></div> </div> </body>2、我们给product-text 添加如下样式。当然里添加的高度也是为了方便看效果，后面我们也会删除。
.product .product-text{ height:100px;/*高度-为了查看效果，后期会删除*/ background-color: #f8f8f8;/*背景颜色*/ margin-top:20px;/*上外边距20px*/ padding:15px;/*上下左右内边距15px*/ }3、我们把最开始为了方便看效果，给.product添加的高度给删除（或注释）
.product{ /*height:400px;*/ }2、实现代码
<style type="text/css"> body,p{ margin:0px; }.product{ width:268px; /* height:400px; */ /* background-color: red; */ margin:50px auto; border:1px solid #ddd; text-align: center; } .product p.describe{ font-size:16px ; font-weight: 400; color:#845f3f; }.product .product-text{ height:100px; background-color: #f8f8f8; margin-top:20px;/*上外边距20px*/ padding:15px;/*上下左右内边距15px*/ } </style> <body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> 添加内容边距，使里面的内容与盒子间有上下左右有15px空隙 </div> </div> </body>3
实现效果
1、操作步骤
（1）在名为 .product-text盒子中 添加类名为 product-mark的div盒子,同时在里面插入四张图,同时把图片高度设为 20px
<body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> </div> </div> </body>（2）添加好的图片之间默认有一定的空隙，这个空隙在不同的浏览器中看到的大小可能不一样。所以我们需要把这个默认的空隙去掉，然后自己给图片添加外边距来实现空隙。
空隙产生的原因，是浏览器把图片间的换行和空格给编译了。我们的处理方式可以在.product-mark中添加font-size:0px;就可以消除。
.product .product-text .product-mark{ font-size: 0px;/*去掉图片间的空隙*/ }（3）、消除空隙后，我们给图片单独添加margin外边距来实现空隙效果。
.product .product-text .product-mark img{ margin:0px 2px;/*给图片设置左右2像素外边距*/ }2、代码
<style type="text/css"> body,p{ margin:0px; } .product{ width:268px; /* height:400px; */ /* background-color: red; */ margin:50px auto; border:1px solid #ddd; text-align: center; }.product p.describe{ font-size:16px ; font-weight: 400; color:#845f3f; } .product .product-text{ height:100px; background-color: #f8f8f8; margin-top:20px;/*上外边距20px*/ padding:15px;/*上下左右内边距15px*/ } .product .product-text .product-mark{ font-size: 0px; } .product .product-text .product-mark img{ margin:0px 2px; } </style> <body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> </div> </div> </body>3、实现效果
1、操作步骤
（1）、在product-text盒子中添加 h3标签，用来包裹标题内容
<div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> <h3>云米电水壶</h3> </div> </div>（2）、去掉h3自带的默认margin外边距
body,p,h3{ margin:0px;/*同时去掉body,p,h3的默认外边距*/ }（3）、通过以下css来修饰标题
.product .product-text h3{ font-size: 20px;/*字体大小*/ font-weight:400 ;/*字体粗细*/ margin-top:10px;/*上外边距为 10px*/ }2、代码
<body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> <h3>云米电水壶</h3> </div> </div> </body>3、实现效果
1、操作步骤
（1）在product-text中 添加 p标签，用来包裹价格
<body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> <h3>云米电水壶</h3> <p>￥59</p> </div> </div> </body>（2）、通过以下css来修饰价格样式
.product .product-text p{ font-size:20px ;/*字体大小*/ color:#a92112;/*字体颜色*/ margin-top:5px;/*上外边距 5px*/ }（3）、去掉最开始给 .product-text添中的 高度
.product .product-text{ /* height:100px; */ }2、代码
<style type="text/css"> body,p,h3{ margin:0px; }.product{ width:268px; /* height:400px; */ /* background-color: red; */ margin:50px auto; border:1px solid #ddd; text-align: center; } .product p.describe{ font-size:16px ; font-weight: 400; color:#845f3f; } .product .product-text{ /* height:100px; */ background-color: #f8f8f8; margin-top:20px;/*上外边距20px*/ padding:15px;/*上下左右内边距15px*/ } .product .product-text .product-mark{ font-size: 0px; } .product .product-text .product-mark img{ margin:0px 2px; } .product .product-text h3{ font-size: 20px; font-weight:400 ; margin-top:10px; } .product .product-text p{ font-size:20px ; color:#a92112; margin-top:5px; } </style> <body> <div class="product"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> <h3>云米电水壶</h3> <p>￥59</p> </div> </div> </body>3、实现效果
添加了超链接之后，页面中的文字就添加了下划线，同时h3中的文字颜色也发生了改变，那下一步我们就来修正下这些细节
1、代码
<div class="product"> <!--添加超链接，实现点击后跳转到新页面--> <a href="https://www.icodingedu.com" target="_blank"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> <h3>云米电水壶</h3> <p>￥59</p> </div> </a> </div>2、运行效果
1、操作步骤
（1）清除a标签的默认下划线样式
a{ text-decoration: none;/*去掉下划线*/ }（2）给h3标签中的文字加上颜色
.product .product-text h3{ color:#000; }（3）把a标签转换为块级元素
a{ display:block;/*a标签转换为块级元素*/ }a标签默认的是属于内联元素，正常情况下内联元素中是不能放块级元素，但a标签特殊，可以这样用。但在这里，如果不把标签转换为块级元素，会发生很奇怪的效果。你给a标签加上 border:1px solid red; 后，如下图所示：
所以我们要把a标签转换为块级元素。当转换为块级元素后，效果如下，一切正常
2、运行代码
<style type="text/css"> body,p,h3{ margin:0px; } a{ text-decoration: none;/*去掉下划线*/ } .product{width:268px; /* height:400px; */ /* background-color: red; */ margin:50px auto; border:1px solid #ddd; text-align: center; } .product a{ display:block; } .product p.describe{ font-size:16px ; font-weight: 400; color:#845f3f; } .product .product-text{ /* height:100px; */ background-color: #f8f8f8; margin-top:20px;/*上外边距20px*/ padding:15px;/*上下左右内边距15px*/ } .product .product-text .product-mark{ font-size:0px; } .product .product-text .product-mark img{ margin:0px 2px; } .product .product-text h3{font-size: 20px; font-weight:400 ; margin-top:10px; color:#000; } .product .product-text p{ font-size:20px ; color:#a92112; margin-top:5px; } </style> <div class="product"> <!--添加超链接，实现点击后跳转到新页面--> <a href="https://www.icodingedu.com" target="_blank"> <img src="images/kettle.png" alt="电水壶" width="195px"> <p class="describe">快速煮水，安心饮用</h3> <div class="product-text"> <div class="product-mark"> <img src="images/live.png" alt="直播中" height="20"> <img src="images/odds.png" alt="特惠中" height="20"> <img src="images/30day.png" alt="30天保价" height="20"> <img src="images/server.png" alt="售后免邮" height="20"> </div> <h3>云米电水壶</h3> <p>￥59</p> </div> </a> </div>3、运行效果
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
PC端项目开发（1个）移动WebApp开发（2个）多端响应式开发（1个）共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
真机调试，云服务部署上线；Linux环境下 的 Nginx 部署，Nginx 性能优化；Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；企业项目域名跳转的终极解决方案，多网站、多系统部署；使用 使用 Git 在线项目部署；这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自今日！老师会邀请你进入学习，并给你发放相关资料
