HTML导航条的制作

HTML导航条的制作导航条的制作HTML代码:<nav>  <ul>    <li>      <ahref=”#”></a>    </li>    <li>      <ahref=”#”></a>    </li>  </ul></na…

大家好,又见面了,我是你们的朋友全栈君。

导航条的制作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;
                    }

 

最终特效是:

HTML导航条的制作

 

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163187.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • SAP中ABAP开发常用的BAPI汇总

    SAP中ABAP开发常用的BAPI汇总有些订单SAP提供了Function和BAPI两种方式创建、修改订单,我们建议使用BAPI方式,BAPI会有一些逻辑的检查。MM模块MM01、MM02BAPI_MATERIAL_SAVEDATA创

  • 设置时区定位可以关闭吗_监控时区设置是什么意思

    设置时区定位可以关闭吗_监控时区设置是什么意思mysql的驱动jar包升级到了8.0版本以上。升级后从mysql中查出的时候,全都比数据库的时间多13小时,而且这些时间存到数据库的时间,有些是正确的时间,有时比正确时间少13小时,这样返回给前端的时间就不准确,解决这个问题只要在springboot的数据库连接配置中增加一段配置就能解决问题。这个时区要设置好,不然会出现时差,如果你设置serverTimezone=UTC,连接不报错,但是我们在用java代码插入到数据库时间的时候却出现了问题。比如在java代码里面插入的时间为:2021-0.

  • 5G网络切片综述 — 1

    5G网络切片综述 — 1简介随着5G时代的来临,21年的SA在国内的全范围商用,现阶段人们对于5G的必要性认识还不足。主要是目前人们用的5G主要集中在eMBB(enhancedMobileBroadband)即增强型移动带宽的阶段,而大数据业务如在线直播、高清视频等在4G上都得到了很好的支持,所以带宽的继续增大对于用户体验的边际效应递减。5G所带来的真正改善并不仅仅是在于大带宽,而在于5G提供了在同一张物理5G网络的情况下,同时能够提供eMBB,URLLC(Ultra-ReliableLow-LatencyCommun

  • javascript 跳转_jquery页面跳转的方法

    javascript 跳转_jquery页面跳转的方法转自:微点阅读https://www.weidianyuedu.com第一种:<scriptlanguage=”javascript”type=”text/javascript”>window.location.href=”login.jsp?backurl=”+window.location.href;</script>第二种:<scriptlanguage=”javascript”>alert(“返回”);window.histor..

  • c# 第14节 字符方法、转义字符、字符串的方法[通俗易懂]

    c# 第14节 字符方法、转义字符、字符串的方法

  • goland 激活码2021(破解版激活)

    goland 激活码2021(破解版激活),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号