</head>
<!--主体-->
<body>
<!--最外层的id-->
<div id="wrapper">
<!--主体的上边部分-->
<div id="header">
<!--超链接-->
<a title="百度一下你就知道" href="http://www.baidu.com">百度一下你就知道</a>
</div>
<div id="main">
<!--主体的左边部分-->
<div id="sidebar-left">
<!--段落-->
<p>有事找百度</p>
</div>
<!--主体的右边部分-->
<div id="sidebar-right">
<p>百度一下吧</p>
</div>
<!--主体的中间部分-->
<div id="content">
<!--form表单-->
<form action="http://www.sohu.com" method="post">
<!--两个输入框和两个按钮-->
<p>First name: <input type="text" name="fname"/></p>
<p>Password: <input type="password" name="pwd"/></p>
</form>
<form action="http://www.sohu.com" method="get">
<input type="button" value="注册">
<span><input type="button" value="登陆"></span>
</form>
</div>
</div>
<!--底部-->
<div id="footer">
<form>
<!--多行文本输入控件-->
<textarea rows="1" cols="120">The cat was playing in the garden.</textarea>
</form>
</div>
</div>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
}
#wrapper{
padding:0;
margin:0 auto;
height:1000px;
text-align:center;
1000px;
}
#header{
background:red;
100%;
height:15%;
}
#main{
100%;
height:50%px;
}
#sidebar-left{
background:purple;
20%;
height:500px;
float:left;
}
#sidebar-right{
background:pink;
20%;
height:500px;
float:right;
}
#content{
height:500px;
background:grey;
}
#footer{
background:blue;
clear: both;
}
效果图如下: