HTML导航条的制作

导航条的制作HTML代码:
<nav>

  <ul>

    <li>

      <a href="#"></a>

    </li>

    <li>

      <a href="#"></a>

    </li>

  </ul>

</nav>

以上是导航条制作的基本格式,接下来是css样式

去除li带来的小黑点:

li{
                list-style: none;
            }

将nav设置一个合适的宽,高度由内容去撑开,只需要设置margin:auto将整个导航栏居中

将a标签的下划线去掉: text-decoration: none;

将导航条中<li>的内容设置样式:

.link li{
                float: left;  ————把内容左浮动,这样可以横向排列
                width: 100px;——设置每个li的宽
                height: 30px;——设置每个li的高
                background-color:pink  ——设置li的背景颜色为粉色
                border: 1px solid #6495ED; ——设置li的边框颜色以及边框大小
                text-align: center;——设置li中的文字样式为居中
                line-height: 30px;——设置li中文字举例上边框的高度
            }

.link li:hover{     ————设置将鼠标放到li时的背景颜色
                background-color: aqua;
            }

 

  .link li:hover a{  ————设置将鼠标放到li中的a标签的内容时的文字颜色
                color: black;
                    }

 

最终特效是:

 

转载于:https://www.cnblogs.com/hzqzwl/p/11180300.html

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值