<div class="hui-tag-wrapper">
  <div class="hui-tag-editor clearfix">
    <i class="hui-tag-icon"></i>
    <span class="hui-tag-token">Hui前端框架</span>
    <span class="hui-tag-token">CSS3</span>
    <span class="hui-tag-token">HTML5</span>
    <div class="hui-tag-iptwrap">
      <input type="text" class="hui-tag-input" maxlength="20" value="" >
      <label class="hui-tag-label">添加相关标签，用空格或回车分隔</label>
    </div>
  </div>
  <div class="hui-tag-list">
    <div class="hui-tag-null">暂无常用标签</div>
    <div class="hui-tag-has"><span>前端框架</span> <span>前端开发</span> <span>H-ui</span></div>
  </div>
  <input type="hidden" class="hui-tag-input" name="" value="">
</div>

.hui-tag-wrapper {
  border: solid 1px #dedede;
  padding: 0 10px;
  .hui-tag-editor {
    position: relative;
    padding: 10px 0 10px 24px;
    min-height: 20px;
    .hui-tag-icon {
      position: absolute;
      left: 0;
      top: 11px;
      font-size: 14px;
      color: #666;
    }
    .hui-tag-token {
      color: #aaa;
      float: left;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      margin-right: 8px;
      padding: 0 1px;
      white-space: nowrap;
      cursor: pointer;
      &:before {
        content: "#";
      }
      &:hover {
        text-decoration: line-through;
      }
    }
    .hui-tag-iptwrap {
      position: relative;
      float: left;
      .hui-tag-input {
        position: relative;
        height: 20px;
        min-width: 60px;
        border: 0 none;
        vertical-align: top;
        line-height: 20px;
        color: #333;
        z-index: 2;
        background: url(../images/Huitags/empty.png) repeat scroll 0 0;
        display: inline-block;
        width: 100%;
      }
    }
    .hui-tag-label {
      position: absolute;
      top: 0;
      left: 2px;
      width: 240px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      overflow: hidden;
      z-index: 1;
      color: #ccc;
    }
  }
  .hui-tag-list {
    padding: 0 0 10px 0;
    .hui-tag-null {
      font-size: 12px;
    }
    .hui-tag-has span {
      cursor: pointer;
      font-size: 12px;
      white-space: nowrap;
      margin-right: 10px;
    }
  }
}

.hui-tag-wrapper {
  border: solid 1px #dedede;
  padding: 0 10px;
}
.hui-tag-wrapper .hui-tag-editor {
  position: relative;
  padding: 10px 0 10px 24px;
  min-height: 20px;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-icon {
  position: absolute;
  left: 0;
  top: 11px;
  font-size: 14px;
  color: #666;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-token {
  color: #aaa;
  float: left;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  margin-right: 8px;
  padding: 0 1px;
  white-space: nowrap;
  cursor: pointer;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-token:before {
  content: "#";
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-token:hover {
  text-decoration: line-through;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-iptwrap {
  position: relative;
  float: left;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-iptwrap .hui-tag-input {
  position: relative;
  height: 20px;
  min-width: 60px;
  border: 0 none;
  vertical-align: top;
  line-height: 20px;
  color: #333;
  z-index: 2;
  background: url(../images/Huitags/empty.png) repeat scroll 0 0;
  display: inline-block;
  width: 100%;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-label {
  position: absolute;
  top: 0;
  left: 2px;
  width: 240px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
  z-index: 1;
  color: #ccc;
}
.hui-tag-wrapper .hui-tag-list {
  padding: 0 0 10px 0;
}
.hui-tag-wrapper .hui-tag-list .hui-tag-null {
  font-size: 12px;
}
.hui-tag-wrapper .hui-tag-list .hui-tag-has span {
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  margin-right: 10px;
}

$("#hui-tag-demo1").Huitag();

4.17.2 标签混排效果

H-ui前端框架 Web安全色 jQuery轮播插件韩国云虚拟主机 IEbug IT网址导航网站常用小图标 web工具箱网站常用背景素材 H-ui阅读弹出层插件 SuperSlide插件 TouchSlide

HTML SCSS CSS JS

<div class="hui-tagsmixed">
  <a href="http://www.h-ui.net/">H-ui前端框架</a> <a href="http://www.h-ui.net/websafecolors.shtml">Web安全色</a> <a href="http://www.h-ui.net/hui-4.4-Unslider.shtml">jQuery轮播插件</a> <a href="http://idc.likejianzhan.com/vhost/korea_hosting.php">韩国云虚拟主机</a> <a href="http://www.h-ui.net/bug.shtml">IEbug</a> <a href="http://www.h-ui.net/site.shtml">IT网址导航</a> <a href="http://www.h-ui.net/icon/index.shtml">网站常用小图标</a> <a href="http://www.h-ui.net/tools/jsformat.shtml">web工具箱</a> <a href="http://www.h-ui.net/bg/index.shtml">网站常用背景素材</a> <a href="http://www.h-ui.net/yuedu/chm.shtml">H-ui阅读</a> <a href="http://www.h-ui.net/easydialog-v2.0/index.html">弹出层插件</a> <a href="http://www.h-ui.net/SuperSlide2.1/demo.html">SuperSlide插件</a> <a href="http://www.h-ui.net/TouchSlide1.1/demo.html">TouchSlide</a>
</div>

.hui-tagsmixed {
  a {
    height: 26px;
    line-height: 26px;
    padding-right: 6px;
    &:hover {
      color: #F00;
      text-decoration: underline;
    }
    &.tags1 {
      color: #C00;
      font-size: 24px;
    }
  
    &.tags2 {
      color: #030;
      font-size: 16px;
    }
  
    &.tags3 {
      color: #00F;
    }
  
    &.tags4 {
      font-size: 16px;
    }
  
    &.tags5 {
      color: #C00;
      font-size: 20px;
    }
  
    &.tags6 {
      color: #F06;
      font-size: 20px;
    }
  
    &.tags7 {
      color: #030;
      font-weight: bold;
      font-size: 18px;
    }
  
    &.tags8 {
      color: #F06;
      font-weight: bold;
    }
  
    &.tags9 {
      color: #C00;
      font-weight: bold;
      font-size: 16px;
    }
  }
}

.hui-tagsmixed a {
  height: 26px;
  line-height: 26px;
  padding-right: 6px;
}
.hui-tagsmixed a:hover {
  color: #F00;
  text-decoration: underline;
}
.hui-tagsmixed a.tags1 {
  color: #C00;
  font-size: 24px;
}
.hui-tagsmixed a.tags2 {
  color: #030;
  font-size: 16px;
}
.hui-tagsmixed a.tags3 {
  color: #00F;
}
.hui-tagsmixed a.tags4 {
  font-size: 16px;
}
.hui-tagsmixed a.tags5 {
  color: #C00;
  font-size: 20px;
}
.hui-tagsmixed a.tags6 {
  color: #F06;
  font-size: 20px;
}
.hui-tagsmixed a.tags7 {
  color: #030;
  font-weight: bold;
  font-size: 18px;
}
.hui-tagsmixed a.tags8 {
  color: #F06;
  font-weight: bold;
}
.hui-tagsmixed a.tags9 {
  color: #C00;
  font-weight: bold;
  font-size: 16px;
}

/*4.17.3 tag云标签*/
.hui-tagyun {
  position: relative;
}
.hui-tagyun a {
  position: absolute;
  top: 0px;
  left: 0px;
  font-weight: bold;
  text-decoration: none;
  padding: 3px 6px;
}

var tags_a = $(".hui-tagsmixed a");
  tags_a.each(function(){
    var x = 9;
    var y = 0;
    var rand = parseInt(Math.random() * (x - y + 1) + y);
    $(this).addClass("tags"+rand);
  });

标签

4.17.1 标签输入效果

4.17.2 标签混排效果