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. 内向者沟通圣经：4P法（Preparation，Presence，Push，Practice）

    一.对于内向者的态度 坦白,坦白也许是个不错的方法,内向不是缺点,只是性格: 拥抱和全面衡量你自己,无论内向还是外向:(我觉得无论是内向还是外向,都应该这么做) 当你无法与自身的思想和平共处,你们开始 ...

  2. java 实现poi方式读取word文件内容

    1.下载poi的jar包 下载地址:https://www.apache.org/dyn/closer.lua/poi/release/bin/poi-bin-3.17-20170915.tar.gz ...

  3. automake连载--Linux下使用autoconfig automake进阶

    http://blog.csdn.net/shanzhizi/article/details/30247325 前言:       这次task,我大概用了4天的时间去完成.四天的时间内,我不停地去查 ...

  4. Java命令学习系列（2）：Jstack

    转载:http://www.importnew.com/18176.html 原文出处: Hollis(@Hollis_Chuang) jstack是java虚拟机自带的一种堆栈跟踪工具. 功能 js ...

  5. JMS与Spring之一（用JmsTemplate同步收发消息） --转

    转自:http://blog.csdn.net/moonsheep_liu/article/details/6683190

  6. 请远离include_once和require_once[转]

    来自:http://www.poluoluo.com/jzxy/201306/216921.html 尽量使用include, 而不是include_once, 理由是 include_once需要查 ...

  7. Android秒级编译工具Freeline

    Freeline 是 Android 平台上的秒级编译方案,Instant Run 的替代品,由蚂蚁聚宝Android 团队开发,它可以充分利用缓存文件,在几秒钟内迅速地对代码的改动进行编译并部署到设 ...

  8. HKC显示器开机亮一下就不显示了

    一台HKC显示器开机显一下就黑了 最近加了一个显示器做扩展屏幕,可以不亮有问题啊     芯片坏了引起的~ 不是自己的,不能拆机啊啊   文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论 ...

  9. java写的小脚本，用来受mDNS消息

    太ugly了,但是可以工作,抓了包下来,用前面DNS message structure做了下比较. 代码如下: import java.net.DatagramPacket; import java ...

  10. Ubuntu编码问题

    Ubuntu编码问题 root@magus-18:/srv/rorapps/fgcc# rails -v Sorry, command-not-found has crashed! Please fi ...