DIV+CSS练习1

来源：互联网发布：双色球系统分析软件编辑：程序博客网时间：2024/05/21 21:38

左中右三列排版，左150px。右200px，中间自适应。

1.margin负值法，也说是现在最常用的一种

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
<!--
*{padding:0;margin:0;}
#center,#left,#right{
float:left;
width:100%;
height: 500px;
background-color:#71c9b0;
}
#body{
margin: 0 200px 0 500px;
}
#left{
margin-left: -100%;
width:500px;
background-color:#f7ca8a;
}
#right{
margin-left: -200px;
width:200px;
background-color:#f5917a;
}
-->
</style>
</head>
<body>
<div id="center">
<div id="body">
自适
</div>
</div>
<div id="left">
500px
</div>
<div id="right">
200px
</div>
</body>
</html>

2.表格

<!doctype html>
<html>
<head>
<meta charset="utf-8"3>
<title>table</title>
<style type="text/css">
<!--
table{
border-collapse: collapse;
}
body{
margin: 0px;
}
.left{
width:150px;
height: 500px;
float:left;
background-color:#f7ca8a;
margin: 0px;
}
.center {
height: 500px;
width: 100%;
background-color:#71c9b0;
margin: 0px;
}
.right {
float: right;
width: 200px;
height: 500px;
background-color:#f5917a;
margin: 0px;
}
-->
</style>
</head>
<body>
<table border="1">
<tr>
<td class="left">150px</td>
<td class="center">自适</td>
<td class="right">200px</td>
</tr>
</table>
</body>
</html>

3.浮动

<!doctype html>
<html>
<head>
<meta charset="utf-8"3>
<title>浮动</title>
<style type="text/css">

#left{
width:150px;
height: 500px;
float:left;
background-color:#f7ca8a;
margin: 0px;
}
#center {
height: 500px;
background-color:#71c9b0;
margin: 0px 200px 0px 150px;
}
#right {
float: right;
width: 200px;
height: 500px;
background-color:#f5917a;
margin: 0px;
}
body{
margin: 0px;
}
</style>
</head>

<body>
<div id="left">150px</div>
<div id="right">200px</div>
<div id="center">自适</div>
</div>
</body>
</html>

4.绝对定位

<!doctype html>
<html>
<head>
<meta charset="utf-8"3>
<title>绝对定位</title>
<style type="text/css">
body{
margin: 0;
}
#left,#right{
position: absolute;
height: 500px;
top:0px;
}
#left{
left: 0px;
width:150px;
background-color:#f7ca8a;
}
#center {
height: 500px;
background-color:#71c9b0;
margin: 0px 200px 0px 150px;
}
#right {
right: 0px;
width: 200px;
background-color:#f5917a;
}

</style>
</head>
<body>
<div id="left">150px</div>
<div id="center">自适</div>
<div id="right">200px</div>
</body>
</html>

0 0