html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8">5
<title>时代Java与您共同学习(NowJava.com)</title>6
<style>7
body {margin:0;}8
9
ul {10
list-style-type: none;11
margin: 0;12
padding: 0;13
overflow: hidden;14
background-color: #333;15
position: fixed;16
top: 0;17
width: 100%;18
}19
20
li {21
float: left;22
}23
24
li a {25
display: block;26
color: white;27
text-align: center;28
padding: 14px 16px;29
text-decoration: none;30
}31
32
li a:hover:not(.active) {33
background-color: #111;34
}35
36
.active {37
background-color: #4CAF50;38
}39
</style>40
</head>41
<body>42
43
<ul>44
<li><a class="active" href="#home">主页</a></li>45
<li><a href="#news">新闻</a></li>46
<li><a href="#contact">联系</a></li>47
<li><a href="#about">关于</a></li>48
</ul>49
50
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">51
<h1>Fixed Top Navigation Bar</h1>52
<h2>Scroll this page to see the effect</h2>53
<h2>The navigation bar will stay at the top of the page while scrolling</h2>54
55
<p>Some text some text some text some text..</p>56
<p>Some text some text some text some text..</p>57
<p>Some text some text some text some text..</p>58
<p>Some text some text some text some text..</p>59
<p>Some text some text some text some text..</p>60
<p>Some text some text some text some text..</p>61
<p>Some text some text some text some text..</p>62
<p>Some text some text some text some text..</p>63
<p>Some text some text some text some text..</p>64
<p>Some text some text some text some text..</p>65
<p>Some text some text some text some text..</p>66
<p>Some text some text some text some text..</p>67
<p>Some text some text some text some text..</p>68
<p>Some text some text some text some text..</p>69
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java