标准三栏式div+css固定示例

2022-07-15 80酷酷网 80kuku.com

标准三栏式div+css固定示例

以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 6</title>
<style type="text/css" media="screen"></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网页特效代码，点击运行按钮可查看效果：以下是程序代码<font face=Verdana><html><head><title>Nice and Free CSS Template 6</title><style type="text/css" media="screen"></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></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]