如何使用HTML+CSS制作一个简单美观的导航栏（代码详解）

在不久前深造了基础知识后，我已经最先创造自身的网页以测试以及提高我的技能，然而我在让导航栏准确显示时遇到了问题。

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

1.  class="nav">
2.     
3.          class="nav" href="#">Home
4.          class="nav" href="#">Coffee
5.          class="nav" href="#">Food
6.          class="nav" href="#">Catering
7.          class="nav" href="#">About
8.          class="nav" href="#">Contact
9.     

在编写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完美地居中；我试过编纂“显示”以及“浮动”属性有效。

本文链接：https://addon.ciliseo.com/ru-he-shi-yong-htmlcss-zhi-zuo-yi-ge-jian-dan-mei-guan-de-dao-hang-lan-dai-ma-xiang-jie.html