Css:
ul { ???list-style-type:none; ???margin:0; ???padding:0; ???overflow:hidden; ???background-color:blue; ???/*固定在顶部*/ ???position:fixed; ???top:0; ???width:100%;}li {float:left;}/* 出来最后一个选项(last-child) 其他的都添加分割线 */li { ???border-right: 1px solid #bbb;}li:last-child {border-right:none;}li a { ???display:block; ???color:white; ???text-align:center; ???padding:14px 16px; ???text-decoration:none;}li a:hover {background-color:darkgreen;}Html:
@{ ???Layout = null;}<!DOCTYPE html><html><head> ???<meta name="viewport" content="width=device-width" /> ???<script src="../Scripts/jquery-1.9.1.min.js"></script>@*应用自己下好的jQuery,也可以引用百度(src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js)或者微软CDN*@ ???<link href="../Content/ldbCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@ ???<link href="../Content/ButtonCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@ ???<title>Index</title></head><body> ???<div> ????????<ul> ???????????<li><a class="active" href="~/Views/Home/myHtmlCss.cshtml">进销存</a></li> ???????????<li><a href="#product">生产管理</a></li> ???????????<li><a href="#javascript()">工艺管理</a></li> ???????????<li><a href="#javascritp()">成品管理</a></li> ???????????<li><a href="#">设置</a></li> ???????????<li><a href="#">联系</a></li> ???????????<li><a href="#">关于</a></li> ???????</ul> ???</div> ???<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;"> ???????<h1>Fixed Top Navigation Bar(固定导航栏在顶部)</h1> ???????<h2>Scroll this page to see the effect</h2> ???????<h2>固定导航栏在顶部</h2> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???????<p>固定导航栏在顶部..</p> ???</div></body></html>效果：
Css之导航栏学习
原文地址：http://www.cnblogs.com/longdb/p/8044655.html