第三课-盒子模型-导航栏
16lz
2021-11-13
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型-导航栏</title>
<style>
ul,li,body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: #666;
display: inline-block;
text-align: center;
padding: 20px 40px;
width: 100px;
}
li{
list-style: none;
}
nav>ul{
background: rgb(241, 224, 224);
display: flex;
justify-content: center;
position: relative;
}
nav>ul>li:hover{
background: rgb(236, 135, 135);
}
nav>ul>li>ul>li:hover{
background: rgb(236, 135, 135);
}
nav>ul>li:hover>ul{
display: block;
}
nav>ul>li>ul{
background: rgb(241, 224, 224);
position: absolute;
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">首页</a></li>
<li><a href="">前端学习</a>
<ul>
<li><a href="">html</a></li>
<li><a href="">css</a></li>
<li><a href="">javascript</a></li>
</ul>
</li>
<li><a href="">后端学习</a>
<li><a href="">我的</a>
<ul>
<li><a href="">资料修改</a></li>
<li><a href="">退出登录</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
更多相关文章
- HTML学习(二) 表单的制作习作
- 前端基础,HTML5常用标签学习总结
- h5标签学习
- 学习,是脱贫致富的捷径
- 初学者的docker学习
- MongoDB基础命令及操作 (仅学习)
- oracle学习笔记
- 大牛干货,MySQL命令1000行整理,收藏学习
- PHP中操作任意精度大小的GMP扩展学习