html中定位,图片间隙,以及背景阴影

运行结果如下d5c4fd147bcf417faf9c45eabd622f81.jpg

 以下是代码....

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”>

2ff9f1a91fac444688a424c660ff746b.jpg

 后面的直接就截图了,手机手打不习惯,

总结来说,font-size:0px;可以用来控制字体大小,也能控制图片的间距

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_73525704

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值