[js]顶部导航和内容区布局
自己实现顶部导航布局--内容显示
<!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]顶部导航和内容区布局的更多相关文章
- js 控制导航各个内容区域
自己导入一个jquery包就可以直接用 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- * CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- phpcmsv9如何实现添加栏目时不在首页内容区显示只在导航栏显示
之前王晟璟一直使用PHPCMSV9系统建过自己的个人门户网站,同时也建立了一个其他类型的网站,感觉非常不错,我不得不说PHPCMSV9的功能非常齐全,非常强大. 但有一点时常让王晟璟感到很烦脑,那就是 ...
- bootstrap顶部导航遮挡下面内容的解决办法
使用bootstrap设置顶部导航,并将导航栏固定,代码如下: <nav class="navbar navbar-expand-lg navbar-light bg-light fi ...
- jQuery 顶部导航尾随滚动，固定浮动在顶部
jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...
- [置顶]
xamarin Tablayout+Viewpager+Fragment顶部导航栏
最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...
- TabLayout实现顶部导航(一)
代码地址如下:http://www.demodashi.com/demo/14552.html 前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 T ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
随机推荐
- 数据库高分笔记01：事务ACID
作者:arccosxy 转载请注明出处:http://www.cnblogs.com/arccosxy/ 事务就是一组原子性的SQL查询,或者说一个独立的工作单元.如果数据库引擎能够成功地对数据库应 ...
- win怎么设置最快捷的下滑关机
win怎么设置最快捷的下滑关机 1.在C:\Windows\System32下找到SlideToShutDown.exe文件发送一份到桌面快捷方式 2.右键此快捷方式--属性--更换图表--更换一个自 ...
- PHP数组（数组正则表达式、数组、预定义数组）
正则表达式 1.替换 $s = "hello5world"; $s = preg_replace("/\d/","#",$s); echo ...
- Docker容器集群管理之Swarm
Docker容器集群管理主流方案 Swarm Docker公司自研发的集群管理系统. Kubernetes Google开源的一个容器集群管理系统,用于自动化部署.扩展和管理容器应用.也称为K8S ...
- hdu4847 Wow！Such Doge！【字符串】【暴力】
Wow! Such Doge! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 分布式文件系统HDFS，大数据存储实战（一）
本文进行了以下工作: OS中建立了两个文件,文件中保存了几组单词. 把这两个文件导入了hadoop自己的文件系统. 介绍删除已导入hadoop的文件和目录的方法,以便万一发生错误时使用. 使用列表命令 ...
- [No000012F]WPF(7/7) - 样式，触发器和动画
WPF Tutorial : Beginning [^] WPF Tutorial : Layout-Panels-Containers & Layout Transformation [^] ...
- day3:数据类型 str
1,int 一个数字占用的bit数目 i = 2 print(i.bit_length()) i = 3 print(i.bit_length()) i = 5 print(i.bit_length( ...
- 【基本功】Java动态追踪技术探究 不重启JVM，替换掉已经加载的类？不重启JVM，获知运行时对象的属性
https://mp.weixin.qq.com/s/_hSaI5yMvPTWxvFgl-UItA 小结: 1.根据Java的类加载机制,在同一个ClassLoader中,类是不允许重复的: 2.单例 ...
- 拳打Adam，脚踢SGD：北大提出全新优化算法AdaBound
https://mp.weixin.qq.com/s/el1E-61YjLkhFd6AgFUc7w