作者|李娜
*本文为「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：
浮动
使元素脱离文档流，按照指定方向（左右）发生移动，
遇到父级边界或者相邻的浮动元素停了下来。
浮动会导致父元素的塌陷，所以在使用完之后要清除浮动。
好的今天的分享就到这里了！怎么样，李娜说清楚了吗？
要是有没说明白的地方，小伙伴们要指出来哟！！
那么下期再见了！
当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！
网友评论