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

这个是一个经典的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>


<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知识)