|
当窗口收缩时超出层的宽度时会自动出现滚动条...
以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 2a</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;
padding:0px 20px;
margin:0px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px
}
h2 {
font-size:14px;
padding-top:10px;
color: #564b47;
background-color:transparent;
}
p,h2, pre {
padding:10px;
}
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 dynamisch */
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
#content {
float: left;
width: 75%;
margin:0px 0px 50px 0px;
background-color: #fff;
overflow: auto;
}
--></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"><!--
/* 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;
padding:0px 20px;
margin:0px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px
}
h2 {
font-size:14px;
padding-top:10px;
color: #564b47;
background-color:transparent;
}
p,h2, pre {
padding:10px;
}
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 dynamisch */
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
#content {
float: left;
width: 75%;
margin:0px 0px 50px 0px;
background-color: #fff;
overflow: auto;
}
--></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>
|
所在位置：论坛首页 -> ┈┋电脑网络技术区┋┈ -> 网页制作技术 -> 带滚动条的两栏标准DIV+CSS布局示例
资料
短消息