HTML的浮动定位float简单使用
程序员文章站
2022-03-02 15:33:07
...
#HTML的浮动定位float简单使用
<!--定位机制-->
<!DOCTYPE html>
<html lang="en">
<!--浮动定位float(left,right,none),clear(left,right,both)-->
<html>
<head>
<meta charset="UTF-8">
<title>Web编程之路 </title>
<style>
*{padding:0;
margin:0;}
body{
font-size:30px;
text-align:center;
}
#container1{
background-color:#fff;
height:1030px;
}
#container{
margin:0 auto;
width:1000px;
background-color:#0cf;
}
#header{
width: 1000px;
height:100px;
background-color:#f00;
margin-bottom:5px;
}
#header2{
width:1000px;
height:25px;
background-color:#ff9;
margin-bottom:5px;
}
#main{
width: 1000px;
height:500px;
margin-bottom:5px;
}
#footer{
width: 1000px;
height:60px;
background-color:#ff3;
}
.aside{
}
#aside1{
float: left;
width: 100px;
height:500px;
background-color:#fcc;
}
#aside2{
float: left;
width: 190px;
height:500px;
background-color:#fcc;
}
#content{
float:left;
width: 700px;
height:500px;
background-color:#ffc;
margin-left:5px;
margin-right:5px;
}
</style>
</head>
<body>
<div id="container1">
<div id="container">
<div id="header">
<p>Web编程之路</p>
</div>
<div id="header2">
<p>header</p>
</div>
<div id="main">
<div id="aside1" class="aside">
<p>aside1</p>
</div>
<div id="content">
<p>content</p>
</div>
<div id="aside2" class="aside">
<p>aside2</p>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</div>
</body>
上一篇： 绝对定位absolute和浮动定位float的异同
下一篇： 绝对定位和浮动的区别