放个好看的头图先
最近的时候刷知乎看到了这种广告效果
emmmmm… 简书把图片转成了黑白,忽视这个细节吧。
效果分析
- 广告图片在信息流下面一层
- 在信息流的列表中留一个缝隙,就能看到下面一层的图片了
- 隐藏滚动条
嗯,看上去这么华丽的效果就是这么简单。
具体实现
- 用一个
div#container
作为包裹层,里面ul > li*8
作为信息流, 一个绝对定位的div#footer
。这样大体的框架就好了。 - 调整一下高宽,加点边框和阴影。
- 为了信息流的滑动,将
div#content
设置overflow: hidden;
和overflow-y: scroll;
- 隐藏滚动条,设置
::-webkit-scrollbar { width: 0px; }
这是设置网页滚动条的宽度ÿ