标准三栏式div+css固定示例
|
以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 6</title>
<style type=”text/css” media=”screen”><!–
/* body und schrift deffinitionen */
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
}
p,pre, h1 {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
pre {
color: #564b47;
font-size: 11px;
background-color:transparent;
font-family: Courier, Monaco, Monospace;
}
/* positioning-layers statisch und absolut */
#box {
width:750px;
margin: 0px auto;
padding:0px;
text-align:left;
}
#left {
width:175px;
padding:0px;
float:left;
background-color:#ff99cc;
}
#content {
width:400px;
padding:0px;
float:left;
background-color:#fff;
overflow: auto;
}
#right {
width:175px;
padding:0px;
float:left;
background-color:#ff99cc;
}
#head {
background-color:transparent;
}
#head h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px
}
#head p {
padding:10px;
margin:0px;
}
–></style>
</head>
<body>
<div id=”box”>
<div id=”head”>
</div>
<div id=”left”>
<h1>MENU left</h1>
<p>Menu with fixed width.</p>
<pre>
#left {
width:175px;
padding:0px;
float:left;
}
</pre>
</div>
<div id=”content”>
<h1>CONTENT</h1>
<p>All templates are XHTML 1.0 and CSS2/ tableless.<br />
3 columns layout grid. All colums are fixed and centered.<br />
<a href=”/”>more nice and free css templates</a>
</p>
<pre>
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
}
#box {
width:750px;
margin: 0px auto;
padding:0px;
text-align:left;
}
#content {
width:400px;
padding:0px;
float:left;
background-color:#fff;
overflow: auto;
}
#head {
background-color:transparent;
}
</pre>
</div>
<div id=”right”>
<h1>MENU right</h1>
<pre>
#right {
width:175px;
padding:0px;
float:left;
}
</pre>
<p>
<img src=”xhtml10.gif” alt=”” width=”80″ height=”15″ border=”0″/><br/>
<img src=”css.gif” alt=”css” width=”80″ height=”15″ border=”0″/><br />
</p>
</div>
<br clear=”all” />
</div>
</body>
</html>
|
以下是HTML网页特效代码，点击运行按钮可查看效果：
![标准三栏式div+css固定示例]( "标准三栏式div+css固定示例")
以下是程序代码
