作者|李娜

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

娜姐最近看了一下有关前端 html 的文章,相比于其他的文章的阅读量并不是很受欢迎啊!

看来小伙伴们对于前端页面的学习欲望，并不是很大。

但是这个 html 学习 Java 最先应该学习的知识点了 ,不然以后 Java web 的项目怎么带你们做呢！

坚持了一段时间了！

俗话说的好“天下没有不散的宴席”,

但是就这么无声无息的终结，

不是你娜姐的作风！

而且还是有很多小伙伴

在支持着娜姐的前端知识分享文章。

所以娜姐给小伙伴带来了高级篇系列文章

娜姐带你一步步做锤子官网！

之所以写这个

是因为娜姐也算是半个锤粉。

（坚果pro发布后就路转粉了！）

开始

好了，老话说万事开头难

一个网页也不是那么容易就做完的。

所以今天娜姐就先带着大家做锤子

官网的导航栏。

效果演示

看到没有，就是这一小条。

我们力求可以做的很像！是时候表演真正的技术了！

我们现在写的是一个项目了就不能像之前那么随便了！

首先新建一个项目文件夹

其中 css 文件夹就是用来放我们的 css 的样式。

images 是用来放我们的图片的

js 就是放置 js 文件的。

iconfont 就是阿里图标。

那么一个前端的工程大致就是这样的组织结构了。

（基本上前端的项目都是这样的架构了）

然后在左面定义一个空间放我们的 logo

中间的部分做一个列表标签，

然后在最右边放置两个小图标。

恩！大致就是这样三块了！

然后动手，让你见识一下娜姐的厉害！

看到没有，完活!

我已经把主体搭建起来了

那么剩下的就是为我们的结构加样式了！

主体

（点击图片可以看大图）

看到了吗？我们这个样式只有这两行代码！！厉害吧！哈哈哈哈！

这世界哪有这么神奇的事两行代码就搞定样式！

还记得我刚才说过得吗？装css样式的文件夹！

这也是今天的知识点了！

我们以后会将css样式写在html 文件外面。

然后利用上面的两行代码引入css样式。

这样我们以后页面换风格只要换掉css样式。

或者修改一下文件夹的路径就可以了!

是不是很赞呀!

看我们的css样式就在这里了！

base 就是我们的页面属性初始化样式。

（点击图片可以看大图）

这些代码相信小伙伴们很熟悉了！

我就不给大家细讲了！

（偷个懒！）

（点击图片可以看大图）

这个就是我们这个页面的导航栏样式了！啦啦啦！

总算是把这个页面的导航栏开好了。

运行一下，效果就出来了！

涉及知识点：

外部样式

href 后面接我们的 css 文件所在的路径。

假如我们同时设置了外部样式，内部样式和行内样式。

那么优先级就是：

外部样式<内部样式<行内样式。

好啦锤子官网的导航栏就做好了

下一篇就是做官网的海报啦！

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

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

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