简单导航栏案例

最新推荐文章于 2024-05-18 16:20:54 发布

透明的胡萝卜_robots

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量147

点赞数

分类专栏：前端 css CSS样式文章标签： css html css3

本文链接：https://blog.csdn.net/gou1791241251/article/details/126597441

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

CSS样式

12 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>简单导航栏案例</title>
	<style type="text/css">
		/*1.变化样式 有大小 一行显示 我们想到了行内块元素*/
		a {
			width: 100px;
			height: 30px;
			background: red;
			display: inline-block;
			text-align: center;
			color: #fff;
			text-decoration: none;
		}
		/*鼠标经过 变换底色和文字的颜色*/
		a:hover{
			background-color: orange;
			color: yellow;
		}
	</style>
</head>
<body>
	<a href="">新闻</a>
	<a href="">体育</a>
	<a href="">汽车</a>
	<a href="">娱乐</a>
</body>
</html>

效果展示：
在这里插入图片描述
鼠标放上去之后效果变换的效果：