做成第三部分样式该如何做呢？是个重点呢？ 

主体html代码如下：用li加a的方法来做啊。

 效果如下，前面有小点怎末办呢？

除去li的样式就行了 

 

现在就没有了小点 

可是nav区域不在header区域一行内啊！

当然需要浮动了！加入浮动哟！ 

还是没有解决？偶偶，原来第一个logo没有浮动啊！ 

给logo加上浮动，因为一浮全浮啊，兄弟元素必须都浮动才能起作用呀！ 

现在可以了，在一行了！可是离logo区域太近了，怎末解决呢？ 

量一下实际距离logo区域的宽度。 

加入左外边距不就可以了吗！ 

效果很明显，可是另一个问题出现了，三个没在一行显示啊？ 

我们究竟是使li块元素一行显示，还是让a行内元素一行显示呢？值得我们深深的思考啊 

因为li是块级元素，我们布局时一般需要一行显示时的块级元素，加入

浮动就行了！ 

出现了我们想要的结果。 

可是三个离的太近了呀！，我们量一下实际的距离 。我们想要一点进去出现一个块状链接，那该怎麽办呢？需要给a指定一个高度，要想加入高度，行内元素是不可以的呀！那就使它变成块级元素不就行了（display:block）加入高度42px，高度都是一样的，可是宽呢？因为每个nav的子元素的字数是不一样的呀！宽是不一样的！那该怎末解决呢？那我们只能利用padding来撑开盒子了！给a一个padding:0 10px不就可以了吗！（这一点是重点呀！！！）

 

分步解析：块级元素链接 

此时量出来a的实际美工给的原样式的左右内边距 

 

使得a行内元素也变成块元素，这样可以设置它的 

 

 

效果很明显呀！ 

然后改一下字体大小和颜色，在ps中进行测量和吸管进行吸取！ 

 

 

 

 

设置一下字体大小和颜色就可以了！ 

 

 

 

把a中原来的链接修饰（比如下划线等）去掉 

 

 

其实所有的链接我们都可以先去掉呀！在前面直接先把a中的修饰去掉，这样下面的a不用一个一个来进行去掉了 

 

 

然后给a一个新的鼠标经过就有效果的伪元素 

 

 

a与a之间也有距离啊，可是a是在li里面呀，不能直接给a设置外边距呀。a的外边距是a到li的边框呀！ 那我们直接给li一个外边距不就行了吗！

 

也可以设置鼠标经过字体变蓝效果呀！ 

 

 

总结：外框是nav，中间框是li,最里面是a。三个都是类似这样排成一行。

第一步:

        先让nav排在logo后面排成一行，然后让块级元素li也在nav中排成一行，都是可以用浮动的方法来做的。 除去li的标准样式小点和a的原有下划线等原样式。

第二步：

       nav和logo之间的距离设置，测量并用nav的外边距来设置margin-left：多少px，需要自己测量。

第三步：

    因为一开始咱都没有设置宽度，三个小li也离的太近了。而我们可以直接给li与li之间加上外边距就可以了呀！用margin:0 15px;就可以了呀！

      而a的宽度还是没有解决呀，可是不能直接给a一个宽度，因为每个a的内容的字数是不一样的呀！a的宽也就是不一样的！怎样撑开宽度呢我们可以用padding 来撑开盒子呀，前面咱们学过这种方法啊，要想用padding来撑开盒子，盒子必须有宽度呀。a是行内元素，所以使它变成块级元素（display:block）就可以了用撑开的方法了！直接给a一个padding:0 10px就可以实现由字体来撑开盒子了。

      我们想要一点进去出现一个块状链接，那该怎麽办呢？加入高度42px就可以

继续往下看，重头戏在后面呢！

字体大小为18px,我们测量出来的

 对于两个字体的话，一个是18px,两个是36px,也就是内容宽度，而a盒子实际宽度是内容宽度(36px)+内边距（20px）+边框（0）=56px,如图：检查元素得到a的宽度是56px呀呀呀

而对于四个字体。道理是一样的呀！a的宽度=18*4+20+0+=92px

 

li的宽度是由a的宽度加上a的外边距之和(相当于li的内边距，因为咱们是全部以a为主的，所以对于a来说)，li的宽度也就是56px+20px=76px

对于四个字体的li的宽度=92+20=112px

总共有两个（两个字体的）76*2=152px,一个四字的112px,所以nav的宽度=152px+112px=264px

 具体代码css代码如下：

 

 

​/*header start*/
.header {
	height: 42px;
	/*background-color: pink;*/
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 60px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 10px;
	margin-right: 20px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}​

 

​/*header start*/
.header {
    height: 42px;
    /*background-color: pink;*/
    margin: 30px auto;
}
.logo {
    float: left;
    margin-right: 60px;
}
.nav {
    float: left;
}
.nav ul li {
    float: left;
}
.nav ul li a {
    display: block;
    height: 40px;
    padding: 0 10px;
    margin-right: 20px;
    line-height: 40px;
    font-size: 18px;
    color: #050505;
    text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}​