HTML导航CSS样式详解

大家好，欢迎来到IT知识分享网。

HTML导航CSS样式详解

1. 可以看到我们的导航栏分为左边logo和右边的导航（字），两边距离网页边框相同，背景为灰色，我们可以简单分为以下模块：
   我们将导航栏作为一个大盒子，里面嵌套一个盒子让它居中，再绿色盒子里面放入一个小盒子分别装logo图片和一个无序列表ul装文字导航。
   
2. 代码结构如下：

<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> 

nav{ 
    /*让两边留白部分相同，为15%*/ padding: 0 15%; background-color: #; } 

让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; } 

有不懂得留言~