本小节基本要求：

• 会使用webstorm开发工具
• 至少明白html与css的作用

要点：

1. <ul><li>首页</li><li>xxxx</li>.....</ul>标签的使用
2. 标签之间存在一种关系，称为父子关系。例如，li标签在ul标签里面，那么li就是子标签，ul就是父标签。

先看最终效果图

Step1

我们采用第二种方式-解耦方式，来编辑网页。所以要将css与html分离开编写。

右键项目-》new-》Directory

建立两个文件夹，分别是css、view。

顾名思义，css是放css文件的地方，view是放html文件的地方。

ps：通过上篇知道，代码是要写在html中的。

右键css文件夹，创建一个空的css文件，取名header

右键view文件夹，创建一个空的html文件，取名header

(它们的文件格式是不一样的)，css也取名为header可以理解为这个css文件是为header.html文件提供的。

Step2

开始编辑刚刚创建的header.html文件

body标签中的代码

<header>
    <nav>
        <span>
           <ul>														  <!--这个ul标签是关键-->
               <li>得之我幸</li>		<!--这个li标签全在ul标签里面，可以将它称为ul的子标签-->
               <li>首页</li>						<!--反之ul可以称为li标签的父标签-->
               <li>时间轴</li>
               <li>标签</li>
               <Li>分类</Li>
               <li>友情链接</li>
               <li>关于我</li>
               <li>更多</li>
           </ul>
        </span>
    </nav>
</header>

右键-》run一下，看看效果

可以发现，所有的文字都出来了，接下来该怎么做呢？该用css将它们的位置固定了吧！

• “得之我幸”在左边，其它的在右边
• 而且文字不是竖着排列的，是横着的

下一篇，用css样式文件来达到美化刚刚创建的header.html的目的：https://www.toutiao.com/i6960072832588169739/