作者|李娜

*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。

一入腐门深似海，从此节操是路人

最近娜姐发现

我已经在腐女的道路上越走越远了。

小伙伴要是有什么好看的剧

推荐一下

欢迎私聊，留言也行。

好了！

闲话说完我们开始办正事吧！

正题

今天我们要做锤子官网中逼格最帅的一部分！

《锤子官网海报图模块》

真羡慕你们

可以这么早遇见我

这么优秀的女子！

哦吼吼吼！

首先我们先验收一下成果

这是我们上次做的

（戳下面蓝字直达上篇传送门）

锤子官网导航栏

小伙伴们有印象吗？

如何？

是不是效果很像

你要是问我为什么不是一模一样的

我会严重怀疑你的动机哦！

1

我们先得制作导航栏

下面这小条！

暂且称呼他为小导航栏吧

然后动手！

最近是不是有些暴力了

总喜欢用动手这句话

好嘞！

让我们来编写小导航栏的样式吧！

点击图片看原图

这样我们简单的小导航栏

就设置成功了

为什么说是简单呢？

不知道小伙伴们有没有

注意

这个小导航栏是有隐藏菜单的

当当当当

就是这个

看到没有！

然而细心的我已然发现！

于是乎我们的后续工作就来了

点击图片看原图

我就是这么细心的女子呀！

样式就在下面了

点击图片看原图

又到了激动人心的时刻了

让我们来看一下效果吧！

完美！！！还原度80%

唉！我出来了！

唉！我又回去了！

就是这么六！

你以为这就完了吗？

说好的锤子头只有一小点吗？

没有逼格！

我们继续

海报图！

代码如下

一张大图

你用l这么多img标签

你也以为是一张大图对不对

其实这是三张图合起来的呦！

感兴趣的小伙伴可以自己去试试看哟！

代码就是那样了

这是一个轮播图模块需要JS技术

我们之前没有分享这部分内容

so！这里就没有用

页面布局好了

就要开始调试样式了

点击图片看原图

不要看这段代码短哦

浓缩的才是精华

紧接着轮播图的就是下面这一小条

那我们就叫他商品块吧！

上代码

上样式

这样我们的小区块就设置好了

好了这篇就到这里了，怎么样逼格出来了吧！

不知道小伙伴做的如何呢？

小伙伴们就别偷懒了自己尝试做一个锤子官网吧！

关注Java联盟微信公众号回复“锤子官网”就可以获取素材源码啦！

当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！

有疑问？请留言！关注Java联盟微信公众号，看Java要闻！