html经典上中下三段的布局设计
生活随笔
收集整理的這篇文章主要介紹了
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经典上中下三段的布局设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中改变字符串编码
- 下一篇： java常用的发送http请求的工具方法