HtmlCSS小案例项目CSS开发小米商城电商产品展示效果

　　关于电商产品展示，无论是从首页还是到栏目页，再到产品的详情页，产品展示效果不仅仅是在电商平台，在很多的企业网站也使用频繁，今天为大家分享一个HTMLCSS小案例项目：小米电商平台的商品展示页面！我们来一起看看吧！
　　那么我们要开发一个什么样的效果呢？来吧展示！！！
　　接着下来我们实战开发吧！
　　温馨提示：本期课程是三十个实战案例的第2节，为了更好的学好前端，可以配合艾编程30天计划学习效果更好，因为30个案例就是30天计划的实战作业一部分！具体参与方式，我放在文章的最底部了，大家可以看完这个效果后找助理老师领取！第一步、构建长方形盒子，同时水平居中
　　1、操作步骤
　　（1）构建一个名为product的盒子
　　（2）给product添加宽度、高度、背景颜色。这里的高度正常情况下是不能设置死，是为了方便大家理解看效果，所以加上的。后面我们会去掉。product｛width：268宽度height：400高度backgroundcolor：背景颜色｝
　　（3）、清除body自带的的默认样式body｛margin：0外边距为0px｝
　　（4）、设置。product长方形盒子与浏览器顶部50px间距，同时水平居中显示。product｛margin：50上外边距50px左右外边距自动相等水平居中｝
　　（5）、给盒子添加边框线，，同时把添加的背景注释掉。背景是为了开始演示效果。product｛backgroundcolor：背景颜色border：11像素实线灰色边框｝
　　2、代码styletypetextcssbody｛margin：0｝。product｛width：268height：400backgroundcolor：margin：50border：1｝style
　　3、实现效果
　　第二步、添加产品图，同时设置水平居中
　　1、操作步骤
　　（1）、在。product盒子中添加产品图，同时设置图片宽度和alt描述body！img标签，用来在页面当中插入图片imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxbody
　　（2）、设置图片在水平方向居中显示。product｛textalign：设置内容文字或图片在盒子中水平居中｝
　　2、代码styletypetextcssbody｛margin：0｝。product｛width：268height：400backgroundcolor：margin：50border：1textalign：文字和图片水平居中｝stylebodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxbody
　　3、实现效果
　　第三步、设置产品描述样式
　　1、操作步骤
　　1、在。product盒子中添加p标签，同时到名为describe，p标签用来包裹产品描述bodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用body
　　2、去掉h3自带的默认margin外边距样式body，p｛margin：0同时去掉body和h3标签的默认外边距｝
　　3、修饰h3中的文字样式。productp。describe｛fontsize：16字体大小fontweight：400；字体粗细color：845f3f；字体颜色｝
　　2、实现代码styletypetextcssbody，h3｛margin：0｝。product｛width：268height：400backgroundcolor：margin：50border：1textalign：｝。producth3｛fontsize：16fontweight：400；color：845f3f；｝stylebodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxh3快速煮水，安心饮用h3body
　　3、实现效果
　　第四步、构建一个长方形，用来包裹后所有内容
　　1、操作步骤
　　1、在。product盒子中，再构建一个名为。producttext的盒子bodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3body
　　2、我们给producttext添加如下样式。当然里添加的高度也是为了方便看效果，后面我们也会删除。。product。producttext｛height：100高度为了查看效果，后期会删除backgroundcolor：f8f8f8；背景颜色margintop：20上外边距20pxpadding：15上下左右内边距15px｝
　　3、我们把最开始为了方便看效果，给。product添加的高度给删除（或注释）。product｛height：400｝
　　2、实现代码styletypetextcssbody，p｛margin：0｝。product｛width：268height：400backgroundcolor：margin：50border：1textalign：｝。productp。describe｛fontsize：16fontweight：400；color：845f3f；｝。product。producttext｛height：100backgroundcolor：f8f8f8；margintop：20上外边距20pxpadding：15上下左右内边距15px｝stylebodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3添加内容边距，使里面的内容与盒子间有上下左右有15px空隙body3
　　实现效果
　　第五步、开发直播中、特惠、30天保价、售后免邮效果
　　1、操作步骤
　　（1）在名为。producttext盒子中添加类名为productmark的p盒子，同时在里面插入四张图，同时把图片高度设为20pxbodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20body
　　（2）添加好的图片之间默认有一定的空隙，这个空隙在不同的浏览器中看到的大小可能不一样。所以我们需要把这个默认的空隙去掉，然后自己给图片添加外边距来实现空隙。
　　空隙产生的原因，是浏览器把图片间的换行和空格给编译了。我们的处理方式可以在。productmark中添加fontsize：0就可以消除。。product。producttext。productmark｛fontsize：0去掉图片间的空隙｝
　　（3）、消除空隙后，我们给图片单独添加margin外边距来实现空隙效果。。product。producttext。productmarkimg｛margin：0px2给图片设置左右2像素外边距｝
　　2、代码styletypetextcssbody，p｛margin：0｝。product｛width：268height：400backgroundcolor：margin：50border：1textalign：｝。productp。describe｛fontsize：16fontweight：400；color：845f3f；｝。product。producttext｛height：100backgroundcolor：f8f8f8；margintop：20上外边距20pxpadding：15上下左右内边距15px｝。product。producttext。productmark｛fontsize：0｝。product。producttext。productmarkimg｛margin：0px2｝stylebodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20body
　　3、实现效果
　　第六步、开发产品标题效果
　　1、操作步骤
　　（1）、在producttext盒子中添加h3标签，用来包裹标题内容imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20h3云米电水壶h3
　　（2）、去掉h3自带的默认margin外边距body，p，h3｛margin：0同时去掉body，p，h3的默认外边距｝
　　（3）、通过以下css来修饰标题。product。producttexth3｛fontsize：20字体大小fontweight：400；字体粗细margintop：10上外边距为10px｝
　　2、代码bodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20h3云米电水壶h3body
　　3、实现效果
　　第七步、开发产品价格效果
　　1、操作步骤
　　（1）在producttext中添加p标签，用来包裹价格bodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20h3云米电水壶h3p59body
　　（2）、通过以下css来修饰价格样式。product。producttextp｛fontsize：20字体大小color：a92112；字体颜色margintop：5上外边距5px｝
　　（3）、去掉最开始给。producttext添中的高度。product。producttext｛height：100｝
　　2、代码styletypetextcssbody，p，h3｛margin：0｝。product｛width：268height：400backgroundcolor：margin：50border：1textalign：｝。productp。describe｛fontsize：16fontweight：400；color：845f3f；｝。product。producttext｛height：100backgroundcolor：f8f8f8；margintop：20上外边距20pxpadding：15上下左右内边距15px｝。product。producttext。productmark｛fontsize：0｝。product。producttext。productmarkimg｛margin：0px2｝。product。producttexth3｛fontsize：20fontweight：400；margintop：10｝。product。producttextp｛fontsize：20color：a92112；margintop：5｝stylebodyimgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20h3云米电水壶h3p59body
　　3、实现效果
　　第八步、添加a超链接，实现页面跳转
　　添加了超链接之后，页面中的文字就添加了下划线，同时h3中的文字颜色也发生了改变，那下一步我们就来修正下这些细节
　　1、代码！添加超链接，实现点击后跳转到新页面imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20h3云米电水壶h3p59
　　2、运行效果
　　第九步：修改加了a标签后带来的问题
　　1、操作步骤
　　（1）清除a标签的默认下划线样式a｛textdecoration：去掉下划线｝
　　（2）给h3标签中的文字加上颜色。product。producttexth3｛color：000；｝
　　（3）把a标签转换为块级元素a｛display：a标签转换为块级元素｝
　　a标签默认的是属于内联元素，正常情况下内联元素中是不能放块级元素，但a标签特殊，可以这样用。但在这里，如果不把标签转换为块级元素，会发生很奇怪的效果。你给a标签加上border：1后，如下图所示：
　　所以我们要把a标签转换为块级元素。当转换为块级元素后，效果如下，一切正常
　　2、运行代码styletypetextcssbody，p，h3｛margin：0｝a｛textdecoration：去掉下划线｝。product｛width：268height：400backgroundcolor：margin：50border：1textalign：｝。producta｛display：｝。productp。describe｛fontsize：16fontweight：400；color：845f3f；｝。product。producttext｛height：100backgroundcolor：f8f8f8；margintop：20上外边距20pxpadding：15上下左右内边距15px｝。product。producttext。productmark｛fontsize：0｝。product。producttext。productmarkimg｛margin：0px2｝。product。producttexth3｛fontsize：20fontweight：400；margintop：10color：000；｝。product。producttextp｛fontsize：20color：a92112；margintop：5｝style！添加超链接，实现点击后跳转到新页面imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmha9c4d1ecab82b6dc。jpgalt电水壶width195pxpclassdescribe快速煮水，安心饮用h3imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe39168cfd0bc28ed。jpgalt直播中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhe92c3fa95a02ac8e。jpgalt特惠中height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmh267400f62232c06c。jpgalt30天保价height20imgsrcc2021imgdataimg。jpgdatasrcimgq01。71396。comblmhd5f6b70204751537。jpgalt售后免邮height20h3云米电水壶h3p59
　　3、运行效果
　　为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
　　HTMLHTML5，CSSCSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通PC端项目开发（1个）移动WebApp开发（2个）多端响应式开发（1个）
　　共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
　　从学习一开始就同步使用Git进行项目代码的版本的管理，Markdown记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
　　从蓝湖UI设计稿到PC端，移动端，多端响应式开发项目开发真机调试，云服务部署上线；Linux环境下的Nginx部署，Nginx性能优化；Gzip压缩，HTTPS加密协议，域名服务器备案，解析；企业项目域名跳转的终极解决方案，多网站、多系统部署；使用使用Git在线项目部署；
　　这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频图文教程项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！
　　过程中【不涉及】任何费用和利益，非诚勿扰。
　　如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自今日头条！老师会邀请你进入学习，并给你发放相关资料
　　30天挑战学习计划Web前端从入门到实战arry老师的博客艾编程