效果如下
border:#96c2f1
background-color:#eff7ff
border:#9bdf70
background-color:#f0fbeb
border:#bbe1f1
background-color:#eefaff
border:#cceff5
background-color:#fafcfd
border:#ffcc00
background-color:#fffff7
border:#92b0dd
background-color:#ffffff
border:#a9c9e2
background-color:#e8f5fe
border:#e3e197
background-color:#ffffdd
border:#adcd3c
background-color:#f2fddb
border:#f8b3d0
background-color:#fff5fa
border:#d3d3d3
background-color:#f7f7f7
border:#bfd1eb
background-color:#f3faff
border:#ffdd99
background-color:#fff9ed
border:#cacaff
background-color:#f7f7ff
border:#a5b6c8
background-color:#eef3f7
border:#cee3e9
background-color:#f1f7f9
border:#cae3ff
background-color:#f4f9ff
border:#c9d9ee
background-color:#ecf8ff
border:#5c9cc0
background-color:#f2faff
程序代码
配色代码
<style type="text/css">
.colorNav {text-align:right;margin: 0px auto;}
.colorNav div{margin-bottom:5px;margin-right:5px;float:left; text-align:left; padding-left:6px; line-height:25px; width:300px;}
.colorNav .b1{border:1px solid #96C2F1;background-color: #EFF7FF;}
.colorNav .b2{border:1px solid #9BDF70;background-color: #F0FBEB;}
.colorNav .b3{border:1px solid #BBE1F1;background-color: #EEFAFF;}
.colorNav .b4{border:1px solid #CCEFF5;background-color: #FAFCFD;}
.colorNav .b5{border:1px solid #FFCC00;background-color: #FFFFF7;}
.colorNav .b6{border:1px solid #92B0DD;background-color: #FFFFFF;}
.colorNav .b7{border:1px solid #A9C9E2;background-color: #E8F5FE;}
.colorNav .b8{border:1px solid #E3E197;background-color: #FFFFDD;}
.colorNav .b9{border:1px solid #ADCD3C;background-color: #F2FDDB;}
.colorNav .b10{border:1px solid #F8B3D0;background-color: #FFF5FA;}
.colorNav .b11{border:1px solid #D3D3D3;background-color: #F7F7F7;}
.colorNav .b12{border:1px solid #BFD1EB;background-color: #F3FAFF;}
.colorNav .b13{border:1px solid #FFDD99;background-color: #FFF9ED;}
.colorNav .b14{border:1px solid #CACAFF;background-color: #F7F7FF;}
.colorNav .b15{border:1px solid #A5B6C8;background-color: #EEF3F7;}
.colorNav .b16{border:1px solid #CEE3E9;background-color: #F1F7F9;}
.colorNav .b17{border:1px solid #CAE3FF;background-color: #F4F9FF;}
.colorNav .b18{border:1px solid #C9D9EE;background-color: #ECF8FF;}
.colorNav .b19{border:1px solid #5C9CC0;background-color: #F2FAFF;}
</style>
<div class="colorNav">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>
<div class="b8"></div>
<div class="b9"></div>
<div class="b10"></div>
<div class="b11"></div>
<div class="b12"></div>
<div class="b13"></div>
<div class="b14"></div>
<div class="b15"></div>
<div class="b16"></div>
<div class="b17"></div>
<div class="b18"></div>
<div class="b19"></div>
</div>
样式来源:
http://rlog.cn/210