DIV+CSS布局一
一列布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.header{background-color: #000;
color: #FFF;
text-align: center;}
.main{
background-color: #666;
color: #fff;
margin: 0 auto;
width:80%;
height: 700px;
text-align: center;
}
.foot{
background-color: #000;
color: #fff;
margin: 0 auto;
width:80%;
height: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="header"><h1>页面头部信息</h1></div>
<div class="main"><h1>页面主要内容</h1></div>
<div class="foot"><h1>版权信息</h1></div>
</body>
</html>
运行结果如下：
两列布局
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.left{
float: left;
width: 30%;
background-color: black;
color: green;
height: 300px;
}
.right{
float: right;
width: 70%;
background-color: white;
height: 300px;
color: red;
}
.main{width: 90%;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="left">LOGO</div>
<div class="right">用户信息</div>
</div>
</body>
</html>
运行效果：
三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
body,h1{margin: 0;padding: 0;}
.left{
float: left;
width: 20%;
background-color: black;
color: green;
height: 300px;
}
.right{
float: right;
width: 30%;
background-color: green;
height: 300px;
color: red;
}
.middle{
float: left;
width: 50%;
background-color: yellow;
height: 300px;
color: gray;
}
.main{width: 90%;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="left">左边</div>
<div class="middle">中间信息</div>
<div class="right">右边</div>
</div>
</body>
</html>
运行结果如下：
综合布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,h1{margin: 0; padding: 0;color: gray;text-align: center;}
.top{
background: yellowgreen;
width: 100%;
height: 100px;
}
.top_main{
margin: 0 auto;
background: #000;
width: 900px;
height: 100px;
}
.top_left{
float: left;
background:gold;
width: 200px;
height: 100px;
}
.top_right{
float: right;
background: #00C;
width: 700px;
height: 100px;
}
.nav{
margin: 0 auto;
background: #999;
width: 900px;
height: 50px;
}
.left{
float: left;
width: 300PX;
background-color: black;
color: green;
height: 300px;
}
.right{
float: right;
width: 300PX;
background-color: green;
height: 300px;
color: red;
}
.middle{
float: left;
width: 300PX;
background-color: yellow;
height: 300px;
color: gray;
}
.main{width: 900PX;
margin: 0 auto;
height: 500px;
background-color: peachpuff;
}
.footer{
margin: 0 auto;
background-color: #000;
width: 900px;
height: 200px;
color: #FFF;
}
</style>
</head>
<body>
<div class="top">
<div class=top-main>
<div class="top_left"><h1>logo</h1></div>
<div class="top_right"><h1>头部信息</h1></div>
</div>
</div>
<div class="nav"><h1>页面导航</h1></div>
<!--主要内容-->
<div class="main">
<div class="left">左边</div>
<div class="middle">中间信息</div>
<div class="right">右边</div>
</div>
<!--版权信息-->
<div class="footer"><h1>版权信息</h1></div>
</body>
</html>
运行结果如下：
