纯css实现导航条（顶部菜单）

基本信息

源码名称：纯css实现导航条（顶部菜单）

源码大小：1.42KB

文件格式：.html

开发语言：CSS

更新时间：2020-05-20

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

入门级示例源码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.top {
				/* 设置宽度高度背景颜色 */
				height: auto;
				width: 100%;
				background: #178fe5;
				position: fixed;
				/*固定在顶部*/
				top: 0;
				/*离顶部的距离为0*/
				text-align: center;
			}
			
			.top ul {
				/* 清除ul标签的默认样式 */
				list-style-type: none;
				overflow: hidden;
				display: inline-block;
			}
			
			.top li {
				float: left;
				/* 使li内容横向浮动，即横向排列  */
				margin-right: 10px;
				/* 两个li之间的距离*/
				font-size: 16px;
				line-height: 38px;
			}
			
			.top li a {
				/* 设置链接内容显示的格式*/
				display: block;
				/* 把链接显示为块元素可使整个链接区域可点击 */
				color: white;
				padding: 9px 16px;
				margin-left: 35px;
				text-decoration: none;
				/* 去除下划线 */
			}
			
			.top li a:hover {
				/* 鼠标选中时背景色 */
				background-color: #097ed1;
			}
		</style>

		<body>
				<div class="top">
						<ul>
							<li><a href="#">网址导航</a></li>
							<li><a href="#">小游戏首页</a></li>
							<li><a href="#">网页游戏</a></li>
							<li><a href="#">游戏直播</a></li>
							<li><a href="#">影视动漫</a></li>
							<li><a href="#">小游戏专题</a></li>
						</ul>
				</div>
		</body>
	</head>

</html>