情感配色便签

by Terry Cai

HTML

<h1>情感配色便签</h1>
<div class="clear"></div>
<div class="title">
    <p>柔和、明亮、温和</p>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid #A3CC7A;background-color:#BCEB8D;">
      <div class="color" style="background-color:#CCFF99;"></div>
    </div>
  </div>
  <div class="caption"><h3>#CCFF99</h3>HEX: #CCFF99<br />RGB: 204,255,153</div>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid #739973;background-color:#8AB88A;">
      <div class="color" style="background-color:#99CC99;"></div>
    </div>
  </div>
  <div class="caption"><h3>#99CC99</h3>HEX: #99CC99<br />RGB: 153,204,153</div>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid #CC5252;background-color:#EB5E5E;">
      <div class="color" style="background-color:#FF6666;"></div>
    </div>
  </div>
  <div class="caption"><h3>#FF6666</h3>HEX: #FF6666<br />RGB: 255,102,102</div>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid #A3CCCC;background-color:#BCEBEB;">
      <div class="color" style="background-color:#CCFFFF;"></div>
    </div>
  </div>
  <div class="caption"><h3>#CCFFFF</h3>HEX: #CCFFFF<br />RGB: 204,255,255</div>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid #CCA37A;background-color:#EBBC8D;">
      <div class="color" style="background-color:#FFCC99;"></div>
    </div>
  </div>
  <div class="caption"><h3>#FFCC99</h3>HEX: #FFCC99<br />RGB: 255,204,153</div>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid #999999;background-color:#B8B8B8;">
      <div class="color" style="background-color:#CCCCCC;"></div>
    </div>
  </div>
  <div class="caption"><h3>#CCCCCC</h3>HEX: #CCCCCC<br />RGB: 204,204,204</div>
</div>
<div class="swatch">
  <div class="outer">
    <div class="shadow" style="border:1px solid...

CSS

body {
      background-color: #FFF;
      color: #000;
      font-family: arial, sans-serif;
    }
    div.swatch {
      float: left;
      width: 280px;
      margin: 0 20px 20px 0;
    }
    div.outer {
      float: left;
      border: 1px solid #CCC;
      padding: 1px;
    }
    div.shadow {
      padding: 1px;
    }
    h1 {
      font-size: 26px;
      font-weight: normal;
      padding-bottom: 5px;
      margin-bottom: 28px;
      border-bottom: 1px solid #CCC;
    }
    div.color {
      width: 80px;
      height: 80px;
      padding: 0;
      margin: 0;
    }
    div.caption {
      float: left;
      color: #555;
      font-size: 12px;
      line-height: 16px;
      margin: 0 0 0 10px;
    }
    h3 {
      margin: 0 0 4px 0;
      padding: 0 0 2px 0;
      width: 160px;
      font-size: 13px;
      font-weight: bold;
      border-bottom: 1px solid #E6E6E6;
    }
    .clear{clear:both;}
    .title{font:24px/2 'Lucida Grande', Verdana, Tahoma, Arial, sans-serif;font-weight: bold;}