js输入关键词生成标签

新建html文档。

书写hmtl代码。

书写css代码。body, h3, p, input, button { margin: 0; padding: 0; }input, button { border: none; }em { display: block; font-style: normal; }a { display: block; text-decoration: none; }.clearfix:before, .clearfix:after { content: ''; display: table; }.clearfix:after { clear: both; }.clearfix { zoom: 1; }.tagBox { width: 750px; padding: 20px 25px 30px 25px; background-color: #f4f4f4; margin: 50px auto; border: 1px solid #bbbbbb; border-radius: 4px; }.t agTle h3 { font: 700 18px/32px 'arail', 'microsoft yahei'; color: #444; }.t agTle p { font: 14px/24px 'arail', 'microsoft yahei'; color: #a59999; }.t agCon { padding: 25px 0; }.t ag { padding: 12px 42px 12px 35px; background-color: #fff; border: 1px solid #bbb; border-radius: 4px; float: left; margin: 0 10px 5px 0; position: relative; cursor: pointer; }.tagtxt { font: 600 14px 'microsoft yahei'; color: #333; }.etag { width: 16px; height: 16px; border-radius: 8px; background-color: #ccc; text-align: center; color: #f1f1f1; position: absolute; top: 13px; right: 12px; }

书写并添加js代码。

代码整体结构。

查看效果。