黑马程序员技术交流社区

标题: 页面布局模板 [打印本页]

作者: ，喵了个咪 时间: 2019-6-1 14:54
标题: 页面布局模板
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>注册页面</title>
<style>

body{
margin:0px;
}
#box{
width:750px;
height:1000px;
margin:auto;

}
#head{
width:750px;
height:150px;
background:#00FFCC;
}
#mid{
width:750px;
height:700px;
background:#33CCFF;
}
#mid_left{
width:350px;
height:700px;
float:left;
}
#mid_right{
width:400px;
height:700px;
float:left;
}
#foot
{
width:750px;
height:150px;
background:#00FFCC;
}
</style>
</head>

<body>
<div id="box">
  <div id="head">此处显示  id "head" 的内容</div>
  <div id="mid">
<div id="mid_left">此处显示  id "mid_left" 的内容</div>
<div id="mid_right">此处显示  id "mid_right" 的内容</div>
  </div>
  <div id="foot">此处显示  id "foot" 的内容</div>
</div>
</body>
</html

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2