《高级篇 中》: 锤子官网中逼格最高的一节!

作者|李娜

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


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

最近娜姐发现

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

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

推荐一下

欢迎私聊,留言也行。

好了!

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

正题

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

《锤子官网海报图模块》

真羡慕你们

可以这么早遇见我

这么优秀的女子!

哦吼吼吼!

《高级篇 中》: 锤子官网中逼格最高的一节!_第1张图片

首先我们先验收一下成果

这是我们上次做的

(戳下面蓝字直达上篇传送门)

锤子官网导航栏

小伙伴们有印象吗?


如何?

是不是效果很像

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

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

《高级篇 中》: 锤子官网中逼格最高的一节!_第2张图片

1

我们先得制作导航栏

下面这小条!

《高级篇 中》: 锤子官网中逼格最高的一节!_第3张图片

暂且称呼他为小导航栏吧

然后动手!

最近是不是有些暴力了

总喜欢用动手这句话

《高级篇 中》: 锤子官网中逼格最高的一节!_第4张图片

好嘞!

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

《高级篇 中》: 锤子官网中逼格最高的一节!_第5张图片

点击图片看原图

这样我们简单的小导航栏

就设置成功了

为什么说是简单呢?

不知道小伙伴们有没有

注意

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

当当当当

就是这个

《高级篇 中》: 锤子官网中逼格最高的一节!_第6张图片

看到没有!

然而细心的我已然发现!

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

《高级篇 中》: 锤子官网中逼格最高的一节!_第7张图片

点击图片看原图

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

《高级篇 中》: 锤子官网中逼格最高的一节!_第8张图片

样式就在下面了

《高级篇 中》: 锤子官网中逼格最高的一节!_第9张图片

点击图片看原图

又到了激动人心的时刻了

让我们来看一下效果吧!

《高级篇 中》: 锤子官网中逼格最高的一节!_第10张图片

完美!!!还原度80%

《高级篇 中》: 锤子官网中逼格最高的一节!_第11张图片

唉!我出来了!

唉!我又回去了!

《高级篇 中》: 锤子官网中逼格最高的一节!_第12张图片

就是这么六!

你以为这就完了吗?

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

没有逼格!

《高级篇 中》: 锤子官网中逼格最高的一节!_第13张图片

我们继续

海报图!

《高级篇 中》: 锤子官网中逼格最高的一节!_第14张图片

代码如下

《高级篇 中》: 锤子官网中逼格最高的一节!_第15张图片

一张大图

你用l这么多img标签

《高级篇 中》: 锤子官网中逼格最高的一节!_第16张图片

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

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

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

《高级篇 中》: 锤子官网中逼格最高的一节!_第17张图片

代码就是那样了

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

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

so!这里就没有用

《高级篇 中》: 锤子官网中逼格最高的一节!_第18张图片

页面布局好了

就要开始调试样式了

《高级篇 中》: 锤子官网中逼格最高的一节!_第19张图片

点击图片看原图

不要看这段代码短哦

浓缩的才是精华

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

《高级篇 中》: 锤子官网中逼格最高的一节!_第20张图片

那我们就叫他商品块吧!

上代码

《高级篇 中》: 锤子官网中逼格最高的一节!_第21张图片

上样式

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

好了这篇就到这里了,怎么样逼格出来了吧!

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


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

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

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

有疑问?请留言!关注Java联盟微信公众号,看Java要闻!

你可能感兴趣的:(《高级篇 中》: 锤子官网中逼格最高的一节!)