Question

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

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

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

这是我的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;
}

使用CSS，Javascript，HTML创建InfoCard / Info Box

0 个答案: