
在不久前學(xué)習(xí)了基礎(chǔ)知識(shí)(并很快忘記了它們)后,幾個(gè)月前我開(kāi)始閱讀它。我已經(jīng)開(kāi)始制作自己的網(wǎng)頁(yè)以測(cè)試和提高我的技能,但是我在讓導(dǎo)航欄正確顯示時(shí)遇到了問(wèn)題。
我的導(dǎo)航欄的 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.-->
在編寫 HTML 和 CSS 代碼方面,我是一個(gè)絕對(duì)的初學(xué)者,如果做得不好,我深表歉意。
下面列出了相關(guān)元素(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*/我在兩個(gè)方面遇到導(dǎo)航欄的問(wèn)題:
我無(wú)法使導(dǎo)航欄的角正確變圓。我之前已將 ul.nav和li.nav更改為“border-radius: 10;” 作為一個(gè)屬性 - 兩者都無(wú)濟(jì)于事。
我無(wú)法讓導(dǎo)航欄在我的頁(yè)面上正確居中(我正在 Chrome 中對(duì)其進(jìn)行測(cè)試)。每隔一個(gè) div 完美地居中;我試過(guò)編輯“顯示”和“浮動(dòng)”屬性無(wú)效。
我在 Stackoverflow 上搜索了許多類似的帖子,但似乎沒(méi)有一個(gè)答案能得到想要的結(jié)果。






