<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<!-- 去除浏览器默认样式 -->
<link rel="stylesheet" href="../reset_style/reset.css">
<title>20胡学好</title>
<style>
body{
height: 3000px;
}
a{
text-decoration: none;
color: #808080;
}
.nav{
width: 1210px;
height: 48px;
background-color: rgb(228, 226, 226);
/* 临时居中的方法 */
margin: 200px auto;
/* *********开启了粘滞定位******************************************/
position: sticky;
/* 当滑动时相对于顶部20px停住 */
top: 20px;
/* *********开启了粘滞定位******************************************/
}
.nav li{
/* 左浮动 */
float: left;
}
.nav a{
/* 设置行高 */
line-height: 48px;
/* 将行内元素转换成块元素,目的当鼠标触及到目标周围是,都有效*/
display: block;
/* 使链接在导航栏中分散开 */
padding: 0px 59px;
}
.nav li:nth-child(4) a{
/*最后多出8个像素,使第4个a的背景颜色的宽度加四,将其覆盖 */
padding: 0px 61px;
}
.nav a:hover{
color: #E8E7E3;
background-color: #3F3F3F;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">Browser Side</a></li>
<li><a href="javascript:;">Programming</a></li>
<li><a href="javascript:;">XML</a></li>
<li><a href="javascript:;">Web Building</a></li>
<li><a href="javascript:;">reference</a></li>
</ul>
</body>
</html>
07 粘滞定位
最新推荐文章于 2024-09-20 14:49:00 发布