《编程基础：HTML第9章》：娜姐来带你做 微信 官网？

作者|李娜

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

今天这篇是

编程基础html第九章！

这里先爆料一下，等这个HTML教程写完啦！

（好像还有2章这样子）

娜姐来带你们写 锤子手机官网！

怎么样,NB不NB?

感觉NB的

待会看完的时候

给我在这篇文章下点个ZAN!

再插一句！

自从李娜做HTML系列教程以来就一直在想，

如何才能让小伙伴们学到知识的同时，

又不会觉得太枯燥，

这个时候我忽然想到！

小时候李娜的各项成绩中只有手工课的成绩最好

因为只有手工课是动手的！

（PS：怪不得老师的毕业评语是该生动手能力强，和同学们打成一片。）

于是乎李娜就有了这个想法。

每次都给小伙伴分享一些小东西的做法。

不过告诉你

今天娜姐，就看上微信的官网了。

SO，今天来给大家分享一下 微信官网 做法。

看到没有这就是微信的官网，我刚截下来的图片，还是新鲜的。

快趁热来

.

.

学习！

对!我们的目标就是微信官网

..

..

上面的黑色导航栏部分，就是这一小条。

怎么样惊不惊喜，意不意外。

（PS：哇哈哈哈！！！我就是这么调皮，可爱呀！！）

正题

首先先来分析这个效果图，进行一个盒子的划分。

大致就是以下三个部分。

一个大盒子套一个稍小点的盒子，这个稍小点的盒子中。

放入logo 和 菜单栏。

上代码：

先把我们分出来的几部分的代码补全。

效果如下

（感觉就像我们有时候网页加载出来的时候的网页效果）

没关系

下面我们进行样式初始化并且去掉这些默认的样式。

之后把背景图片和  logo 设置到我们的代码中。

然后设置一下列表的样式，就可以了。

这么一说是不是觉得很简单呀！

觉得简单的小伙伴，大可以自己试一试，

看看是不是真的就像你想的那样！

（ps:只是看的话就可以学会知识的话，那我们还要工作经验做什么！哼！）

社会你娜姐！人美路子野！

直接上全部代码！！！

给你看看效果图片：

说实话这是一个鼠标浮动的效果，

实在是截不下来鼠标图标了，

你们就当上边有一个隐形的小鼠标在滑动好不好呀！

本章用到的知识点

知识点1：

通配符选择器：

*{margin:;padding:;}  （样式初始化用的那个）

元素选择器：

ul{width:;height:;}    （去除标签样式用的那个）

类选择器：

.wrap{width:;height:;}    (先给标签取个类名，然后进行设置)

id选择器

#box{width:;height:;}    （这里没有用到，但是提一下）

选择器的优先级顺序：

（看不懂的！你过来，来，咱们私聊微信，我看你是不是来捣乱的！！！）

通配符   <   标签   <   Class   <   Id

知识点2：

浮动

使元素脱离文档流，按照指定方向（左右）发生移动，

遇到父级边界或者相邻的浮动元素停了下来。

浮动会导致父元素的塌陷，所以在使用完之后要清除浮动。

好的今天的分享就到这里了！怎么样，李娜说清楚了吗？

要是有没说明白的地方，小伙伴们要指出来哟！！

那么下期再见了！

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

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