0

我的任务是创建一系列 8 个盒子，这些盒子会自动加载，里面只有一个名字和一张照片。当它们悬停在一个 x 上时，可以单击它来删除该框。我还必须能够添加新盒子。目前我已经设置了 2 个字段，其中一个用于获取名称和照片 url。

我遇到了一些问题，我可以创建一个带边框的框，但是如果我添加文本或名称，框就会消失，只留下一个名字。另外，我可以直接将图片导入页面，但无法添加名称，仍然无法创建框。

谁能指出我正确的方向来实现这一目标？

这是我的 HTML

这里的第一部分是一张照片，只是一张照片。第二部分在加载时创建一个盒子，并且应该有一个名字和照片。目前我拿出了img线，只是想在盒子里取一个名字，然后我会回到图像上。

  <script type="text/javascript">
    document.getElementById('btn').onclick = function() {
        var val = document.getElementById('imagename').value,
            src = "" + val +'.png',
            img = document.createElement('img');

        img.src = src;
        document.body.appendChild(img);
    };
</script>

  <hr />
<div class="boxed">
    <name>William Finley </name>
</div>

这是我的 CSS

.boxed{
border: 3px black;
width:150px;
}

.name
{    
font-weight:bold;    
position:relative;    
z-index:100; /*greater than details, to still appear in card*/
}
.card img
{
width:70px;    
float:right;
margin-top:-1em;
}
4

0 回答 0