总结：

• 认识html文件的标签，至少能说出它叫什么，比如 <li></li> 就是li标签。
• 了解标签之间的父子关系
• 标签是写在html中的，本质作用是放文本的地方。比如<li><a>得之我幸</a></li>
• css样式是写在css文件中的，本质作用是美化标签也就是美化html。美化包括调整标签的位置，改变颜色，字体大小等等。
• 会在html文件中引入css文件。比如本文中的，将header.css文件引入header.html中。这样header.css中的样式就能对header.html文件起作用了！
• 重点重点再重点，编程千万不要关心细节。都是先弄出结果，才去细抠细节的。

目前样式

目标样式

Step1：将“得之我幸”四个字变大并且加粗

得知我幸这个词语是在第一li标签里的，所以有在已有代码基础上添加两行代码即可

nav ul li:first-child{
    font-weight: bold;							加粗
    font-size: 18px;									 字体大小调为18,  原来的是14
    margin-right: 70%;
}

再解释一下这个 nav ul li:first-child的意思

nav标签下的ul标签，下的li标签， 然后:first-child 是指选中li标签的第一个，这第一个就是“得之我幸”所在的地方

右键run，运行一下看效果，可以和右边的li标签中的文本比一下

Step2：鼠标hover悬浮事件（让左边文字变成pink色，右边文字有下划线）

hover是前端编程经常使用的一个事件。

作用：比如当你把鼠标指针放在“得之我幸”这四个字上的时候，能让它变成其它颜色！

还是那样，左边的文字是li标签的第一个，所以有如下代码

nav ul li:first-child a:hover{
    color: pink;
}

nav ul li:first-child 就是第一个li标签

那么a:hover 的意思就是，第一个li标签下的a标签，加上一个hover事件，也就是鼠标悬浮事件！

这个鼠标悬浮(也就是鼠标放在文字上)事件做了什么事呢，看代码：

color:pink;

也就是颜色color属性 赋值为粉色！

右键run运行，看效果

左边的变色了，那么右边的我想这么做，把鼠标移动上下的时候，让文字下面有下划线！

还是很简单。

nav ul li:not(:first-child) a:hover{
    text-decoration: underline;            //这行代码就是，文本装饰：下划线
}

这个代码有点英文基础的一定能看懂的。我就不解释了，和上面的代码对比一下。

右键run运行，看效果

好的，到此，一个网站的头部header的简单编写，就结束了。

下一篇开始网站身体body的编写：

参考网站：https://ypt.ink/home