使用position: fixed; 和 top: 0; 把导航菜单固定在顶部
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:0;
}
div{
background-color:green;
padding:20px;
margin-top:30px;
height:1500px;
}
ul{
background-color:black;
position:fixed; /*固定ul位置*/
top:0; /*顶部*/
width:100%;
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
}
li{
float:left;
}
li a{
display:block;
text-align:center;
color:white;
text-decoration:none;
padding:14px 16px;
}
li a:hover:not(.home){
background-color:red;
}
.home{
background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="home" href="https://www.dwoke.com" >Home</a></li>
<li><a href="https://www.dwoke.com" >News</a></li>
<li><a href="https://www.dwoke.com" >Contact</a></li>
<li><a href="https://www.dwoke.com" >About</a></li>
</ul>
<div>
<h3>固定的顶部导航栏</h3>
<h4>请滚动页面以查看效果。</h4>
<h4>页面滚动时导航栏将位于页面顶部。</h4>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
</div>
</body>
</html>
运行效果：
使用position: fixed; 和 bottom: 0; 把导航菜单固定在底部
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:0;
}
div{
background-color:green;
padding:20px;
margin-top:30px;
height:1500px;
}
ul{
background-color:black;
position:fixed; /*固定ul位置*/
bottom:0; /*底部*/
width:100%;
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
}
li{
float:left;
}
li a{
display:block;
text-align:center;
color:white;
text-decoration:none;
padding:14px 16px;
}
li a:hover:not(.home){
background-color:red;
}
.home{
background-color:#4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="home" href="https://www.dwoke.com" >Home</a></li>
<li><a href="https://www.dwoke.com" >News</a></li>
<li><a href="https://www.dwoke.com" >Contact</a></li>
<li><a href="https://www.dwoke.com" >About</a></li>
</ul>
<div>
<h3>固定的顶部导航栏</h3>
<h4>请滚动页面以查看效果。</h4>
<h4>页面滚动时导航栏将位于页面顶部。</h4>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
<p>some text some text some text some text..</p>
</div>
</body>
</html>
实例效果：
评论