京东导航变色作业
16lz
2022-05-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位做导航</title>
<style>
*{
padding: 0px;
}
li{
width: 80px;
list-style: none;
font-size: 13px;
line-height: 30px;
text-align: center;
margin-left: 2px;
}
a{
text-decoration: none;
color: white;
}
nav{
width: 800px;
height: 30px;
margin:auto;
background: red;
}
nav>ul{
width: 800px;
height: 30px;
background: red;
}
li:nth-child(2){
position: relative;
left: 80px;
top: -30px;
}
li:nth-child(3)
{
position: relative;
left: 160px;
top: -60px;
}
li:nth-child(4){
position: relative;
left: 240px;
top: -90px;
}
li:nth-child(5){
position: relative;
left: 320px;
top: -120px;
}
li:nth-child(6){
position: relative;
left: 400px;
top: -150px;
}
li:hover{
background: white;
border-top: 1px solid red;
}
li:hover>a{
color: black;
}
</style>
</head>
<body>
<nav>
<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>
</nav>
</body>
</html>
更多相关文章
- 【腾讯Bugly干货分享】Android(安卓)Linker 与 SO 加壳技术
- 简单模态框演示
- Android手机定位应用小解
- Android(安卓)ANR错误排查
- Android地图应用开发之--百度地图集成及应用_baidumap
- android与html5的交互——数据库操作,UI操作,以及html5的localStor
- 微信小程序左右导航联动加顶部
- Android(安卓)svg 绘制三角形
- Android高手必须了解的关于View的细节(进阶必备)