本文主要是介绍HTML——上中下布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
上中下布局是最基本的布局方式，本例假设用户屏幕分辨率为800*600像素。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>上中下布局</title><style type="text/css">body{background: #42413C ;margin: 0;/*消除body中的留白*/padding: 0;text-align: center;}.container{width: 778px;background: #FFF;margin: 0 auto;/*侧边的自动值与宽度结合使用，可以将布局居中对齐*/text-align: left;}.header{padding: 10px 0;background: #ADB96E;}.content{padding: 10px 0;}.footer{padding: 0px;background: #CCC49F;}</style></head><body><div class="container"><div class="header"><h1>网页头部</h1></div><div class="content"><h1>网页正文</h1><h1>网页正文</h1><h1>网页正文</h1><h1>网页正文</h1><h1>网页正文</h1></div><div class="footer"><h1>脚注</h1></div></div></body>
</html>
这篇关于HTML——上中下布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
