<!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title></title>
<style type="text/css">
body{
margin:0;
}
ul{
list-style-type:none;
margin:0;
padding:0;
width:25%;
background-color:#f1f1f1;
position:fixed;
height:100%;
overflow:auto
}
li a{
display:block;
color:#000;
padding:8px 16px;
text-decoration:none;
}
li a.active{
background-color:#4CAF50;
color:white;
}
li a:hover:not(.active){
background-color:#555;
color:white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="/go.html?url=#home">主页</a></li>
<li><a href="/go.html?url=#news">新闻</a></li>
<li><a href="/go.html?url=#contact">联系</a></li>
<li><a href="/go.html?url=#about">关于</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;heightL1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that we hava set overflow:auto</p>
<p>Some text....</p>
<p>Some text....</p>
<p>Some text....</p>
<p>Some text....</p>
<p>Some text....</p>
<p>Some text....</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta cha
阅读背景：
css 【2018.11.30】
来源：互联网
分享到：
