网页设计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)


相关推荐

发表回复

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

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