全屏的三栏div+css布局示例

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

全屏的三栏div+css布局示例

以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 7</title>
<style type="text/css" media="screen"></style></head>
<body>
<div id="left">
<h2>MENU</h2>
<pre>
#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
}
</pre>
<p>
<strong>This column</strong> inherited it’b background color from the body definition.
The padding ist defined through the p element.
</p>
</div>
<div id="right">
<h2>MENU</h2>
<pre>
#right {
position: absolute;
right: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
}
</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>
<div id="content">
<h2>CONTENT</h2>
<p><b>3 columns / menu fixed, content dynamic with head and footer.</b><br />
3 column layout grid. The navigation column are fixed in width, the content column is dynamic and adjusts
itself to the browser window.</p>
<p>This layout also works with an absolute height <a href="temp07_100.html">template 100% height</a><br />
<a href="/">more nice and free css templates</a></p>
<pre>
html {
padding:0px;
margin:0px;
}
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px;
margin:0px;
}
#content {
margin: 0px 190px 0px 190px;
border-left: 2px solid #564b47;
border-right: 2px solid #564b47;
padding: 0px;
background-color: #ffffff;
}
</pre>
</div>
<h1>
in valid  code we trust (*^_^*) miss monorom
</h1>
</body></html>

以下是HTML网页特效代码，点击运行按钮可查看效果：以下是程序代码<font face=Verdana><html><head><title>Nice and Free CSS Template 7</title><style type="text/css" media="screen"></style></head><body><div id="left"><h2>MENU</h2><pre>#left {position: absolute;left: 0px;width: 190px;color: #564b47;margin: 0px;padding: 0px;}</pre><p><strong>This column</strong> inherited it'b background color from the body definition.The padding ist defined through the p element.</p></div><div id="right"><h2>MENU</h2><pre>#right {position: absolute;right: 0px;width: 190px;color: #564b47;margin: 0px;padding: 0px;}</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><div id="content"><h2>CONTENT</h2><p><b>3 columns / menu fixed, content dynamic with head and footer.</b><br />3 column layout grid. The navigation column are fixed in width, the content column is dynamic and adjustsitself to the browser window.</p><p>This layout also works with an absolute height <a href="temp07_100.html">template 100% height</a><br /><a href="/">more nice and free css templates</a></p><pre>html {padding:0px;margin:0px;}body {background-color: #e1ddd9;font-size: 12px;font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;color:#564b47;padding:0px;margin:0px;}#content {margin: 0px 190px 0px 190px;border-left: 2px solid #564b47;border-right: 2px solid #564b47;padding: 0px;background-color: #ffffff;}</pre></div><h1>in valid code we trust (*^_^*) miss monorom</h1></body></html></font><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

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