您的位置：首页 > 其它

基本布局（固定布局）

2016-06-02 16:41 274 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

.menu {
height: 5%;
width: 100%;
background-color: #0d77b6;
position: absolute;
}

.nav {
height: 90%;
width: 15%;
top: 5%;
left: 0;
bottom: 5%;
background-color: #859AF2;
position: fixed;
}

.content {
width: 85%;
height: 90%;
top: 5%;
left: 15%;
bottom: 5%;
background-color: white;
position: absolute;
overflow: auto;
z-index: 2;
}

.bottom {
position: fixed;
bottom: 0;
left: 0;
}

.top {
position: fixed;
top: 0;
left: 0;
}

.menu ul li {
height: 50px;
width: 200px;
}

.main {
margin-top: 2.5%;

}

.micro-menu{
background-color: maroon;
height: 100%;
width: 10%;
float: right;
margin-right:20px;
background-color: red;
cursor: pointer;
}
.micro-menu:HOVER{
background-color: #3385FF;

}

.micro-menu-item{
position: relative;
left: 230px;
bottom: 321px;
background-color: red;
z-index: 101;
}

</style>
</head>
<body>
<div class="menu top">top</div>
<div class="menu bottom">
<div class="micro-menu">
</div>
<div class="micro-menu-item">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
</div>
<div class="main">
<div class="nav">nav</div>
<div class="content">
<p>11111111112</p>
<p>11111111111</p>
<p>11111111111</p>

</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航