div+css非常好的三栏浮动菜单示例

80酷酷网    80kuku.com

  

div+css非常好的三栏浮动菜单示例

以下是代码:

<html>
<head>
<title>Free CSS Template 5</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;
}
p, h2, pre {
margin: 0px;
padding: 5px 20px 5px 20px;
}
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;
}
.alignright {
margin-top: 0;
text-align: right;
font-size: 10px;
}
h2 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px
}
strong {
font-size: 13px;
}
/*  positioning-layers statisch und absolut */
#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
}
#content {
margin: 0px 190px 0px 190px;
border-left: 2px solid #564b47;
border-right: 2px solid #564b47;
border-bottom: 2px solid #564b47;
padding: 0px;
background-color: #ffffff;
}
#right {
position: absolute;
right: 0px;
width: 190px;
color: #564b47;
background-color: #ff99cc;
margin: 0px;
padding: 0px;
}
--></style>
</head>
<body>
<div id="left">
<h2>MENU</h2>
<pre>
#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
}
padding: 0px;
}
</pre>
<p>
<strong>This column</strong> inherited it’s background color from the body definition.
Padding is defined through p.</p>
</div>
<div id="right">
<h2>MENU</h2>
<pre>
#right {
position: absolute;
right: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 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 />
<br />
<br />
</p>
</div>
<div id="content">
<h2>CONTENT</h2>
<p><b>3 columns / menu fixed, content and head dynamic.</b><br />
3 columns layout grid. The navigation columns are fixed in their widths, the content column is dynamic
and adjusts itself to the browser window.<br />
The head box is dynamic in its height. It adjusts to the height of the logo.<br />
<a href="/">more nice and free css templates</a></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;
margin:0px;
}
#content {
margin: 0px 190px 0px 190px;
border-left: 2px solid #564b47;
border-right: 2px solid #564b47;
padding: 0px;
background-color: #ffffff;
}
</pre>
</div>
</body>
</html>

以下是HTML脚本特效代码,点击运行按钮可查看效果: 以下是程序代码

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

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: