CSS 网页布局实例：横向分栏水平居中的实现

　　CSS 横向分栏布局实例，在内容显示区，因为元素未定义高度，所以必须添加内容，才能更好地显示元素的位置。也就是给正文显示区更大的余地，让内容决定正方的高度，因为本布局实例就是横向不变竖向变，以满足不同的布局需要。

　　烈火提示：只是简单的布局实例，样式并未美化，喜欢的朋友可以自己通过CSS美化，如果您还不熟悉CSS，请阅读由烈火提供的CSS中文手册。

　　以下是实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>css横向分栏</title><br /> <style><br /> body<br /> {<br /> margin:0;<br /> }<br /> #main<br /> {<br /> margin:0 auto;<br /> width:760px;<br /> border:none;<br /> }<br /> #header<br /> {<br /> height:100px;<br /> margin:5px 0;<br /> }<br /> #nav<br /> {<br /> height:20px;<br /> margin:0 0 5px;<br /> }<br /> #content<br /> {<br /> margin:0 0 5px;<br /> }<br /> #footer<br /> {<br /> height:30px;<br /> }<br /> div<br /> {<br /> border:1px solid #000000;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="main"><br /> <div id="header">header部分</div><br /> <div id="nav">nav部分</div><br /> <div id="content">这里是内容部分<br />因为元素未定义高度<br />所以必须添加内容<br />才能更好地显示元素的位置</div><br /> <div id="footer">footer部分</div><br /> </div><br /> </body><br /> </html>
提示：可修改后代码再运行!

热点

CSS 网页布局实例：横向分栏水平居中的实现

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

CSS 网页布局实例：横向分栏水平居中的实现

由 dawei

相关文章

加盟社区邦，让家政创业更简单，社区邦家政创业招商会成功举办！

大众创业的2.0版本，百度智能小程序创业经营大赛正式启动

2021“创客广东”工业互联网中小企业创新创业大赛圆满收官

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性