学习笔记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
原创粉丝点击