实例作品
<html>
<head>
<title>左中右</title>
<style>
<!--
body{
margin:0px; padding:0px;
font-family:arial;
color:#060;
background-color:#DDDDDD;
}
#left{
position:absolute;
top:0px;
left:0px;
margin:0px;
background:#cce9ff;
width:190px; /* 固定宽度 */
}
#middle{
padding:10px;
background:#ffffff;
margin:0px 190px 0px 190px; /* 左右空190px */
margin-top:0px;
}
#right{
position:absolute;
top:0px;
right:0px;
margin:0px;
background:#cce9ff;
width:190px; /* 固定宽度 */
}
p{
font-size:12px;
line-height:22px;
margin:20px 0px 10px 0px;
padding:10px;
}
pre{
font-size:12px;
line-height:20px;
margin:20px 0px 10px 0px;
font-family:arial;
}
-->
</style>
</head>
<body>
<div id="left">
<p>left</p>
</div>
<div id="middle">
<pre>
body{
margin:0px; padding:0px;
font-family:arial;
color:#060;
background-color:#CCC;
}
#left{
position:absolute;
top:0px;
left:0px;
margin:0px;
background:#FFF;
width:190px;/* 固定宽度 */
}
#middle{
padding:10px;
background:#FFF;
margin:0px 190px 0px 190px;/* 左右空190px */
margin-top:0px;
}
#right{
position:absolute;
top:0px;
right:0px;
margin:0px;
background:#FFF;
width:190px;/* 固定宽度 */
}
p{
font-size:12px;
line-height:22px;
margin:20px 0px 10px 0px;
padding:10px;
}
pre{
font-size:12px;
line-height:20px;
margin:20px 0px 10px 0px;
font-family:arial;
}
</pre>
</div>
<div id="right">
<p>right</p>
</div>
</body>
</html>
微信网站
