position:fixed来实现.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>菜单栏固定</title>

    <style>

        body {

            margin: 0;

        }

        .menu {

            height: 48px;

            background-color: black;

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

        }

        .content {

            margin-top: 50px;

            height: 5000px;

            background-color: beige;

        }

    </style>

</head>

<body>

<div class="menu">菜单栏</div>

<div class="content">内容页</div>

</body>

</html>

position固定菜单栏的更多相关文章

  1. VC++单文档程序固定菜单栏和工具栏

    MainFrm.cpp框架类下,找到OnCreate方法 m_wndMenuBar.EnableDocking(CBRS_ALIGN_ANY); m_wndToolBar.EnableDocking( ...

  2. <html> ---- position

    position 固定的属性,是全局的.和DIV层次无关. <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. Python开发【前端】：CSS

    css样式选择器 标签上设置style属性: <body> <div style="background-color: #2459a2;height: 48px;" ...

  4. jQuery.stickUp插件重构

    stickUp插件用于实现固定菜单栏效果,原理很简单,说白了就是监听document的scroll事件,滚动到特定值时,将特定元素的position设置为fixed,核心代码如下:   $(docum ...

  5. DOM+Javascript一些实例

    1.内容+遮罩层+悬浮对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 【前端】:css

    前言: 关于前端的第二篇博客,会写关于css的,内容比较基础.写完这篇博客,会做一个类似美乐乐家具的界面.good luck to me~ 一.css-引用样式 标签上设置style属性: <b ...

  7. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  8. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  9. CSS基础--常用样式

    一.背景相关 背景颜色 background-color :颜色名称/rgb值/十六进制值 背景图片 background-image :url('') 背景图片平铺方式 background-rep ...

随机推荐

  1. 【JSP EL】使用EL表达式比较 动态选中 select中的option

    <option value="${k.key }" ${KPIThis.parent.parent.thisId == k.key ? "selected" ...

  2. \r和\n的区别

    /n  是换行/r   是回车 这是两码事,换行是指移动到下一行,回车是指移动到行首,我们通常所说的“回车”其实是这两个动作的结合.

  3. 什么是webview

    WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页,实现WebView有以下两种不同的方法:第一种方法的步骤:1.在要Activity中实例化W ...

  4. C++中try_catch_throw的做异常处理

    C++中try_catch_throw的做异常处理 选择异常处理的编程方法的具体原因如下: . 把错误处理和真正的工作分开来: . 代码更易组织,更清晰,复杂的工作任务更容易实现: . 毫无疑问,更安 ...

  5. [java] 简单的ConcurrentHashMap

    ConcurrentMap和Guava的LocalCache实现原理相近,底层的存储方式使用的时table方式来存储.这里使用最简单且最暴力的方式,在每次访问的时候均加锁. ConcurrentHas ...

  6. jstl标签不起作用不管用,jstl标签直接输出表达式

    jstl标签不起作用不管用,jstl标签直接输出表达式 解决办法: 在jsp页面头上 引入: <%@ page isELIgnored="false"%> 便能够解决.

  7. RDD原理与详解

    RDD详解 原文连接 http://xiguada.org/spark_rdd/ RDD(Resilient Distributed Datasets弹性分布式数据集),是spark中最重要的概念,可 ...

  8. [转]JQuery - Sizzle选择器引擎原理分析

    原文: https://segmentfault.com/a/1190000003933990 ---------------------------------------------------- ...

  9. electron的安装

    1.安装 node.js https://nodejs.org/en/ 2.安装asar npm install -g asar 3.安装atom https://atom.io/ 4.安装elect ...

  10. java程序main方法的参数String[] args

    public class ArgsTest { public static void main(String[] args) { System.out.println(args.length); fo ...