在网页中插入一个浅绿色的底框，在他的上层放一张图片，并在图片下方配一段文字的代码，需要十二个这样的框并分为三排，第一排五张，第二排四张第三排三张，请用html书写

好的，下面是代码：

<style>
    .box {
        width: 200px;
        height: 250px;
        border: 2px solid #a2d3c2;
        margin: 5px;
        float: left;
        text-align: center;
    }
    .box img {
        width: 150px;
        height: 150px;
        margin-top: 20px;
    }
    .box p {
        margin: 10px;
        font-size: 18px;
    }
</style>

<div class="box">
    <img src="图片1的路径" alt="图片1">
    <p>图片1的文字描述</p>
</div>
<div class="box">
    <img src="图片2的路径" alt="图片2">
    <p>图片2的文字描述</p>
</div>
<div class="box">
    <img src="图片3的路径" alt="图片3">
    <p>图片3的文字描述</p>
</div>
<div class="box">
    <img src="图片4的路径" alt="图片4">
    <p>图片4的文字描述</p>
</div>
<div class="box">
    <img src="图片5的路径" alt="图片5">
    <p>图片5的文字描述</p>
</div>
<div class="box">
    <img src="图片6的路径" alt="图片6">
    <p>图片6的文字描述</p>
</div>
<div class="box">
    <img src="图片7的路径" alt="图片7">
    <p>图片7的文字描述</p>
</div>
<div class="box">
    <img src="图片8的路径" alt="图片8">
    <p>图片8的文字描述</p>
</div>
<div class="box">
    <img src="图片9的路径" alt="图片9">
    <p>图片9的文字描述</p>
</div>
<div class="box">
    <img src="图片10的路径" alt="图片10">
    <p>图片10的文字描述</p>
</div>
<div class="box">
    <img src="图片11的路径" alt="图片11">
    <p>图片11的文字描述</p>
</div>
<div class="box">
    <img src="图片12的路径" alt="图片12">
    <p>图片12的文字描述</p>
</div>

你可以将“图片的路径”和“图片的文字描述”替换为你自己的内容。