css页面中常见左中右分栏布局的两种实现方式
2013-11-15 16:22
791 查看
以下代码复制粘贴即可使用:
示例一:
示例2:
示例一:
<!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 charset="gb2312" /> <style type="text/css"> .page_center { width:100%; } #nav { background-color:red; height:20px; } #left { width:120px; background-color:green; position:absolute; } #middle { background-color:yellow; } #right { width:120px; background-color:green; position:absolute; top:0; right:0; } #foot { background-color:pink; } #main { position:relative; } </style> </head> <body> <div id="nav" class="page_center">上边</div> <div id="main" class="page_center"> <div id="left">左边</div> <div id="middle"> 中间部分</div> <div id="right">右边</div> </div> <div id="foot" class="page_center">底边</div> </body> </html>
示例2:
<!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>Untitled Document</title> </head> <style type="text/css"> #left{ float:left; width:240px; height:500px; background:#0C9; } #right{ float:right;width:240px;height:500px; background:#933; } #center{ height:500px;background:#06C; } </style> <body> <div id="left" >左边</div> <div id="right" >右边</div> <div id="center" style="">中间</div> </body> </html>
<span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>
相关文章推荐
- css页面左中右分栏布局两种方式示例代码
- 两种方式实现footer固定在页面最下方布局
- 简单说 通过CSS实现 文字渐变色 的两种方式
- Javascript页面跳转常见实现方式汇总
- CSS float的初步理解:用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- 两种方式实现页面数据绑定
- 利用HTML和CSS实现常见的布局
- 利用HTML和CSS实现常见的布局
- Android横竖屏改变布局的常见两种方式
- TabLayout两种添加tab方式,结合ViewPager+Fragment实现常见界面视图
- Yii 渲染与布局(渲染页面的两种方式)
- CSS实现避免页面布局被大尺寸图片和长字符串破坏
- css页面左中右分栏布局示例
- css瀑布流布局的几种实现方式
- 一些页面布局常见CSS问题
- DIV与Table两种页面布局方式的优缺点
- (div+css)上面固定下面自适应页面布局的实现(FF,IE)
- 【前端】纯html+css+javascript实现楼层跳跃式的页面布局
- Android 页面跳转动画的两种实现方式
- css实现水平居中和垂直居中的常见方式