試試看 :
border.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="border.css" rel="stylesheet" type="text/css" />
<title>測試邊框</title>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top"><p>This is left top.</p>
</div>
<div id="middle"><p>This is left middle.</p>
</div>
<div id="below"><p>This is left footer.</p>
</div>
</div>
<div id="right">
<div id="r_top"><p>This is right top.</p>
</div>
<div id="r_middle"><p>This is right footer.</p>
</div>
</div>
</div>
</body>
</html>
border.css :
@charset "utf-8";
/* CSS Document */
body
{
font-family: Arial, sans-serif;
font-size: 18pt;
color: #666;
margin-left:15%;
margin-right:15%;
}
p
{
float:left;
margin-top:20px;
margin-left:10px;
font-size:24px;
}
/* 大框 */
#outer
{
padding: 0em;
margin: 0em;
width: 100%;
}
/* Left */
#left
{
position: relative;
float:left;
width:48%;
margin-right:15px;
}
#top
{
float:left;
width:100%;
height:600px;
margin-bottom:10px;
background-color:#3F0;
}
#middle
{
float:left;
width:100%;
height:400px;
margin-bottom:10px;
background-color:#3F0;
}
#below
{
float:left;
width:100%;
height:176px;
background-color:#3F0;
}
/* Right */
#right
{
position: relative;
float:left;
width:48%;
}
#r_top
{
height:800px;
margin-bottom:10px;
background-color:#900;
}
#r_middle
{
background-color:#900;
height:300px;
}
我也在學習中 , 一起來加油吧 ~
