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

2024年1月14日 123次阅读 来源: leo825...

这个是一个经典的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>
    原文作者：leo825...
    原文地址: https://blog.csdn.net/u011047968/article/details/51774302
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞