HTML菜单（导航）优化

最新推荐文章于 2024-05-06 21:05:10 发布

小源丶同学

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量6.5k

点赞数 7

分类专栏：前端开发文章标签： html

本文链接：https://blog.csdn.net/qq_38611556/article/details/79469764

版权

到现在为止，一直在前端开发学习的最基础上，比如什么优化，什么美化之类。室友反而学的比我快。原因就是，我主要把时间放在基础知识的熟练掌握之上了，现在的CSS运用可以说是比较娴熟了。之后再进行更深一步的学习可能会更加轻松。

下面是我花一些时间写出的菜单优化，贴出源代码和效果，大家共同学习。

下面是最基础的导航效果：

先看下效果吧

鼠标移动到上面时是下面这种效果：

这是最基础的菜单。

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul{
		list-style: none;
		padding:0;
		overflow:hidden;
		display:table;
		height:auto;
		margin:0 auto;
	}
	a:link,a:visited{
		color:#ffffff;
		text-transform: uppercase;
		background-color: #bebebe;
		font-weight:bold;
		display: block;
		width:120px;
		padding: 9px;
		text-align: center;
		text-decoration: none;
	}
	a:hover,a:active{
		color:#ffffff;
		text-transform: uppercase;
		background-color:red;
		font-weight:bold;
		display: block;
		width:120px;
		padding: 9px;
		text-align: center;
		text-decoration: none;
	}
	li{
		float:left;
	}
</style>
</head>
<body>

	<ul>
		<li><a href="#home">home</a></li>
		<li><a href="#news">news</a></li>
		<li><a href="#contact">contact</a></li>
		<li><a href="#about">about</a></li>
	</ul>

</body>
</html>

最低0.47元/天解锁文章

小源丶同学

关注

7
点赞
踩
41

收藏

觉得还不错? 一键收藏
0
评论
HTML菜单（导航）优化

到现在为止，一直在前端开发学习的最基础上，比如什么优化，什么美化之类。室友反而学的比我快。原因就是，我主要把时间放在基础知识的熟练掌握之上了，现在的CSS运用可以说是比较娴熟了。之后再进行更深一步的学习可能会更加轻松。下面是我花一些时间写出的菜单优化，贴出源代码和效果，大家共同学习。下面是最基础的导航效果：先看下效果吧鼠标移动到上面时是下面这种效果：这是最基础的菜单。源代码如下：&...
复制链接

扫一扫

专栏目录