css构建两个简单的导航栏

最新推荐文章于 2023-02-04 17:09:32 发布

blue7wings

最新推荐文章于 2023-02-04 17:09:32 发布

阅读量834

点赞数

分类专栏： javascript&html 文章标签： css CSS 导航栏

本文链接：https://blog.csdn.net/blue7wings/article/details/8237714

版权

javascript&html 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

css构建两个简单的导航栏

第一个导航栏

效果:

当鼠标移动到上面的时候,对应的颜色改变

code:

<!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=utf-8" />
<title>荧光灯效果的菜单</title>
<style type="text/css">
a{
	text-decoration:none;
	display:block;
	width:120px;
	
	}
a:link,a:visited{
	border:1px solid #999;
	border-top:solid 10px #999;
	background-color:#666;
	color:#CCC;
	}
a:hover{
	border-top:solid 10px #CF9;
	color:yellow;
	}
</style>



</head>

<body>
<a href="#1">主页</a>
<a href="#2">科技频道</a>
<a href="#3">时尚频道</a>
<a href="#$">教育频道</a>
</body>
</html>

简要分析:主要是通过<a>标签的伪类实现的,当鼠标移动到上面的时候,就改变<a>标签边框的上边框的颜色和字体的颜色.道理很简单,但效果还是不错的.

第二个导航栏

效果:

当鼠标移动到上面,相应颜色改变,并且缩进.

code:

<!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=utf-8" />
<title>创建简单的导航栏</title>
<style type="text/css">
a,a:visited,a:active{
	display:block;
	text-decoration:none;
    border-left:#000 solid 5px;
	margin:2px;
	width:120px;
	background-color:#666;
	}
a:hover{
	border-left:#9CC solid 5px;
	margin-left:10px;
	}
</style>
</head>

<body>

<a href="#1">主页</a>
<a href="#2">科技频道</a>
<a href="#3">时尚频道</a>
<a href="#4">教育频道</a>
</body>
</html>

简要分析:这和上面的例子的原理是一样的,都是通过<a>标签的伪类实现,当鼠标移动到上面左边框颜色改变,增加左margin.

blue7wings

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css构建两个简单的导航栏

css构建两个简单的导航栏第一个导航栏效果:当鼠标移动到上面的时候,对应的颜色改变code:荧光灯效果的菜单a{ text-decoration:none; display:block; width:120px; }a:link,a:visited{ border:1px solid #999; border-top:solid 10p
复制链接

扫一扫