网页设计css导航链接怎么做,如何用DIV+CSS制作导航条

网页设计css导航链接怎么做,如何用DIV+CSS制作导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIVCSS实现。同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深。一般导航条采用ulli列表布局,这里也不例外DIVCSS5实例也采用列表标签ulli+CSS布局。这样的导航条有以下二部分代码组成。1、CSS代码:ul#nav{width:100%;height:60px;background:#…

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

一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现。同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深。

682f275f53c018192bd090867e6d948c.png

一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li + CSS布局。

这样的导航条有以下二部分代码组成。

1、CSS代码:

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}

ul#nav li{display:inline; height:60px}

ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;

color:#FFF; font-family:”\5FAE\8F6F\96C5\9ED1″; font-size:16px}

ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/

这里ul和#nav紧贴没有空格,代表#nav只针对ul标签设置,标签只有ul标签使用id=”nav”设置样式才能生效。

以上代码没有在ul外再设置DIV,这样可以节约一个DIV实现同样布局。

2、HTML代码

这样就制作好了一个导航条了。

注意事项

在实际DIV+CSS布局项目中,一般不会只使用一次ul li列表,避免干扰其他地方使用ul li布局,避免对ul li设置样式影响其他地方,所以特地这里对ul设置一个#nav命名(一般导航条以nav或menu为CSS命名,这里选择nav),假如导航条背景宽度100%全屏或固定宽度均可,这里就由ul#nav控制,这里就设置100%全屏宽度蓝色背景。

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

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

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

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

(0)
blank

相关推荐

  • select is not valid at this_Mysql修改密码

    select is not valid at this_Mysql修改密码今天在写MySQL相关的文章演示新增用户的时候出现了如下报错信息【1142-SELECTcommanddeniedtouser’dev’@’localhost’fortable’user’】,从提示来看就是”user”表的”dev”用户不能执行”SELECT”命令。(其实就是没有权限,用管理员账号给他授权就行了)…

  • git提交代码流程

    git提交代码流程使用git也快有两年了,今天将常用命令总结一下,我描述一个整个的开发流程架构师在gitlab上新建了一个项目,搭好了框架1.我作为开发者之一,首先gitclonehttps://xx用idea打开项目,然后点开idea下面的console,在这里面执行git命令刚进来自然是master分支,然后我们首先创建一个自己的分支并切换过去,命令如下gitcheckout-…

  • 逻辑漏洞之越权、支付漏洞「建议收藏」

    逻辑漏洞之越权、支付漏洞「建议收藏」目录逻辑漏洞Web安全渗透三大核心方向输入输出登录体系、权限认证业务逻辑漏洞分类1、登录体系安全暴力破解cookie安全加密测试登录验证绕过任意注册2、业务一致性安全手机号篡改邮箱和用户名更改订单ID更改商品编号更改用户ID篡改流程顺序3、业务数据篡改金额数据篡改商品数量篡改最大数限制突破金额&优惠组合修改4、密码找回漏洞分析数据包,定位敏感信息分析找回机制修改数据包验证任意密码找回5、验证码突破暴力破解时间、次数突破回显测试验证码绕过测试验证检验机制猜解6、会话权限安全未授权访问水平&垂直

  • Java解惑五:类之谜

    Java解惑五:类之谜

    2021年11月23日
  • 求生之路2ping高_DDS信号源

    求生之路2ping高_DDS信号源问答时间:2020年12月17日嘉宾简介:高少星:萌宝集团创始人、稻荷资本创始合伙人、《好玩的书》作者。曾任顺为资本董事总经理、百度高级投资经理,是好大夫、丁香园、一点资讯、宝宝巴士、I…

    2022年10月26日
  • sharepoint 2013 附件控件FileUpload怎样检验是否为图片的方法「建议收藏」

    sharepoint 2013 附件控件FileUpload怎样检验是否为图片的方法

发表回复

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

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