Css:

ul {

    list-style-type:none;

    margin:;

    padding:;

    overflow:hidden;

    background-color:blue;

    /*固定在顶部*/

    position:fixed;

    top:;

    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之导航栏学习的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  3. day13—CSS之导航栏

    转行学开发,代码100天——2018-03-29 见过这么多网页,没有导航栏的几乎没见过.因此,对导航栏的练习非常之必要. 导航栏的实现,基本上都是通过链接列表实现,即ul->li->a标 ...

  4. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  5. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. HTML/CSS：导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

  7. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  9. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

随机推荐

  1. Bzoj4237：稻草人

    题面 传送门 Sol \(CDQ\)分治 先对\(x\)排序,对\(y\)在\(CDQ\)分治是从大到小排序 从大到小加入,右边用单调栈维护\(x\)递增,\(y\)递减的序列 左边就是找到\(x\) ...

  2. jQuery中的自定义插件之----工厂方法(Factory Widget)

    jQuery赋予了我们很强大的插件自定义的功能,可以作为我们的武器库,应用到所有的网页中,使用的语法比较有意思,下面是对它的一些探讨. 遵循以下的原则: 1 IIFE 创建一个jQuery的scope ...

  3. js复制内容到剪贴板

    我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...

  4. npm打包前端项目太慢问题分析以及暂时解决方案

    npm build 打包前端项目实际上是执行 node build/build.js,但是随着项目的依赖包越来越多,项目打包时间不断延长,为了改善这个问题,需要从node入手 暂时解决方案:扩大nod ...

  5. Python3基础教程2——Python的标准数据类型

    2018年3月12日 这次介绍一些python里面的标准数据类型 当然还是推荐一个比较系统的教程 http://www.runoob.com/python3/python3-tutorial.html ...

  6. Python3 多线程编程（thread、threading模块)

    threading是对thread的封装. 1.开启线程: t=threading.Thread(target=sayhi,args=('hh',)) t.start() 或者先建一个Thread的继 ...

  7. 需求分析---NABCD

    N(Need,需求) 我们的产品未来天气,是为了解决不爱看天气预报的群众开发一款类似备忘录式的天气预报软件.很多人认为今天天气很好,明天肯定不会差,但是风云忽变,可能明天就降大雨,所以就忽略了带伞, ...

  8. 剑指Offer-链表中环的入口结点

    package LinkedList; import java.util.HashSet; /** * 链表中环的入口结点 * 一个链表中包含环,请找出该链表的环的入口结点. */ public cl ...

  9. TypeScript入门（二）函数新特性

    一.TypeScript-Rest and Spread操作符 用来声明任意数量的方法参数  ...args中的...就是Rest and Spread操作符. 例1: 声明一个可以传任意数量的参数进 ...

  10. JQ 判断 浏览器打开的设备类型

    <script> $(document).ready(function(){ var ua = navigator.userAgent; var ipad = ua.match(/(iPa ...