html页面分上中下三层,上中下页面布局.html

body,

ul,

li {

/* position: relative; */

margin: 0;

padding: 0;

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

list-style: none;

}

header,

footer {

position: fixed;

z-index: 9;

width: 100%;

height: 60px;

font-size: 24px;

color: #333;

font-weight: bold;

text-align: center;

line-height: 60px;

background: #77d677;

}

footer {

bottom: 0;

}

section {

padding: 60px 0;

}

nav {

background: #93f393;

color: #333;

}

nav li {

padding: 10px 20px;

}

nav li.active {

background: #77d677;

}

article {

padding: 20px;

font-size: 24px;

/* text-align: center; */

background: #d9ffd9;

height: 2500px;

}

/* default */

section.default nav {

position: absolute;

top: 60px;

bottom: 60px;

/* float: left;

height: 100%; */

width: 200px;

}

section.default nav li {

padding: 10px 20px;

}

section.default nav li.active {

background: #77d677;

}

section.default article {

padding-left: 220px;

}

/* flexModal */

section.flexModal {

display: flex;

}

section.flexModal nav {

width: 200px;

}

section.flexModal article {

flex: 1;

}

/* fixedLeft */

section.fixedLeft nav {

position: fixed;

top: 60px;

bottom: 60px;

}

section.fixedLeft article {

margin-left: 200px;

}

.right {

position: fixed;

top: 60px;

bottom: 60px;

background: red;

right: 0px;

height: 100%;

width: 200px;

}

我是头部position: fixed;z-index: 9;

• section.flexModal nav ul>li*5
• 栏目一
• 栏目二
• 栏目三
• 栏目四
• 栏目五

内容区域 section.flexModal articel

宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试宽度测试

section{

padding: 60px 0;

}

section.flexModal{

display: flex;

}

section.flexModal nav{

width: 200px;

}

section.flexModal article{

flex: 1;

}

底部版权同头部 position: fixed;z-index: 9;

一键复制

编辑

Web IDE

原始数据

按行查看

历史