网页导航栏制作
代码】网页导航。
·
学习链接：网页导航栏
最终成果图：
源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始化样式 */
*{
/* 内外边距为0 */
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.nav{
height: 40px;
background:linear-gradient(orange,red);
/* 渐变效果 */
}
.navlist li{
/* 通过左浮动让列表变为横排 */
float: left;
height: 40px;
width: 100px;
/* 让文本水平垂直居中 */
line-height: 40px;
text-align: center;
}
.navlist a{
/* 超链接改为黑色 */
color: black;
/* 把链接变为块显示 */
display: block;
}
.navlist{
width: 800px;
margin: auto;
}
/* 鼠标悬浮链接时，超链接背景色变化 */
.navlist a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div class="nav">
<!-- 放入列表 -->
<ul class="navlist">
<!-- li*5 -->
<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>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献5条内容
所有评论(0)