网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 网站常用 >> 正文
最新文章
· JavaScript实现文本段落折叠展开和收
· 拖动滑块选择范围的网页插件代码
· JS版元素周期表
· jQuery数字统计并生成进度条动画的代
· 一个不错的CSS分页样式
· 实用的Flash全屏和退出全屏切换效果
· 纯CSS实现三列DIV等高布局
· jquery四色网页换肤代码
· 可展开和收起的在线客服代码
· 功能强大的漂亮计算器
热门文章
 登录时用Cookie保存用户名和密码
 获取16进制颜色值的取色器
 一个小型的JS在线文本编辑器
 JavaScript实现文本段落折叠展开和
 利用js给li标签添加序号
 通过QQ查询QQ用户的头像、昵称、地
 可展开和收起的在线客服代码
 js取色器
 基于jQuery的对象切换插件soChange
 javascript让状态栏不显示链接地址
相关文章
没有相关文章
纯CSS实现三列DIV等高布局
来源:86ue.com 更新时间:2011/10/3 2:47:34 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
*{
 margin:0;
 padding:0;
}
#wrap{
 overflow:hidden;
 width:1000px;
 margin:0 auto;
}
#left,#center,#right{
 margin-bottom:-10000px;
 padding-bottom:10000px;
}
#left{
 float:left;
 width:250px;
 background:#00FFFF;
 }
#center{
 float:left;
 width:500px;
 background:#FF0000;
 }
#right{
 float:right;
 width:250px;
 background:#00FF00;
 }
</style>
</head>
<body>
<div id="wrap">
 <div id="left">
  <p>left</p>
  <p>left</p>
  <p>left</p>
  <p>left</p>
  <p>left</p>
 </div>
 <div id="center">
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
  <p>center</p>
 </div>
 <div id="right">
  <p>right</p>
  <p>right</p>
  <p>right</p>
 </div>
</div>
</body>
</html>
△运行 ☉预览 #复制 +收藏
特效说明:
纯CSS实现三列DIV等高布局
  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号