CSS 盒子模型详解：布局、填充、边框和外边距
<p><!doctype html></p>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#top{
width: 1240px;height:358px;margin: 0px auto;}
#main{
width: 1240px;height:475px;margin:0px auto;margin-top: 20px;}
.box1{width: 400px;height :475px;float:left;margin-right: 20px;}
.box2{width:400px;height:475px;float: left;margin-right: 20px}
.box3{width:400px;height :475px;float: left}
#banner{
width:1240px;height: 537px;margin:0px auto;margin-top: 20px;border: 8px solid #D87021;padding: 10px;border-radius: 20px;}
#foot{width:1240px;height:257px;margin:0px auto;margin-top: 20px;}
/*调整图片大小*/
img{
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="top"><img src="images/top.jpg"/></div>
<div id="main">
<div class="box1"><img src="images/hongchuanjingshen2.jpg"/></div>
<div class="box2"><img src="images/yananjingshen2.jpg"/></div>
<div class="box3"><img src="images/kangmeiyuanchao2.jpg"/></div>
</div>
<div id="banner"><img src="images/banner.jpg"/></div>
<div id="foot"><img src="images/bottom.jpg" width="1240" height="257" alt=""/></div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/oo3B 著作权归作者所有。请勿转载和采集!