运行结果如下
以下是代码....
css部分
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1200px;
height:400px;
border-style: solid;
margin:0 auto;
margin-top:150px;
background-color: black;
border-color:white;
}
.box1{
font-size: 0px;
}
.box2{
height: 100px;
width: 100px;
text-align: center;
border-color:black;
position: fixed;
bottom:600px;
right:1250px;
font-size: 16px;
color:white;
}
.box3{
height: 100px;
width: 100px;
text-align: center;
border-color:black;
position: fixed;
bottom:600px;
right:650px;
font-size: 16px;
color:white;
}
.box4{
height: 100px;
width: 100px;
text-align: center;
border-color:black;
position: fixed;
bottom:400px;
right:950px;
font-size: 16px;
color:white;
}
.box5{
height: 100px;
width: 100px;
text-align: center;
border-color:black;
position: fixed;
bottom:400px;
right:350px;
font-size: 16px;
color:white;
}
ul{
list-style: none;
}
bj{
opacity: 0.3;
}
</style>
下面是内容...
</head>
<body>
<div class="box">
<div class="box1">
<bj>< img src="../img/dw4.jpg" height="200" width="300" ></bj>
< img src="../img/dw44.jpg" height="200" width="300">
<bj> < img src="../img/dw444.jpg" height="200" width="300"></bj>
< img src="../img/dw44444.jpg" height="200" width="300">
< img src="../img/dw4.4.jpg" height="200" width="300">
<bj>< img src="../img/dw4.1.jpg" height="200" width="300"></bj>
< img src="../img/dw4.2.jpg" height="200" width="300">
<bj>< img src="../img/dw4.3.jpg" height="200" width="300"></bj>
</div>
</div>
<div class="box2">
<ul>
< img src="../img/dwfz.jpg">
<li>环保材料保障</li>
<li>ADLMALDMA</li>
</ul>
</div>
<div class="box3">
<ul>
< img src="../img/dwfz1.jpg">
<li>设计方案保障</li>
<li>ALFKLFJAIYXN</li>
</ul>
</div>
<div class="box4">
<ul>
< img src="../img/dwfz4.jpg">
<li>工程质量保障</li>
<li>QWERADKL</li>
</ul>
</div>
<div class=“box5”>
后面的直接就截图了,手机手打不习惯,
总结来说,font-size:0px;可以用来控制字体大小,也能控制图片的间距