带滚动条的两栏标准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: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;
}
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;
color: #564b47;
background-color:transparent;
}
p,h2, pre {
padding:10px;
}
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 dynamisch */
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
#content {
float: left;
width: 75%;
margin:0px 0px 50px 0px;
background-color: #fff;
overflow: auto;
}
--></style>
</head>
<body>
<div id="menu"><h2>right column</h2>
<pre>
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
</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 and content dynamic</b><br />
2 column layout grid. The navigation column and content column are dynamic and adjust themselves to the browser window.<br />
This layout also works with an absolute height <a href="temp02a_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 {
float: left;
width: 75%;
background-color: #fff;
margin:0px 0px 50px 0px;
overflow: auto;
}
</pre>
</div>
</body>
</html>

以下是HTML脚本特效代码，点击运行按钮可查看效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

时间： 2024-08-02 22:16:31

带滚动条的两栏标准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

左右两栏div+css布局示例

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

标准三栏式div+css固定示例

标准三栏式div+css固定示例 以下是代码:<html> <head> <title>Nice and Free CSS Template 6</title> <style type="text/css" media="screen"><!-- /*  body und schrift deffinitionen */ html { padding:0px; margin:0px; } body {

全屏的三栏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

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

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

三栏式带滚动条自动伸展的DIV+CSS布局示例

自动伸缩效果. 以下是代码:<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 { backgrou

左右两栏式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 {

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)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.