CSS + HTML导航栏效果

全栈程序员站长

发布于 2022-09-02 15:08:41

6K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

今天写了一个导航栏，需要的效果如下：

实现的代码思路如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
		div{
			height: 40px;
			width:960px;
			background: #55a8ea;
			margin:0 auto;
		}
	span{
		display: inline-block;
		font:bold 14px/40px '微软雅黑';
		color:#fff;
		margin-left:40px;
	}
	span img{
		position: relative;
		top:-10px;
		left:40px;
	}
	</style>
</head>
<body>

	<div>
		<span style="display: inline-block;width:70px;background: #00619f;margin:0;padding-left: 40px">首 页</span>
		<span>网站建设</span>
		<span>程序开发</span>
		<span>网络营销</span>
		<span style="margin:0;"><img src="images/new.png" alt="new"> 企业VI</span>
		<span>案例展示</span>
		<span> 联系我们</span>
	</div>
</body>
</html>

实现的效果如下: