信手拈来 妙手偶得 » 日志 » 【整理】三列自适应CSS布局
【整理】三列自适应CSS布局
Junglesong 发表于 2007-03-18 12:59:19
body {
text-align: center;
font-size:62.5%;
}
#indexPageLayout {
background-color: #cccccc;
border: 1px solid #333333;
width: 300px;
height: 300px;
margin: 0 auto;
}
#wrapper{
background-color: #ffffff;
width:72em;
max-width:100%;
margin:0 auto;
height:100%;
text-align:left;
}
#mainNav{
background-color: #efefef;
width:18em;
max-width:23%;
float:left;
}
#content{
background-color: #dee3e7;
width:52em;
max-width:75%;
float:right;
}
#mainContent{
background-color: #d1d7dc;
width:32em;
max-width:66%;
float:left;
}
#secondaryContent{
background-color: #001166;
width:18em;
max-width:31%;
float:right;
}
页面文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Admin Seeting Page</title>
<link rel="stylesheet" rev="stylesheet" href="page/css/style.css"
type="text/css" />
<script src="page/js/ajax.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="branding">branding</div>
<div id="content">
<div id="mainContent">mainContent</div>
<div id="secondaryContent">secondaryContent</div>
</div>
<div id="mainNav">mainNav</div>
</div>
</body>
</html>
- » 2006年: 【原创】关于个人软件的制作感悟