爱站程序员基地HTML导航CSS样式详解
导航的最终样式：
- 可以看到我们的导航栏分为左边logo和右边的导航（字），两边距离网页边框相同，背景为灰色，我们可以简单分为以下模块：
我们将导航栏作为一个大盒子，里面嵌套一个盒子让它居中，再绿色盒子里面放入一个小盒子分别装logo图片和一个无序列表ul装文字导航。 - 代码结构如下：
<nav class=\"clear\"><div id=\"logo\"><img src=\"../day05/web-img/logo.png\" alt=\"\"></div><ul><li><a href=\"\">首页</a></li><li><a href=\"\">产品</a></li><li><a href=\"\">服务</a></li><li><a href=\"\">11</a></li><li><a href=\"\">22</a></li></ul></nav>
3.CSS样式：
首先我们将nav背景色改成灰色，两边留白；padding为内边距。
nav{/*让两边留白部分相同，为15%*/padding: 0 15%;background-color: #797777;}
让logo和ul分别左右浮动：
#logo img{float: left;/*font-size: 0;*/height: 65px;}nav>ul{float: right;}
改变ul内部li元素的样式；list-style是去掉默认样式；float是为了让li元素横着向左排列。
nav>ul>li{list-style: none;float: left;/*list-style: none;*/width: 85px;height: 65px;/*字体垂直居中*/line-height: 65px;/*字体水平居中*/text-align: center;}
有不懂得留言~
