自己实现顶部导航布局--内容显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        body{

            margin: 0px;

            padding: 0;

        }

        .app{

            height: 400px;

            width: 400px;

            background-color: gray;

            padding-top: 40px;

        }

        .app01{

            width: 400px;

            height: 40px;

            background-color: green;

            position: fixed;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

<div class="app">

    <div class="app01">

        头部导航

    </div>

    <div class="content">

        content

    </div>

</div>

</body>

</html>

app内容区布局思路也一样的

[js]顶部导航和内容区布局的更多相关文章

  1. js 控制导航各个内容区域

    自己导入一个jquery包就可以直接用 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  2. * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）

    前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

  3. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  4. phpcmsv9如何实现添加栏目时不在首页内容区显示只在导航栏显示

    之前王晟璟一直使用PHPCMSV9系统建过自己的个人门户网站,同时也建立了一个其他类型的网站,感觉非常不错,我不得不说PHPCMSV9的功能非常齐全,非常强大. 但有一点时常让王晟璟感到很烦脑,那就是 ...

  5. bootstrap顶部导航遮挡下面内容的解决办法

    使用bootstrap设置顶部导航,并将导航栏固定,代码如下: <nav class="navbar navbar-expand-lg navbar-light bg-light fi ...

  6. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

  7. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  8. TabLayout实现顶部导航(一)

    代码地址如下:http://www.demodashi.com/demo/14552.html 前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 T ...

  9. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

随机推荐

  1. 用CSS里的 viewport-fit 标签应对iPhone X 的刘海

    iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间.然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿.移除这个白条儿也不难, ...

  2. 录制用户的音频，视屏 navigator.mediaDevices.getUserMedia

    google 文档 HACKS 文档 相关代码 获取本地的音频 <input type="file" accept="audio/*" capture=& ...

  3. Spark RDD Transformation 简单用例（一）

    map(func) /** * Return a new RDD by applying a function to all elements of this RDD. */ def map[U: C ...

  4. Code first 数据迁移

    前段时间用到了EF,整理一下 EF ,全称Entity FramWork.就是微软以ADO.NET为基础发展的所谓ORM(对象关系映射框架,或者说是数据持久化框架). 简单说就是根据实体对象操作数据库 ...

  5. Int32 最大的数值是多少？？？（附十进制十六进制相互转换且包含正负数的java代码）

    正数转二进制很简单,转十六进制也很简单. 那么负数的情况下呢?在计算机中无法识别你给的符号“+”,"-",计算机只认识0和1 那么在二进制中如何表示负数. 先简单介绍一下负数如何转 ...

  6. 一个1级分组基础上同时进行2级分组的SQL面试题

    示例1:测试数据: SQL> select * from score; ID CLASS STUDENT COURSE      SCORE ---------- ----- ------- - ...

  7. URL编码问题

    一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号. 比如,世界上有英文字母的网址"http://www.abc.com", 但是没有希腊字母的网址 ...

  8. JsLint 的安装和使用

    JSLint 是一款Javascript验证工具,在定位错误并确保基本指南得以遵循时,非常有用.如果你正在编写专业级的javascript,应该使用 JSLint 或者类似的验证工具(JSHint). ...

  9. [archlinux] 迁移T7从T460s到T470

    这已经不是第一次做OS的迁移了,T7早已经迁移过多台设备了.所以,其实只需要如下三步: 1.  rsync 我一直有全系统备份的习惯,T7一直会不定期的全系统rsync到Tstation上面去.所以我 ...

  10. isprime_判断质数

    判断质数的方法有很多,首先是最简单的试除法,判断n以内的质数的话时间复杂度为n*sqrt(n)当然是很慢的了 下面提供三种判断质数的方法: 首先是跑5051ms的这个是埃拉托斯特尼筛法 且不加优化 核 ...