个人博客，div布局，位置样式（postion、float、clear）

程序员文章站 2024-01-30 21:56:10

...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0 auto;
				padding: 0;
			}
			.main{
				width: 600px;
				height: 800px;
			}
			.head{
				width: 100%;
				height: 120px;
				background-color: #008000;
			}
			h1{
				padding: 20px 0;
				font-weight: bold;
			}
			.title{
				float: right;
			}
			.menu{
				margin: -90px 80px 0 0;
				font-size: 14px;
			}
			.content1,.content2,.content3{
				background-color: #FFFFCC;
				width: 100%;
				height: 160px;
			}
			.left{
				display: inline-block;
				width: 200px;
				height: 160px;
			}
			.right{
				display: inline-block;
				width: 250px;
				height: 160px;
				position: absolute;
				padding-top: 20px;
			}
			.ta{
				list-style-type: circle;
				float: right;
			}
			ol{
				padding-left: 40px;
				padding-top: 5px;
			}
			.footer{
				text-align: center;
				background-color: #999999;
			}
			hr{
				margin: 5px 0;
			}
		</style>
		
		
	</head> 


<body>
	<div class="main">
		<div class="head">
			
			<h1>张三的个人主页</h1>
			<div>我的博客</div>
			<div class="title">
				<ul class="menu">
					<li><a href="#">个人简历</a></li>
					<li><a href="#">学习经历</a></li>
					<li><a href="#">与我联系</a></li>
				</ul>
			</div>
		</div>
		
		
		<div class="content1">
			<div class="left">个人简介<br /><img src="../img/baidu.png"/></div>
			<div class="right">
				<ul class="ta">
					<li>姓名：张三</li>
					<li>性别：不详</li>
					<li>身高：178cm</li>
					<li>体重：130</li>
					
				</ul>
			</div>
		</div>
		
		<hr />
		
		<div class="content2">
			学习经历
			<ol>
				<li>幼儿园</li>
				<li>小学</li>
				<li>初中</li>
				<li>高中</li>
				<li>大学</li>
				<li>讯飞培训班</li>
			</ol>
		</div>
		
		<hr />
		
		<div class="content3">
			与我联系
			<ol>
				<li>电话：222</li>
				<li>email:1231243</li>
				<li>QQ:222222</li>
			</ol>
		</div>
		
		<hr />
		
		<div class="footer">2017 张三</div>
	</div>

</body>
</html>

上一篇：如何制作Windows系统盘

下一篇： Android ADB命令的使用