Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<h3>效果：</h3>
  <h4>1. 基础颜色</h4>
  <p>
    <span class="tag-txt _dark">主色</span> 
    <span class="tag-txt _gray">灰色</span> 
    <span class="tag-txt _blue">蓝色</span> 
    <span class="tag-txt _green">绿色</span> 
    <span class="tag-txt _orange">橙色</span> 
    <span class="tag-txt _yellow">黄色</span> 
    <span class="tag-txt _purple">紫色</span> 
    <span class="tag-txt _red">红色</span>
  </p>
  <h4>2. 基本按钮</h4>
  <p>
    <a href="javascript:" class="btn-normal _dark">深色按钮</a>
    <a href="javascript:" class="btn-normal _gray">灰色按钮</a>
    <a href="javascript:" class="btn-normal _blue">蓝色按钮</a>
    <a href="javascript:" class="btn-normal _green">绿色按钮</a>
    <a href="javascript:" class="btn-normal _orange">橙色按钮</a>
    <a href="javascript:" class="btn-normal _yellow">黄色按钮</a>
    <a href="javascript:" class="btn-normal _purple">紫色按钮</a>
    <a href="javascript:" class="btn-normal _red">红色按钮</a>
    <a href="javascript:" class="btn-normal _white">白色按钮</a>
  </p>
  <h4>3. 实色小标签</h4>
  <p>
    <span class="tag-solid _dark">主色</span>
    <span class="tag-solid _gray">灰色</span>
    <span class="tag-solid _blue">蓝色</span>
    <span class="tag-solid _green">绿色</span>
    <span class="tag-solid _orange">橙色</span>
    <span class="tag-solid _yellow">黄色</span>
    <span class="tag-solid _purple">紫色</span>
    <span class="tag-solid _red">红色</span>
  </p>
  <h4>4. 大圆角质感标签</h4>
  <p>
    <span class="tag-honor _dark">主色</span>
    <span class="tag-honor _gray">灰色</span>
    <span class="tag-honor _blue">蓝色</span>
    <span class="tag-honor _green">绿色</span>
    <span class="tag-honor _orange">橙色</span>
    <span class="tag-honor _yellow">黄色</span>
    <span class="tag-honor _purple">紫色</span>
    <span class="tag-honor _red">红色</span>
  </p>
  <h4>3. 线框标签</h4>
  <p>
    <span class="tag-line _dark">主色</span>
    <span class="tag-line _gray">灰色</span>
    <span class="tag-line _blue">蓝色</span>
    <span class="tag-line _green">绿色</span>
    <span class="tag-line _orange">橙色</span>
    <span class="tag-line _yellow">黄色</span>
    <span class="tag-line _purple">紫色</span>
    <span class="tag-line _red">红色</span>
  </p>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ziven27pro
0viewers