【Web】css盒子模型创建网页布局

最新推荐文章于 2024-05-11 08:42:53 发布

普通读者

最新推荐文章于 2024-05-11 08:42:53 发布

阅读量6.5k

点赞数 9

分类专栏：學習筆記

本文链接：https://blog.csdn.net/guguant/article/details/54575542

版权

學習筆記专栏收录该内容

6 篇文章 0 订阅

订阅专栏

盒子模型

CSS在描述HTML元素时，会形成一个矩形框，可以将矩形框形象的看成一个盒子。每个HTML元素，都具有盒子模型。

这里写图片描述

使用盒子模型创建网页布局

index.html + out.css

index.html

<html>
<head>
<link rel="stylesheet" href="out.css" />
</head>
<body>
<div id="container">
    <div id="header">Header
    <p>CSS盒子模型创建网页布局<p>
    </div>
    <div id="menu">Menu
    </div>
    <div id="maincontent">
        <div id="sidebar1">SideBar1</div>
        <div id="sidebar2">SideBar2</div>
        <div id="content">Content</div>
    </div>
</div>
<div id="footer">Footer</div>
</body>
</html>

out.css

body{
    font-family:Arial;
    font-size:24px;
    margin:0;
    padding:0;
}

p{
    font-size:18px;
}

#conainer{
    margin:auto;
    width:auto;
}

#header{
    height:150px;
    background:#7DC85F;
    margin-bottom:5px;
}

#menu{
    height:30px;
    background:#7DC85F;
    margin:5px;
}

#mainContent{
    height:400px;
    margin-bottom:5px;
}

#sidebar1{
    float:left;
    width:200px;
    height:100%;
    background:#7DC85F;
}

#sidebar2{
    float:right;
    width:200px;
    height:100%;
    background:#7DC85F;
}

#content{
    margin:0 205px;
    height:100%;
    background:#7DC85F;
}

#footer{
    height:60px;
    background:#7DC85F;
}