说说图文列表的布局
没错,就是这样简单的布局。
分了4列,你会想到什么呢?百分比?还是PX
我自己还是喜欢用百分比,不知你们是如何使用。
接下来说说我的做法!!
顶部的排序,就弄个色块吧。
默认|价格|销量|人气
这里是列表
CSS:
.container {
width: 1200px;
margin: auto;
}
.sort-warp {
height: 40px;
margin: 40px 0;
background: #f3f3f3;
}
说到这里,图文列表的布局你会想到什么标签呢?
在html5中有专用的标签哦!是规范哦!就是figure,figcaption
基本布局:
【KK味--碧根果208g】零食坚果特产干果炒货奶油味手剥长寿果
积分:50
立即购买
这就是大概的布局了,先把结构写出来,然后再写css。
这里写显示了一个figure,可以多复制几个出来哦!!这里就不复制了。
figure就是列,相当于html4.0里面的li
:用于内边距缩进,这个到最后再说,很强大的作用。
:专门放置图片 。
:专门放置内容。
其他就不说了,一看就基本上是懂的。
下面是CSS:
上图看到的列表有4列,那么figure就是25%啦!并且是并排的,那就是float: left; 别忘了,使用了浮动,父级必须清浮动哦!
.list-warp figure {
float: left;
width: 25%;
}
然后把图片也写进去,并且把图片宽度设置为100%
刷新浏览器看看,整体效果如下:
大致的效果是不是出来了。
好咧,先处理一下标题。CSS如下:
.list-warp figcaption {
font-size: 14px;
color: #636363;
line-height: 22px;
}
然后再处理“积分”。CSS如下:
.list-warp p {
padding: 8px 0;
font-size: 14px;
}
.list-warp p strong {
color: #f18517;
font-size: 18px;
}
然后再处理 “立即购买” 按钮。CSS如下:
.list-warp .more {
display: block;
width: 104px;
height: 32px;
margin-top: 8px;
border: 1px solid #f18517;
background: #fdeede;
font-size: 14px;
color: #f18517;
text-align: center;
line-height: 32px;
}
搞定了,再刷新浏览器看看
是不是又一步接近了。发现标题和图片贴得太近了。这里很简单可以用margin也可以用padding。
还记得 。这个是专门处理内容区的。处理一下就好。CSS如下:
.list-warp .con-warp { padding-top: 15px; }但有人可能会问,为什么不在 figcaption 里直接写样式呢?什么又要搞个 con-warp 出来?
用这个东西肯定是有一定道理的。现在只是 top 需要间距。那如果 上、右、左都需要呢。那怎么办,总不能在 figcaption、p、a里面都写吧。
所以使用 con-warp 这里只要写一个位置,就搞定啦!!
其他的东西都弄好了。现在就来处理列与列之间的间距了。
经常看到有些人在写的时候,直接就使用了margin-right,使用列的右边产生间距。但这样会导致最后一个无法贴边。
CSS如下:
.list-warp .warp { margin-right: 52px; }
就像这样,注意右则
然后又要针对右则那个去处理样式。这样做也没有问题,可以通过css或js的方式来处理。
但是对于程序输出来说,会导致他们做更多的事情,因为他们在输出的时候,需要进行判断是第几个需要加东西。
所以说作为前端工程师来说,要了解程序的输出机制,尽可能减少他们的工作。前端能处理的就处理掉,这样是最好的,程序做起来也舒服一些。
除了这个做好法,我自己也有另一种做法。
也是使用 margin ,但是我们使用左右两边。
预先测量一下,列与列之间的间距宽度。大概是52px;
然后就写成这样啦,CSS如下:
.list-warp .warp {
margin: 0 26px;
}
52的一半是不是26。
然后再看看效果,
中间的间距是不是比较大,左右两个比较小,这就对了。
中间是26与26相加,就是52,自然就比较大。左右两个边得相加,自然就是26px
但与设计稿不一样。设计稿左右两边是没有的。
处理这个也不难。
html里面不是有个ul。
利用这个ul就可以。使用ul左右两边往外拉一下就好,如何往外拉,其实就是设置 margin 负值就可以。如下:
.list-warp ul { margin: 0 -26px; }再看看效果
看,是不是搞定了,还有一个哦,
ul往外啦了,是不是有东西撑出了最大范围区。竟然有这个问题就需要处理,在父级隐藏一下就好,CSS如下:
.list-warp { overflow: hidden ;}好吧,全部搞定了。
纯CSS处理,不用JS,也不用添加其他的样式。
其实只是一个小小的技巧而已。
题外话,如果我要分5列呢?
是不是把figure 设置为20%就可以了。
确实是这样,但不能直接就设置。需要能过另一个样式来处理,因为要考虑到有可能另外的地方也用了相同的样式。
注意,在list-warp里面添加了一个 col-5 的东西,然后通过这个来处理,这样就不会对其他地方超成影响啦!
CSS如下:
.list-warp.col-5 figure { width: 20%; }效果如下:
是不是超方便,如果要6列、7列。用同样的方式处理就好。