标签：display idt userinfo head aic one font gis doc
<!DOCTYPE html>
<html>
<head>
<title>页面布局</title>
<meta charset=‘utf-8‘/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<style>
body{
margin:0 auto;
}
.header{
width:100%;
height:60px;
background-color:#fff;
}
.header .user{
position:relative;
float:right;
width:200px;
}
.header .user .a{
position:absolute;
right:20px;
width:150px;
text-align:center;
line-height:60px;
text-decoration:none;
}
.header .user:hover{
background-color:#e9e9e9;
}
.header .user .userinfo{
position:absolute;
top:60px;
right:20px;
width:150px;
text-decoration:none;
z-index:11;
margin-top:0;
display:none;
}
.header .user:hover .userinfo{
display:inline;
}
.userinfo li{
height:30px;
line-height:30px;
text-align:center;
list-style:none;
}
.lis{
width:10%;
min-width:100px;
background-color:#e9e9e9;
overflow:auto;
position:absolute;
top:60px;
bottom:0;
left:0;
}
.body{
width:90%;
background-color:#BD2C1D;
overflow:auto;
position:absolute;
top:60px;
bottom:0;
left:10%;
z-index:10;
}
.lis ul li{
height:60px;
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
line-height:60px;
text-align:center;
list-style:none;
}
</style>
</head>
<body>
<div class=‘header‘>
<div class=‘user‘>
<a class=‘a‘ href="http://egis-ivas-stg3.paic.com.cn/system/login">欢迎您:LIJM</a>
<ul class=‘userinfo‘>
<li>
<a>我的资料</a>
</li>
<li>
<a>注销</a>
</li>
</ul>
</div>
</div>
<div class="lis">
<ul style="margin-top:0;width:100%;float:right">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
<li>第六行</li>
<li style="border-bottom:1px solid white;">第七行</li>
</ul>
</div>
<div class="body">
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
<p>10</p>
</div>
</body>
</html>
标签：display idt userinfo head aic one font gis doc
原文地址：http://www.cnblogs.com/testpy1003/p/7857546.html
