简单导航栏制作

最新推荐文章于 2024-03-19 20:09:28 发布

Web-once

最新推荐文章于 2024-03-19 20:09:28 发布

阅读量217

点赞数

分类专栏： CSS 文章标签： CSS 导航栏入门初级

本文链接：https://blog.csdn.net/qq_42381297/article/details/83474190

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>导航栏</title>
	<style>
		nav{
			text-align: center;
			margin: 100px 0 0 0;
			background-color: skyblue;
		}
		ul,li{
			margin: 0;
			padding: 0;
		}
		ul{
			overflow: hidden;
			display: inline-block;
			vertical-align: top;
		}
		ul li{
			list-style: none;
			float: left;
		}
		a{
			color: #000;
			text-decoration: none;
			display: inline-block;
			padding: 30px;
			background-color: pink;
		}
		a:hover{
			color: pink;
			background-color: #000;
		}
	</style>
</head>
<body>

<nav>
	<ul>
		<li><a href="javascript:;" title="">首页</a></li>
		<li><a href="javascript:;" title="">菜谱</a></li>
		<li><a href="javascript:;" title="">食材</a></li>
		<li><a href="javascript:;" title="">珍选</a></li>
		<li><a href="javascript:;" title="">健康</a></li>
		<li><a href="javascript:;" title="">专题</a></li>
		<li><a href="javascript:;" title="">社区</a></li>
		<li><a href="javascript:;" title="">话题</a></li>
	</ul>
</nav>

</body>
</html>

非常简单，复制粘贴即可看到效果

Web-once

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单导航栏制作

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;导航栏&lt;/title&gt; &lt;style&gt; nav{ text-align: center; margin: 100px 0 0 0; backgro
复制链接

扫一扫