学习笔记2__布局:固定顶栏布局
来源:互联网 发布:编程常用语言有哪些 编辑:程序博客网 时间:2024/06/09 19:32
代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>固定顶栏</title> <style> body{margin: 0;line-height: 1.8;} .top{background-color: pink;color: #fff;} .main{height: 3000px;background-color: #eee;} body{padding-top: 50px;} .top{position: fixed;top: 0;width: 100%;height: 50px;} </style></head><body> <div class="top">top bar</div> <div class="main">main content area</div></body></html>
分解
HTML部分:
<body> <div class="top">top bar</div> <div class="main">main cotent area</div></body>
CSS部分:
<style> body{padding-top: 50px;} .top{position: fixed;top: 0;width: 100%;height: 50px;}</style>
0 0
- 学习笔记2__布局:固定顶栏布局
- CSS学习笔记---固定宽度布局
- CSS学习笔记(八) 页面布局之三栏-固定宽度布局
- Android学习笔记__实现布局自动滚动
- web前端学习笔记(CSS固定宽度布局)
- GTK学习笔记之固定布局GtkFixed(4)
- css布局__慕课笔记
- 两栏布局学习笔记
- 三栏布局学习笔记
- Android 学习笔记-布局2
- 软键盘顶布局
- css 布局__收藏
- GTK入门学习:布局容器之固定布局
- GTK入门学习:布局容器之固定布局
- CSS2.0下1行2列,左侧固定右侧自适应布局,兼容所有浏览器。[学习笔记]
- CSS2.0下1行2列,左侧固定右侧自适应布局,兼容所有浏览器。[学习笔记]
- 布局 固定大小的布局
- Android布局学习笔记
- matlab对excel数据进行排序求和
- 关于自定义对话框(二)
- C语言基础 编译成功的exe运行时闪退
- hdu 2136 素数打表
- 第十五周(3)-阅读程序
- 学习笔记2__布局:固定顶栏布局
- 2021 贪心算法 (最优转载问题)水题
- 01背包
- 1062 字符串处理 水题
- C语言使用非递归和递归函数分别实现阶乘,斐波那契,最大公约数
- Thymeleaf基础知识
- InputStreamReader
- 2055 签到题
- ParNew 和 Parallel Old