四欄標準DIV+CSS布局樣本

來源:互聯網
上載者:User

四欄標準DIV+CSS布局樣本

以下是代碼:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Nice and Free CSS Template 4</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: 19%;
top: 106px;
background-color: #ffffff;
}
#middleleft {
position: absolute;
left: 22%;
width: 28%;
top: 106px;
background-color: #ffffff;
}
#middleright {
position: absolute;
left: 51%;
width: 28%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right {
position: absolute;
left: 80%;
width: 18%;
top: 106px;
background-color: #ffffff;
overflow: auto;
}
#right, #middleright, #middleleft, #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: 19%;
top: 106px;
background-color: #ffffff;
}
</pre>
<h3>Warning</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 />
<br />
<br />
</p>
</div>
<div id="middleleft">
<h3>middleleft</h3>
<pre>
#middleleft {
position: absolute;
left: 22%;
width: 28%;
top: 106px;
background-color: #ffffff;
}
</pre>
<h3>Calculations in your head</h3>
<p>This example requires some calculations. The sum of the widths yields 98%. The distance from
the border of body to the first box plus its width plu the distance yields the left position of
the next box.
<p>If you want boxes of different width you need to adjust these values accordingly.</p>
<p>Use of this code is encouraged! </p>
<p>Try it with 2 or 3 columns</p>
<br />
<br />
</div>
<div id="middleright">
<h3>middleright</h3>
<pre>
#middleright {
position: absolute;
left: 51%;
width: 28%;
top: 106px;
background-color: #ffffff;
}
</pre>
<h3>box border</h3>
<p>Borders, pading and margin are defined in</p>
<pre>
#right,#middleright,#middleleft,#left{
border: 1px solid #564b47;
padding:0px;
margin:0px;
}
</pre>
<h3>Font definitions</h3>
<p>Padding are passed to p, h1 and h3.</p>
<pre>
p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}
</pre>
<br />
<br />
</div>
<div id="right">
<h3>right</h3>
<pre>
#right {
position: absolute;
left: 80%;
width: 18%;
top: 106px;
background-color: #ffffff;
}
</pre>
<h3>open code</h3>
<p>Use of this code is encouraged! (o_.)/</p>
<br />
<br />
</div>
</body>
</html>

以下是HTML指令碼特效代碼,點擊運行按鈕可查看效果:
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.