本文主要是介绍html经典上中下三段的布局设计，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个是一个经典的html布局：上、中、下的结构布局的一个小例子
<!DOCTYPE html>
<html>
<head lang= "en"><meta charset= "UTF-8"><title>MUC Manager </title>
<style type= "text/css">html,body {width :100 %; height:100 %; margin: 0 ;}#Container {position :relative ; width : 100 %; height:100 %; }#Header {position :relative ; width :100 %; height: 10 %; background-color: #0E2D5F;}#Content {position :relative ; width :100 %; height:80 %;}#Content-left {width :20 %; height:100 %; float:left;background-color: #00ee00;}#Content-right {width :80 %; height: 100 %;float :left ; background-color : #0b97c4;}#Footer {position :relative ;width :100 %; height: 10 %;background-color : #5f5f5f;}
</style></head>
<body><!-- 此处用了传统的三段式结构:Container代表整个容器，Header代表容器的上部，Content代表容器的中部也就是内容部分，Footer代表容器的底部 -->
<div id="Container" ><div id= "Header"></div><div id = "Content"><div id="Content-left" >左</ div> <div id="Content-right" >右</ div> </div><div id= "Footer"></div>
</div></body>
</html>这篇关于html经典上中下三段的布局设计的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
