html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8">5
<title>时代Java与您共同学习(NowJava.com)</title>6
<style>7
body {8
margin: 0;9
}10
11
ul {12
list-style-type: none;13
margin: 0;14
padding: 0;15
width: 25%;16
background-color: #f1f1f1;17
position: fixed;18
height: 100%;19
overflow: auto;20
}21
22
li a {23
display: block;24
color: #000;25
padding: 8px 16px;26
text-decoration: none;27
}28
29
li a.active {30
background-color: #4CAF50;31
color: white;32
}33
34
li a:hover:not(.active) {35
background-color: #555;36
color: white;37
}38
</style>39
</head>40
<body>41
42
<ul>43
<li><a class="active" href="#home">主页</a></li>44
<li><a href="#news">新闻</a></li>45
<li><a href="#contact">联系</a></li>46
<li><a href="#about">关于</a></li>47
</ul>48
49
<div style="margin-left:25%;padding:1px 16px;height:1000px;">50
<h2>Fixed Full-height Side Nav</h2>51
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>52
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>53
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java