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

html和CSS基础学习（九）

2017-09-23 20:47 495 查看

浮动二
1：浮动的元素不会覆盖文字，文字会放在周围。
2：元素设置浮动（会脱离文档流），块元素脱离文档流会被内容撑开。内联元素
脱离文档流——块元素

布局图

制作一个简单的div布局<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.head{
width:80% ;
height:100px;
background-color: cyan;
margin: 0 auto;

}
.content{
width:80% ;
height: 400px;
background-color: burlywood;
margin: 10px auto;
}
.content .news{
width:20%;
height: 100%;
background-color: red;
float:left

}
.content .center{
width:50%;
height: 100%;
background-color: gold;
float:left;
margin:0 5% ;
}
.content .advitistment{
width:20%;
height: 100%;
background-color: hotpink;
float:left

}
.footer{
width: 80%;
height: 100px;
background-color: khaki;
margin: 0px auto;

}
</style>
</head>
<body>

<div class="head"></div>

<div class="content">

<div class="news">此处用来放新闻</div>
<div class="center">此处来放主体</div>
<div class="advitistment">此处用来放广告</div>

</div>

<div class="footer"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航