CSS + HTML实现导航条显示

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


实现代码如下:

<!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>

实现的效果如下:


以上代码思路仅供参考。

没有更多推荐了,返回首页