DIV+CSS上中下布局案例⽹页源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上中下DIV+CSS布局案例</title>
<style type="text/css">
#container{
background-color: darkgray;
text-align: center;
width: 800px;
height: 600px;
}
#top{
background-color: antiquewhite;
width: 780px;
height: 100px;
}
#main{
background-color: #00FF00;
width: 780px;
height: 400px;
}
#bottom{
background-color: aqua;
width: 780px;
height: 100px;
div中的div居中}
</style>
</head>
<body>
<!--需要兼容客户屏幕宽度，布局应该使⽤固定尺⼨-->
<!--p,h,div属于块状元素，前后会⾃动换⾏-->
<!--div会⾃动占据整个⽗容器的宽度-->
<center>
<div id="container">
<center>
<div id="top">TOP</div>
<div id="main">MAIN</div>
<div id="bottom">BOTTOM</div>
</center>
</div>
</center>
</body>
</html>
页⾯效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。