导航条练习HTML

最新推荐文章于 2022-04-11 20:24:39 发布

丁七岁

最新推荐文章于 2022-04-11 20:24:39 发布

阅读量337

点赞数 2

分类专栏： HTML 文章标签： CSS HTML 前端基础导航条

本文链接：https://blog.csdn.net/qq_43612538/article/details/95988795

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一：HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<title>导航条</title>
	</head>
	<body>
		<ul class="nav">
			<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>
			<li><a href="#">邮箱</a></li>
			<li><a href="#">联系</a></li>
		</ul>
	</body>
</html>

二：CSS代码

*{
	margin: 0;
	padding: 0;
}
.nav{
	list-style: none;
	background-color: #FFC0CB;
	width: 1000px;
	margin: 50px auto;
	overflow: hidden;
}
li{
	float: left;
	width: 12.5%;
}
a{
	display: block;
	width: 100%;
	text-align: center;
	padding: 5px 0;
	text-decoration: none;
	color: white;
	font-weight: bold;
}
.nav a:hover{
	background-color: #FF00FF;
}

三：结果展示

在这里插入图片描述

丁七岁

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
导航条练习HTML

刚刚学习了HTML与CSS基础，于是写了一个网页上的导航条的练习，供大家参考与学习交流。.**一：HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/demo1...
复制链接

扫一扫