<html>
<head>
<title>
DIV+CSS网页布局示例
</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
font-size: 12px;
text-align: center;
}
.content{
font-size: 20px;
}
#top{
background-color: #FFC
}
#middle{
background-color: #CFF
}
#bottom{
background-color: #CCC
}
#right{
font-size: 18px;
}
</style>
</head>
<body>
<!--页面所有内容 -->
<div id="all" style="width:auto;overflow: hidden;margin: 0px auto;">
<!--主体内容 -->
<div id=" main" style="height: 574px;">
<!--top -->
<div id="top" style="border: red solid 1px;height: 72px;">
<span class="content"><br>这里是标题栏</span>
</div>
<!--middle -->
<div id="middle" style="height: 500px;overflow: hidden">
<!--left -->
<div id="left" style="border: blue solid 1px;width: 252px;height: 500px;float:left; ">
<span class="content">
<a href="C:\Users\yuanyuan\Desktop\前端基础知识\signA.html">signA</a><br>
<a href="C:\Users\yuanyuan\Desktop\前端基础知识\signB.html">signB、C、D</a>
</span>
</div >
<!--right -->
<div id="right" style="border: green solid 1px;height: 500px;">
<span class="content">
<b>span标签</b><p>用来组合文档中的行内元素，以便通过样式来格式化他们，也可以为它定义全局属性id,class,
以便于对它应用样式</p>
<b>登录表单</b>
<form name="login">
<label>账户</label><input type="text" name="user" size="20"/><br>
<label>密码</label><input type="password" name="password" size="20" /><br>
<input type="submit" value="login"/><br>
</form>
</span>
<b>form标签</b> <p>成对出现，常用属性:name,method,action </p>
<b>input标签</b><p>单标签，常用属性:type(button,checkbox,file,hidden,image,password,rafio,reset,submit,text), name,size,value </p>
</div>
</div>
</div>
<!--版本信息 -->
<div id="bottom" style="border: red solid 1px; height: 50px;">
<span class="content"> 这里是底部，版权所有翻版必究</span>
</div>
</div>
</body>
</html>
