带滚动条的两栏标准DIV+CSS布局示例

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

　　css|标准|示例|滚动条

当窗口收缩时超出层的宽度时会自动出现滚动条...

以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 2a</title>
<style type="text/css" media="screen"></style>
</head>
<body>
<div id="menu"><h2>right column</h2>
<pre>
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
</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 and content dynamic</b><br />
2 column layout grid. The navigation column and content column are dynamic and adjust themselves to the browser window.<br />
This layout also works with an absolute height <a href="temp02a_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 {
float: left;
width: 75%;
background-color: #fff;
margin:0px 0px 50px 0px;
overflow: auto;
}
</pre>
</div>
</body>
</html>

以下是HTML脚本特效代码，点击运行按钮可查看效果：以下是程序代码<html> <head> <title>Nice and Free CSS Template 2a</title> <style type="text/css" media="screen"></style> </head> <body> <div id="menu"><h2>right column</h2> <pre> #menu { float: left; width: 25%; background-color: #ff99CC; overflow: auto; } </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 and content dynamic</b><br /> 2 column layout grid. The navigation column and content column are dynamic and adjust themselves to the browser window.<br /> This layout also works with an absolute height <a href="temp02a_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 { float: left; width: 75%; background-color: #fff; margin:0px 0px 50px 0px; overflow: auto; } </pre> </div> </body> </html><a href="http://www.alixixi.com/web/HTML/jsrun/">欢迎访问阿里西西网页脚本特效集</a>

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