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

<!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. JMeter命令行执行及问题解决 Error in NonGUIDriver java.lang.RuntimeException: Could not find the TestPlan class!

    下面介绍的是在windows环境下如何运行jmeter linux 命令相同      1.首先要准备好脚本,并且设置好线程属性,假设我们设置一个线程,循环一次.                 2. ...

  2. 一、K3 Wise 实施指导《K3 Wise实施手册》

    1.总账期间启用后无法修改.固定资产期间启用后无法修改 ----修改总账 ' where fcategory='GL' and Fkey='startyear' --修改启用期间 ' where fc ...

  3. MySql 5.7 新特性概览

    安全的提升 1.1 在Mysql 8版本中,caching_sha2_password 是一个缺省的认证插见.5.7 版本的客户端支持 caching_sha2_password 的客户端认证. 1. ...

  4. Bitcoin源代码编译安装详解

    一.安装准备 安装环境:虚拟机Ubuntu 16.04 内存:2G 错误1:如果这里内存分配为1G,则会产生如下错误: g++ : internal compiler error: Killed (p ...

  5. ftp服务器Serv-U 设置允许自动创建不存在的目录

    一.由来 最近改写了项目中ftp上传部分的代码. 用到的组件为: <dependency> <groupId>commons-net</groupId> <a ...

  6. python web自动化测试中失败截图方法汇总

    在使用web自动化测试中,用例失败则自动截图的网上也有,但实际能落地的却没看到,现总结在在实际应用中失败截图的几种方法: 一.使用unittest框架截图方法:   1.在tearDown中写入截图的 ...

  7. 使用jenkins pipeline，并发selenium测试 --- 你值得了解

    一.契机 相信很多使用selenium进行UI测试,再对接jenkins时,都是简单的在jenkins上将命令输入就完事了. 但是,相信你一定会遇到以下问题: 1.你需要同时跑不同文件或不同类的用例, ...

  8. DAX Editor VSIX project

    DAX Editor is a Visual Studio extension that implements a language service for DAX language for SQL ...

  9. js中if语句的几种优化代码写法

    UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法. 一.使用常见的三元操作符 复制代码 代码如下: if (foo) bar(); ...

  10. 大疆OSMO口袋云台相机惊艳上市！友商该如何是好。。。

    2018.11.29 晚上更新: 下午看了大疆新出的口袋云台摄像机,感觉棒极了,于是我立刻去了京东下单预订了.目前是可以免息分期6个月就可以搞定了.‘ 大家敬请期待我的评测视频吧. ======== ...