CSS + HTML实现导航条显示

最新推荐文章于 2024-05-19 09:58:49 发布

程百球

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量4.7k

点赞数 7

分类专栏：前端学习文章标签：导航栏 CSS 导航条居中

本文链接：https://blog.csdn.net/Wolf_flue/article/details/80873585

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在写前端，需要实现一个导航条，效果如下：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style type="text/css">
		/**{margin: 0;padding: 0;}*/

		div{
			border:2px solid #000;
			height: 32px;
			width: 960px;
			text-align: center;
			margin:0 auto;
			padding-top: 10px;

		}
		span{
			display: inline-block;
			color:#333;
			font-size:14px;
			font-weight: bold;
			font-family: '微软雅黑';
			padding:0 20px;
			border-left: 2px solid #000;
		}

	</style>
</head>
<body>
	<div>
		<span style="border-left: 0;">首页</span>
		<span>网站建设</span>
		<span>程序开发</span>
		<span>网络营销</span>
		<span>企业VI</span>
		<span>案例展示</span>
		<span>联系我们</span>
	</div>
</body>
</html>

实现的效果如下：