先上个高清无码图：
源码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉-->
<style>
div {
line-height:60px; /*让字体垂直居中*/
}
div.box {
width: 100%;
height: 60px;
background: yellow;
text-align: center; /*让字体水平居中*/
color: white;
}
div.box div.left, div.right {
width: 60px;
height: 60px;
background: red;
}
div.box div.left {
float: left;
}
div.box div.right {
float: right;
}
div.box div.center {
height: 60px;
background: green;
margin: 0 60px 0 60px; /*这句不要忘了，用来分开左右部分*/
}
</style>
</head>
<body>
<div class="box">
<div class="left">左固定</div>
<div class="right">右固定</div>
<div class="center">中间填满</div>
</div>
</body>
</html>
时间： 2024-10-12 13:45:24