如何在 HTML 和 CSS 中格式化我的导航栏？

之前的文章《css技巧：怎么给图片添加蒙版（分享）》中，给大家介绍了怎样使用css图片添加蒙版的方法。下面本篇文章给大家介绍如何在 HTML 和 CSS 中格式化我的导航栏呢，我们一起看怎么做，有需要的朋友可以参考一下，希望对你们有所助。

在不久前学习了基础知识（并很快忘记了它们）后，几个月前我开始阅读它。我已经开始制作自己的网页以测试和提高我的技能，但是我在让导航栏正确显示时遇到了问题。

我的导航栏的 HTML

代码如下：

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

下面列出了相关元素（div、ul、li 和 a）的 CSS 代码

代码如下：

div{    
    border: 2px;
    border-radius: 3px;
    margin: 0 auto 60 auto;
    padding: 10px;
    width: 980; 
}
/*BASIC DIV ELEMENT.*/

/*LINKS.*/
a{
    color: #545454;
    font-family: lucida grande, lucida sans, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

a:hover, a:active {
    color: #191919;
}
/*LINKS.*/

/*NAV BAR*/
a.nav:link{
    background-color: #D7C5CC;
    color: #191919;
    display: inline-block;
    padding: 15px;
    text-align:center;
    width: 90px;
}

a.nav:hover{
    color: #191919;
    background-color: #EDD9DF;
}

li.nav{
    float: left;
}

ul.nav{
    display: center;
    margin: 0 auto 0 auto;
}
/*NAV BAR*/

在编写 HTML 和 CSS 代码方面，我是一个绝对的初学者，如果做得不好，我深表歉意。

我在两个方面遇到导航栏的问题：

我无法使导航栏的角正确变圆。我之前已将 ul.nav和li.nav更改为“border-radius: 10;” 作为一个属性 - 两者都无济于事。
我无法让导航栏在我的页面上正确居中（我正在 Chrome 中对其进行测试）。每隔一个 div 完美地居中；我试过编辑“显示”和“浮动”属性无效。
我在 Stackoverflow 上搜索了许多类似的帖子，但似乎没有一个答案能得到想要的结果。

推荐学习：Html视频教程

以上就是如何在 HTML 和 CSS 中格式化我的导航栏？的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！