欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

html经典上中下三段的布局设计

发布时间：2025/3/19 编程问答 22 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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经典上中下三段的布局设计的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。