左右两栏式WEB标准(DIV+CSS)布局代码

菜单层固定宽度，内容层自适应..

以下是代码：
<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 全部选择 提示：你可先修改部分代码，再按运行]

时间： 2024-11-03 00:46:43

左右两栏式WEB标准(DIV+CSS)布局代码的相关文章

四栏标准DIV+CSS布局示例

四栏标准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="sc

基于XHTML标准DIV+CSS布局对SEO的影响

css|seo|xhtml|标准 前两天发完<SEO参考:DIV+CSS三行两列经典布局>一文,不少朋友在MSN上问我,使用XHTML标准的DIV+CSS布局对于SEO到底有什么作用.这两天简单总结了一下,写出来供参考. XHTML技术问题请参考相关网站研究,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二

带滚动条的两栏标准DIV+CSS布局示例

css|标准|示例|滚动条 当窗口收缩时超出层的宽度时会自动出现滚动条... 以下是代码:<html> <head> <title>Nice and Free CSS Template 2a</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0p

DIV+CSS布局的网站对网站SEO的影响分析_经验交流

符合XHTML标准DIV+CSS布局的网站,下面说说在SEO方面的影响. 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处. 表格的嵌套问题 很多SEOer在其文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实.我的几项实验结果没有完全

WEB标准教程：Div+CSS布局入门教程

css|web|web标准|教程|入门教程 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

左右两栏div+css布局示例

左右两栏div+css布局示例 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

全屏的三栏div+css布局示例

全屏的三栏div+css布局示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 7</title> <style type="text/css" media="screen"><!-- /*  body and font definitions */ html { padding:0px; margin:0px; } body { back

WEB响应式设计:响应式Web设计的CSS框架分享

文章简介:Web布局设计新方式-响应式设计,应用越来越广泛,在这里为大家分享10个用于响应式Web设计的CSS框架,让您的开发工作越来越轻松. Web布局设计新方式-响应式设计,应用越来越广泛,在这里为大家分享10个用于响应式Web设计的CSS框架,让您的开发工作越来越轻松. 1) Less Framework Less框架是一个用于设计自适应网站的CSS网格系统,它包含4个布局和3套预设布局,这些都以一个单一网格为基础.Less框架的目标是更高效地创建多布局网站,并在布局之间保持一致. 2)

20个简单精妙的等分两栏式优秀网页设计

  借助栅格系统所提供的结构,网页页面在将内容组织得井井有条的同时,还可以兼顾到漂亮的布局和响应式的变化.这种情况在各类新闻.博客和网络杂志类的网站中并不鲜见. 不过这些四四方方的区块呈现在用户面前的时候,通常是用炫酷的内容抓住眼球,布局设计大多隐于幕后发挥作用.当然,也有一些设计师会强化布局设计来吸引用户,栅格系统的自由度和兼容性就在此可见一斑.在这类页面设计中,有一种不算主流但也并非鲜见,别具一格同时也具有很大的拓展空间的布局设计,这就是今天我们要聊的两栏均分式页面布局. 通常意义上的两栏式