CSS-导航栏

此笔记源自写代码啦课程

1. CSS搜索活用spec
2. google mdn
3. 阮一峰CSS
4. 张鑫旭的CSS博客
5. Codrops
6. CSS揭秘
7. CSS 2.1 中文 spec

如何引入CSS

1. html自带部分css功能，但现在都已经废弃了
2. 在html标签中加入style，如。这种叫做style属性，内联样式，即把样式写在标签上。（内联样式）
3. 使用style标签，一般写在head标签内，将修饰的样式写在描述的标签中，用{}包起来。可以不用在任一标签内写style了，可以在html头就写好。（内联样式）
4. 新建css文件，将描述的代码写在css文件中。在html文件的head标签中写，即表示关系为css，文件地址为./a.css。这个也叫外部文件，外部样式。（外部样式）
5. 比较少用到的，在CSS文件中引入另一个CSS，用@import url(./b.css);，意思是在当前目录下再引入一个b样式。（外部样式）

写CSS的一些重点

1. 当列表前有小圆点时，可以在ul标签中加一句，即ul style="list-style: none;" class="clearfix">
2. 当把列表横起来之后，发现第一个标签与页面最左边有空白，是因为每个标签都有默认样式，这是由ul标签的默认样式引起的。（入门：CSS课程的制作导航的16:46），可以使用ul style="list-style: none; margin= 0; padding= 0;" class="clearfix">解决距离问题。
3. 当前把列表横过来，我们使用float，但是float会有bug。一般解决这个bug的办法是在CSS文件中写上：

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

并且将clearfix写在所有的浮动元素的爸爸身上，即在父元素中加上class="clearfix"上面的这个三级代码要背下来。

4. 用QQ截图来量字的像素
5. 在CSS中写.topNavBar>nav>ul，这个>代表右边必须是左边的儿子。 这是我们学的第一个选择器
6. 看一个字体的实际像素大小，要去看审查元素的计算出来的font-size，即computed里面的字体大小，而不是styles中的字体大小
7. 不同操作系统渲染出的字，就算只给一个颜色，字的周围也会有虚边，并且中间的颜色不一定是他的颜色。
8. 解决鼠标浮动到选项上时，出现边框后其他选项会移动的问题的方法就算：原本就在其他选项上添加一个无色的边框。42:40
9. 在测hover的属性时，建议使用开发者工具，强制hover，去测出相关属性。
10. 当在li标签包裹着的a标签，如果两者的像素不同，则在a标签的CSS样式里加一个display: block;即可