码迷,mamicode.com
首页 > 其他好文 > 详细

888

时间:2017-11-18 20:07:52      阅读:153      评论:0      收藏:0      [点我收藏+]

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

  

888

标签:display   idt   userinfo   head   aic   one   font   gis   doc   

原文地址:http://www.cnblogs.com/testpy1003/p/7857546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!