Rumah > Artikel > hujung hadapan web > css页面中左中右分栏布局的实现
页面左中右分栏布局在目前的网页布局中是比较常见的,下面就与大家分享两个不错的方法可以实现左中右分栏布局,代码很详细,需要的朋友可不要错过
以下代码复制粘贴即可使用:
示例一:
<!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> <p id="nav" class="page_center">上边</p> <p id="main" class="page_center"> <p id="left">左边</p> <p id="middle"> 中间部分</p> <p id="right">右边</p> </p> <p id="foot" class="page_center">底边</p> </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> <p id="left" >左边</p> <p id="right" >右边</p> <p id="center" style="">中间</p> </body> </html>
<span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Atas ialah kandungan terperinci css页面中左中右分栏布局的实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!