您的位置：首页 > Web前端 > CSS

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

2017-01-16 16:52 417 查看

盒子模型

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;
}


web效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航