左右两栏式WEB标准(DIV+CSS)布局代码

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

　　菜单层固定宽度，内容层自适应..

以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 2</title>
<style type="text/css" media="screen"></style>
</head>
<body>
<div id="menu">
<h2>right column</h2>
<pre>
#menu {
position: absolute;
width: 200px;
left: 20px;
padding:0px;
margin: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 column</h2>
<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
<p><b>2 columns / menu fixed, content dynamic.</b><br />
2 columns layout grid. The navigation column is fixed, the content column is dynamic and adjusts itself to the browser
window.<br />
The layout also works with an absolute height <a href="temp02_100height.html">template 100% height</a><br />
<a href="/">more nice and free css templates</a><br />
</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 20px;
margin:0px;
}
#content {
margin-left: 200px;
background-color:#fff;
overflow: auto;
}
</pre>
</div>
</body>
</html>

以下是HTML脚本特效代码，点击运行按钮可查看效果：以下是程序代码<html> <head> <title>Nice and Free CSS Template 2</title> <style type="text/css" media="screen"></style> </head> <body> <div id="menu"> <h2>right column</h2> <pre> #menu { position: absolute; width: 200px; left: 20px; padding:0px; margin: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 column</h2> <p>All templates are XHTML 1.0 and CSS2/ tableless.</p> <p><b>2 columns / menu fixed, content dynamic.</b><br /> 2 columns layout grid. The navigation column is fixed, the content column is dynamic and adjusts itself to the browser window.<br /> The layout also works with an absolute height <a href="temp02_100height.html">template 100% height</a><br /> <a href="/">more nice and free css templates</a><br /> </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 20px; margin:0px; } #content { margin-left: 200px; background-color:#fff; overflow: auto; } </pre> </div> </body> </html><a href="http://www.alixixi.com/web/HTML/jsrun/">欢迎访问阿里西西网页脚本特效集</a>

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