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

 5568

如何使用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 完美地居中;我试过编辑“显示”和“浮动”属性无效。

我在 Stackoverflow 上搜索了许多类似的帖子,但似乎没有一个答案能得到想要的结果。


TAG标签:
本文网址:https://www.zztuku.com/detail-9040.html
站长图库 - 如何使用HTML+CSS制作一个简单美观的导航栏(代码详解)
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐