HTML布局
1、用div元素的HTML布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="layout/html; charset=utf-8" />
<style>
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px
}
#setion{
width:350px;
float=left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>陈静的个人资料</h1>
</div>
<div id="nav">
年龄<br/>
性别<br/>
身高<br/>
体重<br/>
学历<br/>
爱好<br/>
</div>
<div id="section">
<h2>年龄</h2>
<p>陈静的年龄需要保密，但是你想知道的话我也可以告诉你，
我会秘密的写自己的日记。用我自己写的网站来写自己的日记，
这是一个不错的学习方法</p>
</div>
<div id="footer">
chenjing.com
</div>
</body>
</html>
2、使用HTML5布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="layout/html; charset=utf-8" />
<style>
header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px
}
setion{
width:350px;
float=left;
padding:10px;
}
footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
<h1>陈静的个人资料</h1>
</header>
<nav>
年龄<br/>
性别<br/>
身高<br/>
体重<br/>
学历<br/>
爱好<br/>
</nav>
<section>
<h2>年龄</h2>
<p>陈静的年龄需要保密，但是你想知道的话我也可以告诉你，
我会秘密的写自己的日记。用我自己写的网站来写自己的日记，
这是一个不错的学习方法</p>
</section>
<footer>
chenjing.com
</footer>
</body>
</html>
结果同上
3、用<table>标签
不想用这个