如何在HTML中创建此设计

Question

我需要创建一个这样的视图来显示用户输入的逗号分隔标签。我是html的新手，所以我只知道如何进行基本的突出显示。

<SPAN style="BACKGROUND-COLOR: #ffff00">Example of highlighted text</SPAN>

Answer 1

这应该可以解决问题

ul {
        width:200px;
        text-align:center;
    }
    li {
        display: inline-block;
        background: #A7B42D;
        color: #fff;
        border-radius: 8px;
        padding: 1px 5px;
        font-size:12px;
        line-height:16px;
        font-family:arial, sans-serif;
    }

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Answer 2

我建议你使用工具来制作这个，因为这要求最新的技术才能显示propper的圆形效果。 CSS3 PIE可以轻松完成这项工作，它可以生成CSS规则以应用于元素：

http://css3pie.com/

使用该网站，您可以生成CSS规则。那么你必须将这个规则应用于多个元素，这样你就可以使用我们称之为“类”的东西。那么具有该类的样式将应用于您指定该类的所有项目。

示例：

    .myClassDefinition
    {
    BACKGROUND-COLOR: #ffff00
    }

<p>normal text</p>
<p class="myClassDefinition"> text with myClassDefinition style</p>

根据您的请求，在http://css3pie.com/download/下载PIE库，将其托管在您的服务器上，将其放在“pie”文件夹中并创建该规则：

.greenRounded
{
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/pie/PIE.htc);
}

最新一行是指服务器中托管的派对库，相对于托管CSS规则的当前文件的路径！你改变了这个！

然后使用那个CSS类，你想将它应用于你想要的所有项目，所以在项目上做这样的事情：

<span class="greenRounded">vase</span> <span class="greenRounded">flowers</span> <span class="greenRounded">china</span> <span class="greenRounded">orange</span>

Answer 3

最简单的方法是使用ul元素和一些CSS：

请看一下：http://jsfiddle.net/5agephjL/

HTML

<ul>
    <li>tag</li>
    <li>tag</li>
    <li>tag</li>
    <li>tag</li>
    <li>tag</li>
</ul>

CSS

li {
    display: inline-block;
    background: #ddd;
    color: #fff;
    border-radius: 5px;
    padding: 5px;
}

当然，您的图片显示了完整的示例。你需要添加特定的颜色，字体，填充，边距等。但骨架是正确的。