如何用css将ul转换为一个漂亮的水平导航栏？

用css将ul转换为一个水平导航栏步骤：1. 将ul中的默认黑点去掉：ul{ list-style:none; }2. 让ul中的所有li设置为行内块元素，让这些li标签都在同一行； 3. 把ul也变为行内块元素，让logo能和他处在同一行；4. 去掉原先黑点所占据的位置，让ul刚刚包裹住所有的li标签；5. 将logo图标加在ul标签的上面,此时应该让div的宽高为logo.png的宽高,不然在div的值为空的情况下，div不会显示出来。6. 将div设置为行内块元素，让它和ul导航处在同一行。div.logo{display:inline-block;}7. 此时虽然他们在同一行上，但是他们并没有对齐，然后有两种方式让他们对其。通过设置float或者vertical-align两种方式。方式一：div.logo,ul{float:left;} //让ul和logo都左浮动方式二：div.logo,ul{vertical-align: middle;} //让ul和logo都进行居中排列8.设置每个li的具体宽高，然后通过text-align与line-height让li中的文字垂直水平居中。9. 设置当鼠标经过li时，背景变为蓝色，字体变为白色,同时鼠标变为一个手状。10.去掉ul默认的上下margin值,同时去掉body默认的margin值，让导航贴近窗体的最上面11. 根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。 12. 让第一个li的默认背景颜色为蓝色，字体为白色加粗。13. 给div与ul套上一个header标签，14. 给这个header标签设置大于div与ul的高度以避免当字体变大时被撑开    然后在给header设置一个2px的padding-bottom，模拟下划线效果  15. 最后在ul的外面嵌套一个nav，进行更加的语义化说明。

1. 去掉ul默认的黑点ul{ list-style:none; }代码和运行结果如下

2.将ul中的所有li设置为行内块元素，让这些li标签都在同一行； li{display:inline-block;} 代码和运行结果如下

3. 把ul也变为行内块元素，让即将添加的logo能和他处在同一行；ul{ display:inline-block; }4. 去掉原先黑点所占据的位置，让ul刚刚包裹住所有的li标签；ul{padding-left:0;}5. 将logo图标加在ul标签的上面,此时应该让div的宽高为logo.png的宽高,不然 在div的值为空的情况下，div不会显示出来。html代码：

......

6. 将div设置为行内块元素，让它和ul导航处在同一行。div.logo{display:inline-block;}7. 设置vertical-align属性或者float属性让ul和div不仅在同一行上，还要让他们进行对齐方式一：div.logo,ul{float:left;} //让ul和logo都左浮动方式二：div.logo,ul{vertical-align: middle;} //让ul和logo都进行居中排列这里使用vertical-align属性。运行结果和代码如下

8.设置每个li的具体宽高，然后通过text-align与line-height让li中的文字垂直水平居中。 li{   width:140px;   heigth:51px;   text-align:center;   line-height:51px; }运行结果和代码如下

9. 设置当鼠标经过li时，背景变为蓝色，字体变为白色加粗,同时鼠标变为一个手状li:hover{   color:white;   background-color:#11278a;   cursor:pointer;   font-weight:bold;}运行结果和代码如下

10.去掉ul默认的上下margin值,同时去掉body默认的margin值，让导航贴近窗体的最上面 body,ul{  margin:0; }运行结果和代码如下

11. 根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。margin-right:10%;运行结果和代码如下

11. 根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。 div.logo{  margin-right:10%;  } 12. 让第一个li的默认背景颜色为蓝色，字体为白色加粗。li:nth-child(1){background-color:#11278a;color:white;font-weight:bold;}13. 给div与ul套上一个header标签， 

完整代码如下：         

用css将ul转换为一个水平导航栏总结1. 将ul中的默认黑点去掉：ul{ list-style:none; }2. 让ul中的所有li设置为行内块元素，让这些li标签都在同一行； 3. 把ul也变为行内块元素，让logo能和他处在同一行；4. 去掉原先黑点所占据的位置，让ul刚刚包裹住所有的li标签；5. 将logo图标加在ul标签的上面,此时应该让div的宽高为logo.png的宽高,不然在div的值为空的情况下，div不会显示出来。6. 将div设置为行内块元素，让它和ul导航处在同一行。div.logo{display:inline-block;}7. 此时虽然他们在同一行上，但是他们并没有对齐，然后有两种方式让他们对其。通过设置float或者vertical-align两种方式。方式一：div.logo,ul{float:left;} //让ul和logo都左浮动方式二：div.logo,ul{vertical-align: middle;} //让ul和logo都进行居中排列8.设置每个li的具体宽高，然后通过text-align与line-height让li中的文字垂直水平居中。9. 设置当鼠标经过li时，背景变为蓝色，字体变为白色,同时鼠标变为一个手状。10.去掉ul默认的上下margin值,同时去掉body默认的margin值，让导航贴近窗体的最上面11. 根据你的电脑的屏幕分辨率的实际情况给你的div设置一个margin-right属性，让ul导航到右边去。 12. 让第一个li的默认背景颜色为蓝色，字体为白色加粗。13. 给div与ul套上一个header标签，14. 给这个header标签设置大于div与ul的高度以避免当字体变大时被撑开    然后在给header设置一个2px的padding-bottom，模拟下划线效果  15. 最后在ul的外面嵌套一个nav，进行更加的语义化说明。