一，CSS的引入方法：
1.行内样式
2.内部样式
在<head>中新增一段
3.外部样式
单独一个css文件来编写css代码，然后再以link的形式引入
4.CSS中再引入一个CSS
@import url(./b.css);
二，让导航栏横着显示之浮动
1.给所有子元素如<li>添加:
float: left;
2.给他们的父元素如<ul>添加一个list-style:none，可去掉每个子元素前面的小点；
3.由于浮动，所以下一个元素也会浮动上来，所以要清除浮动，先在父元素上加个class选择器 class="clearfix"，然后再加上：
.clearfix::after{
content: '';
display: block;
clear: both;
}
三，脱离文档流
块级元素的高度是由内部文档流的高度决定的，我们需要让导航条浮于背景图片之上，那么导航条脱离文档流后，它的父元素的高度就会减去导航条的高度，不管他了。
1.脱离文档流之相对屏幕固定，使用：
position: fixed;
如导航条。 但使用了这条代码过后，宽度不受控制了，本来在右边的导航条挤到左边来：
此时不得不用第二个bug代码：（能不用绝对不要用的代码）
width: 100%;
此时会发现导航的字快要超出整个宽度了，因为导航栏有左右padding，去掉padding左右边空隙不大不美观，无法还原成初始样式，此时需要在导航栏的div中再套一个div，将所有元素放进去。然后再给这个新div加上左右padding
2.脱离文档流之绝对定位，即该元素脱离了文档流但是又相对父元素定位。
步骤：先在子元素上写：
position: absolute;
再在父元素上写：
position: relative;
即子元素相对于这个父元素定位。
四，引入图标
1.复制代码，引入到html文件中，例如：（每次不一样）
<script src="//at.alicdn.com/t/font_1264256_ywqj2p1wgyj.js"></script>
2.加入通用CSS代码：
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
3.将以下代码粘贴到你想要的位置：（XXX）即名字
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-XXX"></use>
</svg>
4.可以用width和height改图标的宽高，改颜色要用：比较特别
fill:white;
五，学习资源
1.Google: 关键词 MDN
2.CSS Tricks ---进页面后点击SNIPPETS 还可以直接搜索想要的，如想看居中效果怎么写，搜索 center css tricks
6.CSS揭秘
8.Magic of CSS免费在线书
