模仿 126 邮箱首页 —— 导航栏

打算模仿一些网站的页面，先从一些看上去简单的开始，比如 126 邮箱首页，鉴于现在的水平，先从页面的一部分开始，下面是 126 邮箱的导航栏：



按 F12 键打开 “开发者工具”，来观察分析导航栏中的内容：

1. 调整窗口大小，发现导航栏的宽度会与浏览器窗口宽度保持一致，说明导航栏的宽度不是固定的，发现高度是 70px;
   设置 CSS 属性： 100% 来实现与浏览器窗口宽度保持一致
   设置 CSS 属性：height: 70px 来实现固定高度

2. 导航栏左、右两端有留白，留白宽度是 40px;
   设置 CSS 属性：padding:0 40px 来实现，当 padding 属性只有两个值是，第一个参数值表示上、下边距大小，第二个参数值表示左、右边距大小

3. 导航栏最左侧是邮箱 Logo，是一张图片，图片的宽高是：144px * 32px；
   设置 CSS 属性： 144px; height: 32px; 来实现

4. Logo 右边是一行文字：你的专业电子邮局，宽高是：157px * 30px，且左边有一条竖线；
   文字可以用 <p></p> 标签来实现，
   竖线通过 CSS 属性：border-left: 1px solid grey; 来实现

5. 导航栏最右侧是 7 个菜单项，每个菜单项之间间隔 12px，“帮助” 菜单项前面也有一条竖线；
   七个菜单可以分别用 <a></a> 标签来实现，竖线通过 CSS 属性: border-left: 1px sold grey; 实现

6. 导航栏所有内容都是垂直居中对齐;

分析完内容后，下一步就动手写代码来实现导航栏。(待更新 10.30)