CSS导航条菜单:带小三角形
很多网页的导航条都会有小三角形,其实实现这个功能也挺简单。
拿菜鸟教程首页导航做个例子
首先写一个大的div_nav,而“首页”“菜鸟笔记”“菜鸟工具”“参考手册”等则作为div包含在div_nav中。div_nav背景色设置为对应的颜色。
背景色的设置代码如下:
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
color:#fff;
background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}
即:
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current
上图代码的注解为:
id为menu中的ul的li。也就是导航栏里的每一个元素。鼠标放上去后会出来的效果。
在后面又加了ul说明弹出的是一个ul元素
整个这里面的css就是规定这个ul元素里的样式。
说白了就是鼠标划过导航栏的效果
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
a:hover 代表鼠标划过
a:current应该就是代表获取焦点。
而小三角形也很好设置
.blue #slatenav
{position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif)repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
}
通过background来设置"首页"等小div的背景图片。
而上文设置过鼠标滑过标签的效果,因此当鼠标滑到别的标签是,也会显示小三角形的背景。
鼠标滑过其他标签的时候:
好了,这样一个带小三角形的导航就做好了,至于其他的细节问题,可以自己慢慢调整。
注:代码中声明了文档的命名空间。
单独写<html>标签没有声明文档的命名空间,而加上xmlns="http://www.w3.org/1999/xhtml"的话,声明了文档的命名空间。声明了命名空间,浏览器在解析你的HTML文档的标签时,就会按照这个规范进行。一般使用时,不会感觉得出这二者有多大的区别。
特殊情况在于一些标签的解释上,比如xhtml的命名规范,要求标签都必须严格闭合,单标签的要在末尾加上"/",如果你使用了xhtml的命名规范,而在标签的书写上不按照规范来的话,有可能发生无法解析该标签的情况。所以,好的书写习惯是建议都加上结束标签。
附上源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>横版导航</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body style="text-align:center"><p> </p><div class="blue">
<div id="slatenav">
<ul>
<li><a href="http://sc.chinaz.com/" title="css menus" class="current">首页</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">菜鸟笔记</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">菜鸟工具</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">参考手册</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">用户笔记</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">测验/考试</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">本地书签</a></li>
<li><a href="http://sc.chinaz.com/" title="css menus">登录</a></li></ul>
</div>
</div></body>
</html>
前端技术分享点击:加入
CSS导航条菜单:带小三角形相关推荐
- 前端——菜鸟网站横向CSS导航条菜单:带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法.菜鸟教程首页导航如下图: 其实实现这个功能也挺简单.首先写一个大 ...
- HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
- HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...
- 前端案例 - 导航条菜单的制作
每个网站都包含导航条菜单,在此做一些 HTML 和 CSS 基础回顾. 本文主要跟随课程完成导航栏菜单的制作,课程来源 imooc导航条菜单的制作. 推荐学习前端的朋友可以看看,简简单单一个小课程,对 ...
- WHMCS 6 如何修改导航条菜单(主菜单)
如果你刚升级了 WHMCS 6 ,你会发现导航条菜单连产品分类都没有. 如果你是做 WHMCS 模板开发的,你会发现 WHMCS 6 的主菜单已经不能直接在模板修改了. 那如何修改 WHMCS 6 导 ...
- css伪类(before)实现小三角形
css伪类(before)实现小三角形 效果 代码 &::before {position: absolute;top: -6px;left: 38px;content: '';border- ...
- CSS导航条以及简单下拉菜单实现
以京东导航条来练习,导航条的制作可以采用浮动或者弹性布局,这里采用浮动,要注意高度塌陷的问题.这里简单仿写一下 下面实现鼠标移动到江苏实现下拉菜单的实现,首先要有一个下拉菜单,设置好宽高,把他隐藏起来 ...
- css实现带小三角形的边框
主要方法是使用伪元素before和after,之前已经总结过伪元素before.after用法,它们效果相当于在标签的内部放置一个最前或者最后的标签,添加的标签同样的能够继承父元素的属性,那么通过伪元 ...
最新文章
- eclipse注释模板设置(未整理)
- nova resize代码调用部分分析
- aliyun服务器安装nc工具
- Linux/U-Boot Git Repo
- Java 9 特性与示例
- idea新建java工程
- pip报错Failed to establish a new connection: [Errno -3] Temporary failure in name resolution‘,)‘
- python 自动化办公 随机生成题库文档
- MyBatis要不要学?京东内部的这份MyBatis文档真香!
- 阿里云产品分析(PPT)
- Rasa开发使用 Rasa_NLU及Rasa_Core模型训练与测试
- 学java好还是学挖机好_现在开挖掘机还能月入上万吗,为何年轻人还是热衷于学挖掘机?...
- auto.js脚本自动点击屏幕双11自动领金币
- Qt 周立功can二次开发
- Android软键盘工具类
- Unity3d DOTween 插件 详细使用方法
- 三高越来越多应该注意什么
- 如何轻松审核通过马甲包
- 冰冰学习笔记:string类的简单模拟
- 编程语言发展历程_计算机和编程的发展,个人历程