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

效果如图:

以下是代码：
<html>
<head>
<title>Nice and Free CSS Template 7</title>
<style type="text/css" media="screen"></style></head>
<body>
<div id="left">
<h2>MENU</h2>
<pre>
#left {
position: absolute;
left: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
}
</pre>
<p>
<strong>This column</strong> inherited it’b background color from the body definition.
The padding ist defined through the p element.
</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 />
</p>
</div>
<div id="content">
<h2>CONTENT</h2>
<p><b>3 columns / menu fixed, content dynamic with head and footer.</b><br />
3 column layout grid. The navigation column are fixed in width, the content column is dynamic and adjusts
itself to the browser window.</p>
<p>This layout also works with an absolute height <a href="temp07_100.html">template 100% height</a><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>
<h1>
in valid   code we trust (*^_^*) miss monorom
</h1>
</body></html>

转载于:https://www.cnblogs.com/ddshou/archive/2009/05/05/1449824.html

全屏的三栏div+css布局示例相关推荐

Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
网页设计（三）——DIV+CSS布局2
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
网页设计（二）——DIV+CSS布局1
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
div+css布局实例淘宝分析(三)(1)
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站 ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
根本不存在 DIV + CSS 布局这回事
实际上div不是用来布局的,div只是用来表示一个其它元素都无法准确表达语意的一个块区,只有CSS是用于布局的,所以根本就不存在div+CSS布局这回事.反过来,table布局的时候经常依赖于CSS定 ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...

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

全屏的三栏div+css布局示例相关推荐

最新文章

热门文章