用HTML+CSS制作一个简单美观的网站导航栏

在不久前学习了基础知识后，我已经开始制作自己的网页以测试和提高我的技能，但是我在让导航栏正确显示时遇到了问题。

我的导航栏的 HTML代码如下：

1. <div class=“nav”>
2.     <ul class=“nav”>
3.         <li class=“nav”><a class=“nav” href=“#”>Home</a></li>
4.         <li class=“nav”><a class=“nav” href=“#”>Coffee</a></li>
5.         <li class=“nav”><a class=“nav” href=“#”>Food</a></li>
6.         <li class=“nav”><a class=“nav” href=“#”>Catering</a></li>
7.         <li class=“nav”><a class=“nav” href=“#”>About</a></li>
8.         <li class=“nav”><a class=“nav” href=“#”>Contact</a></li>
9.     </ul>
10. </div>
11. <!–Navigation bar.–>

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

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

效果图代码如下：

1. div{    
2.     border: 2px;
3.     border–radius: 3px;
4.     margin: 0 auto 60 auto;
5.     padding: 10px;
6.     width: 980; 
7. }
8. /*BASIC DIV ELEMENT.*/
9.  
10. /*LINKS.*/
11. a{
12.     color: #545454;
13.     font–family: lucida grande, lucida sans, sans–serif;
14.     font–size: 14px;
15.     text–decoration: none;
16. }
17.  
18. a:hover, a:active {
19.     color: #191919;
20. }
21. /*LINKS.*/
22.  
23. /*NAV BAR*/
24. a.nav:link{
25.     background–color: #D7C5CC;
26.     color: #191919;
27.     display: inline–block;
28.     padding: 15px;
29.     text–align:center;
30.     width: 90px;
31. }
32.  
33. a.nav:hover{
34.     color: #191919;
35.     background–color: #EDD9DF;
36. }
37.  
38. li.nav{
39.     float: left;
40. }
41.  
42. ul.nav{
43.     display: center;
44.     margin: 0 auto 0 auto;
45. }
46. /*NAV BAR*/

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

我无法使导航栏的角正确变圆。我之前已将 ul.nav和li.nav更改为“border-radius: 10;” 作为一个属性 – 两者都无济于事。

我无法让导航栏在我的页面上正确居中（我正在 Chrome 中对其进行测试）。每隔一个 div 完美地居中；我试过编辑“显示”和“浮动”属性无效。