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

导读:本篇文章讲解 html经典上中下三段的布局设计,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/72770.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!