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. nodesj中 中间件express-session的理解

    1.为什么使用session? session运行在服务器端,当客户端第一次访问服务器时,可以将客户的登录信息保存. 当客户访问其他页面时,可以判断客户的登录状态,做出提示,相当于登录拦截. sess ...

  2. OM-销售订单行【订购项目】配置参数文件控制

    ONT_RESTRICT_CUST_ITEMS OM:限制行层收货地址的客户项目 ONT_USE_MVIEW_FOR_ITEMS_LOV OM:为项目值列表使用物化视图(遵守项目可订购性规则)

  3. iOS:进度条控件的详细使用

    进度条控件:UIProcessView:UIView   功能:顾名思义,用来显示下载进度或者传输数据进度.   属性: @property(nonatomic) UIProgressViewStyl ...

  4. python学习:常见问题

    问题1:SyntaxError: Non-ASCII character '\xe5' in file E:\PythonDev\testmodule.py on line 21, but no en ...

  5. 流畅的python第七章函数装饰器和闭包学习记录

    本章讨论的话题 python如何计算装饰器句法 python如何判断变量是不是局部的(通过函数内部是否给变量赋值过来判断是否是局部变量) 闭包存在的原因和工作原理(闭包是一种函数,它会保留定义函数时存 ...

  6. Axure 简单原型设计

    简介 Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure RP是美国 ...

  7. 云计算之路-阿里云上：踩着RDS的2个坑

    最近发现阿里云RDS管理控制台升级了,界面更好看了,操作也更方便了,但在美丽的外表下却藏着坑,不小心被我们睬着了. 8月31日下午,我们在RDS管理控制台中创建了一个新的数据库帐号,创建时选择了绑定多 ...

  8. 解复用-mpeg2

    http://blog.csdn.net/yipie/article/details/7612226 数字高清晰度电视(High Definition Television)简称HDTV,是继黑白电视 ...

  9. jquery操作select2控件

    (一)select2常用的操作:添加.移除.获取选中的value()与text() (1)移除事件:$("#select_id").unbind("change" ...

  10. highcharts 坐标轴 数值 格式化

    以Y轴为示例: yAxis: { min: 0, gridLineColor: '#ececee', gridLineWidth: 1, lineColor: '#ececee', lineWidth ...