所有分类
  • 所有分类
  • 织梦模板

如何使用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.     borderradius: 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.     fontfamily: lucida grande, lucida sans, sansserif;
  14.     fontsize: 14px;
  15.     textdecoration: none;
  16. }
  17.  
  18. a:hover, a:active {
  19.     color: #191919;
  20. }
  21. /*LINKS.*/
  22.  
  23. /*NAV BAR*/
  24. a.nav:link{
  25.     backgroundcolor: #D7C5CC;
  26.     color: #191919;
  27.     display: inlineblock;
  28.     padding: 15px;
  29.     textalign:center;
  30.     width: 90px;
  31. }
  32.  
  33. a.nav:hover{
  34.     color: #191919;
  35.     backgroundcolor: #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 完美地居中;我试过编辑“显示”和“浮动”属性无效。

常见问题
所有VIP可以商用吗,会不会有版权问题?
本站提供的源码大部分可以作为源码开发参考和学习,部分开源可商用。
账号可以分享给其他人使用吗?
您好,账号禁止共享,我们有验证机制的,会自动封号处理,谢谢配合。
如果遇到问题怎么联系解决呢?
最快的途径是在导航菜单选择提交【售后】会在24小时处理
下载的源码可以使用吗?
我们会在显著的地方表明【已测试】,显示已测试的都是小编测试过 。
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5.如有侵权请联系客服邮件770973008@qq.com
原文链接:https://www.56admin.com/18909.html,转载请注明出处。
0
分享海报

评论0

请先
九年老站,质量有保证,90%亲自测试!优惠原价199模板币终生SVIP,优惠价68模板币! 数量有限! 购买SVIP 所有资源免积分下载,畅享无忧!
显示验证码
没有账号?注册  忘记密码?