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

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

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

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

　　提示：只是简单的布局实例，样式并未美化，喜欢的朋友可以自己通过CSS美化，如果您还不熟悉CSS，请阅读由提供的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 http-equiv="Content-Type" content="text/HTML; charset=utf-8" /><Title>CSS横向分栏</Title><style>body{margin:0;}#main{margin:0 auto;wIDth:760px;border:none;}#header{height:100px;margin:5px 0;}#nav{height:20px;margin:0 0 5px;}#content{margin:0 0 5px;}#footer{height:30px;}div{border:1px solID #000000;}</style></head><body><div ID="main"><div ID="header">header部分</div><div ID="nav">nav部分</div><div ID="content">这里是内容部分<br />因为元素未定义高度<br />所以必须添加内容<br />才能更好地显示元素的位置</div><div ID="footer">footer部分</div></div></body></HTML>
提示：可修改后代码再运行!

总结

以上是内存溢出为你收集整理的CSS 网页布局实例：横向分栏水平居中的实现全部内容，希望文章能够帮你解决CSS 网页布局实例：横向分栏水平居中的实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1024361.html

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

发表评论

评论列表（0条）