左右兩欄式WEB標準(DIV+CSS)布局代碼

來源:互聯網
上載者:User
菜單層固定寬度,內容層自適應..

以下是代碼:
<html>
<head>
<title>Nice and Free CSS Template 2</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;
}
p, pre, h2 {
padding:10px;
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;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
}
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 statisch und absolut */
#menu {
position: absolute;
width: 200px;
left: 20px;
background-color: #ff99CC;
padding:0px;
margin:0px
}
#content {
margin-left: 200px;
background-color:#fff;
overflow: auto;
}
--></style>
</head>
<body>
<div id="menu">
<h2>right column</h2>
<pre>
#menu {
position: absolute;
width: 200px;
left: 20px;
padding:0px;
margin: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 />
</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 fixed, content dynamic.</b><br />
2 columns layout grid. The navigation column is fixed, the content column is dynamic and adjusts itself to the browser
window.<br />
The layout also works with an absolute height <a href="temp02_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 {
margin-left: 200px;
background-color:#fff;
overflow: auto;
}
</pre>
</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.