标签: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