|
自动伸缩效果.
以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 3</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;
margin:0px;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
pre {
color: #564b47;
font-size: 11px;
background-color: #e1ddd9;
font-family: Courier, Monaco, Monospace;
}
p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}
h3 {
font-size: 13px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
/* positioning-layers dynamisch */
#logo {
position: absolute;
right: 2%;
width: 96%;
text-align: right;
top: 20px;
}
#left {
position: absolute;
left: 2%;
width: 22%;
top: 106px;
background-color: #ffffff;
}
#content {
position: absolute;
left: 25%;
width: 50%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right {
position: absolute;
left: 76%;
width: 22%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right, #content, #left {
border: 1px solid #564b47;
padding:0px;
margin:0px;
}
--></style>
</head>
<body>
<div id="left">
<h3>left</h3>
<pre>
#left {
position: absolute;
left: 2%;
width: 22%;
top: 106px;
background-color: #ffffff;
}
</pre>
<h3>Attention</h3>
<p>These pages use certain CSS definitions that are unsupported by older browsers.<br />
<a href="/">more nice and free CSS templates</a></p>
<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>
<br />
<br />
</div>
<div id="content">
<h3>middle right</h3>
<pre>
#content {
position: absolute;
left: 25%;
width: 50%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
</pre>
<h3>overflow: auto;</h3>
<p>With overflow: auto;
With overflow: you can determine how overflowing content should be treated.</p>
<h3>Values</h3>
<pre>
visible = The element gets expanded to show the entire content.
hidden = The content will be cut if it overflows.
scroll = The browser should offer scroll bars.
auto = The browser should decide how to render the element. Scroll bars are allowed.
</pre>
<p>Older browsers do not know support this property.<br />
IE does not support overflow:visible</p>
<br />
<br />
</div>
<div id="right">
<h3>right</h3>
<pre>
#right {
position: absolute;
left: 76%;
width: 22%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
</pre>
<h3>open code</h3>
<p>Use of this code encouraged! (o_.)/</p>
<br />
<br />
</div>
</body>
</html> |
以下是HTML脚本特效代码，点击运行按钮可查看效果：
<html>
<head>
<title>Nice and Free CSS Template 3</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;
margin:0px;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
pre {
color: #564b47;
font-size: 11px;
background-color: #e1ddd9;
font-family: Courier, Monaco, Monospace;
}
p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}
h3 {
font-size: 13px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
/* positioning-layers dynamisch */
#logo {
position: absolute;
right: 2%;
width: 96%;
text-align: right;
top: 20px;
}
#left {
position: absolute;
left: 2%;
width: 22%;
top: 106px;
background-color: #ffffff;
}
#content {
position: absolute;
left: 25%;
width: 50%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right {
position: absolute;
left: 76%;
width: 22%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right, #content, #left {
border: 1px solid #564b47;
padding:0px;
margin:0px;
}
--></style>
</head>
<body>
<div id="left">
<h3>left</h3>
<pre>
#left {
position: absolute;
left: 2%;
width: 22%;
top: 106px;
background-color: #ffffff;
}
</pre>
<h3>Attention</h3>
<p>These pages use certain CSS definitions that are unsupported by older browsers.<br />
<a href="/">more nice and free CSS templates</a></p>
<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>
<br />
<br />
</div>
<div id="content">
<h3>middle right</h3>
<pre>
#content {
position: absolute;
left: 25%;
width: 50%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
</pre>
<h3>overflow: auto;</h3>
<p>With overflow: auto;
With overflow: you can determine how overflowing content should be treated.</p>
<h3>Values</h3>
<pre>
visible = The element gets expanded to show the entire content.
hidden = The content will be cut if it overflows.
scroll = The browser should offer scroll bars.
auto = The browser should decide how to render the element. Scroll bars are allowed.
</pre>
<p>Older browsers do not know support this property.<br />
IE does not support overflow:visible</p>
<br />
<br />
</div>
<div id="right">
<h3>right</h3>
<pre>
#right {
position: absolute;
left: 76%;
width: 22%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
</pre>
<h3>open code</h3>
<p>Use of this code encouraged! (o_.)/</p>
<br />
<br />
</div>
</body>
</html>
|
所在位置：论坛首页 -> ┈┋电脑网络技术区┋┈ -> 网页制作技术 -> 三栏式带滚动条自动伸展的DIV+CSS布局示例
资料
短消息