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. 神技！微信小程序（应用号）抢先入门体验（附最新案例-豆瓣电影）持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  2. 封装log4cp p

    log4cpp 是参考 log4j 所写的 c++ 版本的写 log 的库.可以在这里下载   http://log4cpp.sourceforge.net/   我的使用方法是: 1,定义了一个 _ ...

  3. \r和\n的区别

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

  4. 万里长征第二步——django个人博客（第二步 ——日志记录器）

    定义日志记录器 可以在setting.py里设置日志记录器 # 自定义日志输出信息 LOGGING = { 'version': 1, 'disable_existing_loggers': True ...

  5. hadoop运行报错Wrong FS: hdfs:/, expected: file:///

    内容源自:https://blog.csdn.net/u014470581/article/details/51480600 报错信息: Exception in thread "main& ...

  6. mac 下 homebrew安装

    打开 brew.sh  网址,然后按照说明操作.

  7. 微博轻量级RPC框架Motan正式开源：支撑千亿调用

    支撑微博千亿调用的轻量级 RPC 框架 Motan 正式开源了,项目地址为https://github.com/weibocom/motan. 微博轻量级RPC框架Motan正式开源 Motan 是微 ...

  8. WebDriver API——第1部分

    The API definitions in this chapter shows the absolute location of classes. However the recommended ...

  9. JavaScript | window浏览器对象模型

    Js Window - 获取浏览器窗口 全局变量是window对象的属性 全局函数是window对象的方法 HTML DOM的document是window对象属性之一 window.document ...

  10. Drupal的错误和异常处理

    Drupal在配置阶段的最开始就设置了自己的错误处理器和异常处理器: function _drupal_bootstrap_configuration() { set_error_handler('_ ...