CSS + HTML导航栏效果

最新推荐文章于 2024-07-29 20:45:45 发布

程百球

最新推荐文章于 2024-07-29 20:45:45 发布

阅读量6.3k

点赞数 13

分类专栏：前端学习文章标签： Banner 导航栏 CSS HTML

本文链接：https://blog.youkuaiyun.com/Wolf_flue/article/details/80886659

版权

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

实现的代码思路如下：

<!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;&#