l如何实现如图效果,目前只学了html和css

img


大哥可以用任意图片,只要能实现一模一样的效果就行。最好每个细节都能做到,像图片边框边距啥的。蟹蟹啦,作业实在不会做。。想了好久

这个就float布局,实在不行直接打表格也可以的

绝对定位


```html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style>
          .a{
              width:300px;
              height: 200px;
              position:absolute;
              left:200px;
              top:250px;
              padding: 5px;
              border: 3px solid #6ad;
            }
            .b{
                position: absolute;
                left:550px;
                top:250px;
                }
            .c{
                position: absolute;
                left: 200px;
                top:460px;
            }
            ul{
                list-style-type: square;
                }
            body{
                font-size: large;
            }
            .d{
                position: absolute;
                left:700px;
                top:250px;
            }
            .e{
                position: absolute;
                top:540px;
                left: 750px;
            }
            .f{
                position: absolute;
                left:950px;
                top:250px;
            }
            .g{
                position: absolute;
                left:1000px;
                top:540px;
            }
        </style>
        <img class="a" src="file:///C:/Users/25219/Pictures/壁纸.jpg">
        <div class="b">
            <p style="color: #59c;">潜伏</p>
            <p style="color: #99c;">导演:XX<br/>主演:XX<br/>XX</p>
        </div>
        <div class="c">
            <ul >
                <li>XXXXXXXXX</li>
                <li>XXXXXXXXXXX</li>
            </ul>
        </div>
        <img  class="d"  style="width:200px;height: 300px;border:3px solid #79c;padding: 3px;"  src="file:///C:/Users/25219/Pictures/壁纸手机.jpeg">
        <p class="e">XXXXXXX</p>
        <img  class="f"  style="width:200px;height: 300px;border:3px solid #79c;padding: 3px;"  src="file:///C:/Users/25219/Pictures/壁纸手机.jpeg">
        <p class="g">XXXXXXX</p>
    </body>
</html>


img

```

这种要先去分成两个部分两个部分都被盒子包裹住,两个部分分为左边部分与右边部分。
左边部分可以分为上下两部分,而右边左右两部分。是不是简单多了