作者|李娜
*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。
这几天真是艳阳高照呀！李娜我看了一下自己的“装备”，感觉这时候出去浪，是不是有点不给太阳公公面子呀！
算了还是网购好了，西瓜真好吃哈！
吃着西瓜，逛着天猫！
除了买东西，还给小伙伴们看了一下，天猫的首页产品展示图。
他们是这样的
这样的
还有这样的
这个时候，我不能在沉默了！
是时候向大家表演真正的技术了。
好了今天就给大家带来，天猫商品展示图的html教程！
第一部分
首先将上述图片进行拆分。
（ps：李娜 考虑了很久，觉得还是做美食系列的效果好些，对着人来弄实在是下不了手）这是一个效果图，我们只要搞出这一个，剩下的复制这个样式就好了。
第一步：我们先把图片素材保存好（还别说这一找还真是找到了不少好吃的）
第二步：新建页面，编写代码。
第三步：成品图奉上。
怎么样是不是简单明了，很清晰呀（吼吼吼！！！）
不知道怎么做的，赶紧翻翻之前的几篇文章恶补下。
.
.
.
.
.
.
好吧！
你还是不清楚？
我还是给你演示一遍吧。
第二部分
首先将这个图的结构分成两块。
上面的文字部分以及下面的图片部分。
小编选用列表来做大盒子，之后里面包着两个小盒子。一个装文字，一个装图片。
之后对每部分的样式进行样式的设置。
首先要进行一个样式初始化，为了防止游览器的默认样式对我们设置的样式产生干扰，影响效果。
之后就是对各个盒子的内容做一一的设置了。
第三部分
小伙伴们，课堂开课了。
第一个知识点：
*{margin:0;padding:0;}，
将页面样式初始化（不懂的小伙伴请看前面几篇教程）
第二个知识点：
display:inline-block;
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
简单来说他的效果就是让我们的图片可以呈现在同一行内排列的效果。
不然的话，我们的作品图片效果就会是这样：
独占一列，纵向排列。看起来好尴尬呀！有木有!
第三个知识点：
text-align:right;
意思是我们的文本对其方式，选择了右对齐。
这里的文本指的是我们的图片。
第四部分
那么我的《天猫商品 零食展示图》就完成了。
做了这个展示之后，看着就饿了，李娜我就准备愉快的收快递去了。有事可以留言评论哦。
爱你们，么么哒！！
当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！
网友评论