IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台！
  • 登录
  • 注册
  • 设为首页
  • 加入收藏
  • 网站首页
  • IT风向标
  • 网站优化
  • Html
  • CSS
  • JavaScript
  • ASP
  • Php/Mysql
  • Flash
  • Ajax
  • 源码下载
  • 精美桌面
  • 供求信息
  • 超稳定100M虚拟主机只要100元，还送50M邮箱!
  • 文字广告招商中...
  • 会员注册 | 用户登录 | 我要投稿
  • 信息订阅
DIV&CSS打造自动伸展三栏复合布局 您现在正在浏览：首页 > CSS > 
DIV&CSS打造自动伸展三栏复合布局

作者：　发布时间：2007-12-04 16:15:29　来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>自由伸展的三栏式版面</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=GB2312" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />

<style type="text/css">
<!--
html {margin: 0; padding: 0;}

body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
font-size: small; color:#333;background: #ee8 repeat-y url(images/browncol.gif);}
/*** Image is 180px wide, and 20px high ***/

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}

a {color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}

/*******************************************************************************
Positioning rules
*******************************************************************************/
h1, h2 {
font-size: 22px;
margin: 0;
color: #040;
background-color: #c83; /*** The header and footer have backgrounds, to cover the 2-tone body BG ***/
border-top: 4px solid #000;
border-bottom: 5px solid #000;
padding: 3px 0 3px 1em;
}

h2 {background-color: #638; color: #fff;}

div#leftbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #000;
border-right: 3px solid #000;
padding: 10px;
background-color: #dda; /*** This div has a background to cover the 2-tone body BG ***/
}

div#rightbox { /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px; /*** IE5/mac will show a horizontal scrollbar
if this is less than 16px, or other units are used
http://www.l-c-n.com/IE5tests/right_pos/ ***/
width: 30%;
color: #820;
padding-top: 10px;
}
-->
</style>
</head>
<body>
<h1>
自由伸展的三栏式版面（Three Column Stretch）（页首）
</h1>
<div id="leftbox">
<pre>
<strong>#leftbox</strong> {
position: absolute;
left: 10px;
width: 180px(150px?);
}
</pre>
<p>
<strong>这个栏段</strong>的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。
<p>
</p>
这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的“宽度(width)”值。
1 2 3 下一页  
【评论】【加入收藏夹】【大 中 小】【打印】【关闭】
※ 相关信息
无相关信息

发表评论
查看评论 
用户名: 密码:
验证码: 匿名发表
[注册帐号]
[控制面板]
[用户登陆]
[修改资料]
[用户收藏]
[我的状态]
[退出登陆]
 
文章搜索
     
    [添加文章]   [管理文章]
最新技术文档
    ·十天学会PHP之基础知识
    ·十天学会PHP之流程控制
    ·十天学会PHP之构建数据库
    ·十天学会PHP之连接数据库
    ·echo和print 的区别
    ·PHP生成随机字符串
    ·PHP取得文件后缀
    ·正则表达式经验谈
    ·PHP的Cookie技术介绍
    ·PHP数组排序
技术文档排行榜
    ·天气预报小偷，根据IP自动判断地址
    ·超经典计算机使用问题105答
    ·'AjaxPro'未定义错误的原因&javascript顺
    ·[初学者必读]网页制作之HTML基础知识
    ·DIV&CSS打造自动伸展三栏复合布局
    ·CSS网页布局入门教程：下拉及多级弹出式菜单
    ·阿里妈妈广告的投放技巧
    ·谁是网页浏览器引擎速度真正王者
    ·JavaScript：世界上误解最深的语言
    ·几种常用禁止修改输入框的方法
关于站点 - 广告服务 - 联系我们 - 免责声明 - 程序支持 - 网站地图 - 留言中心 - 返回顶部

Copyright © 2007-2008 www.Jishubu.com online services. All rights reserved. Template designed by laogui.
违法不良信息举报中心　津ICP备07002356号