作者|李娜

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

本来打算上中下三篇

就把锤子官网

搞定的

结果内容有点微多呀

没有办法

娜姐我临时决定加了个

嗯！中二篇！

好的！

小伙伴们请不要在意这些细节！

让我们继续在知识的海洋中

遨游吧！

前面我们已经

把锤子的头造出来了

那么现在我们继续吧！

看到了吗？

这就是我们今天的任务

很长有木有

就像一个锤子的把手！

so！

让我们给锤子造个把手吧!

上代码

貌似有小伙伴反应看不清代码

看到没就是这么任性

（重复的代码比较多

这里就截了一部分）

黑乎乎的一片

很炫很酷有木有！

炫酷黑！保护视力的首选颜色！

友情提示：

各位小伙伴不要贪黑写代码

对眼睛不好呦！

效果如下：

相信细心的小伙伴

已经发现了

这里面有很多相同的布局

像商品展示图的样式模块

及头部的样式

都是一样的

所以

我们只要做好一个

模块的样式

后面的只要更换图片以及

描述文字就可以啦！

也就是说

我们只要为那个大图片

设置一下样式

其他的代码重复使用就可以了

这不叫懒

这就是代码重复利用

节约了很多成本呀

！

新加这段代码

然后复制一下网页上的标签代码

之后的一些小细节

小伙伴们自己去试试吧！

好了！

我们今天的任务就完成了

要素材的小伙伴可以直接给你呦！

公众号 回复锤子官网

自己试试写一下！

我们都是棒棒哒！

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

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

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