设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › 增值产品交流与讨论 › SS/XS 专区 › SS/XS-模板插件 › 经典的WEB2.0配色方案
返回列表 发新帖

[分享] 经典的WEB2.0配色方案

[复制链接]
mingkong 发表于 2007-9-28 12:30:34 | 显示全部楼层 |阅读模式
经典的WEB2.0配色方案代码,
web2.0 color.png
  1. <html>
  2. <head>
  3.         <title>web2.0 color</title>
  4.         <style type="text/css">
  5.         body{
  6.         margin:20px;
  7.         font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  8.         font-size:12px;
  9.                 text-align:center;
  10.         }
  11.         .style1{
  12.         width: 800px;
  13.         height: 100px;
  14.         margin: 0px auto;
  15.         margin-bottom:20px;
  16.         border:1px solid #96C2F1;
  17.         background-color: #EFF7FF
  18.         }
  19.         .style1 h5{
  20.         margin: 1px;
  21.         background-color: #B2D3F5;
  22.         height: 24px;
  23.         }
  24.        
  25.         .style2{
  26.         width: 800px;
  27.         height: 100px;
  28.         margin: 0px auto;
  29.         margin-bottom:20px;
  30.         border:1px solid #9BDF70;
  31.         background-color: #F0FBEB
  32.         }
  33.                 .style2 h5{
  34.         margin: 1px;
  35.         background-color: #C2ECA7;
  36.         height: 24px;
  37.         }
  38.        
  39.         .style3{
  40.         width: 800px;
  41.         height: 100px;
  42.         margin: 0px auto;
  43.         margin-bottom:20px;
  44.         border:1px solid #BBE1F1;
  45.         background-color: #EEFAFF
  46.         }
  47.        
  48.         .style4{
  49.         width: 800px;
  50.         height: 100px;
  51.         margin: 0px auto;
  52.         margin-bottom:20px;
  53.         border:1px solid #CCEFF5;
  54.         background-color: #FAFCFD
  55.         }
  56.        
  57.         .style5{
  58.         width: 800px;
  59.         height: 100px;
  60.         margin: 0px auto;
  61.         margin-bottom:20px;
  62.         border:1px solid #FFCC00;
  63.         background-color: #FFFFF7
  64.         }
  65.        
  66.         .style6{
  67.         width: 800px;
  68.         height: 100px;
  69.         margin: 0px auto;
  70.         margin-bottom:20px;
  71.         border:1px solid #92B0DD;
  72.         background-color: #FFFFFf
  73.         }
  74.         .style6 h5{
  75.         margin: 1px;
  76.         background-color: #E2EAF8;
  77.         height: 24px;
  78.         }
  79.        
  80.         .style7{
  81.         width: 800px;
  82.         height: 100px;
  83.         margin: 0px auto;
  84.         margin-bottom:20px;
  85.         border:1px solid #A9C9E2;
  86.         background-color: #E8F5FE
  87.         }
  88.        
  89.         .style8{
  90.         width: 800px;
  91.         height: 100px;
  92.         margin: 0px auto;
  93.         margin-bottom:20px;
  94.         border:1px solid #E3E197;
  95.         background-color: #FFFFDD
  96.         }
  97.        
  98.         .style9{
  99.         width: 800px;
  100.         height: 100px;
  101.         margin: 0px auto;
  102.         margin-bottom:20px;
  103.         border:1px solid #ADCD3C;
  104.         background-color: #F2FDDB
  105.         }
  106.        
  107.         .style10{
  108.         width: 800px;
  109.         height: 100px;
  110.         margin: 0px auto;
  111.         margin-bottom:20px;
  112.         border:1px solid #F8B3D0;
  113.         background-color: #FFF5FA
  114.         }
  115.        
  116.         .style11{
  117.         width: 800px;
  118.         height: 100px;
  119.         margin: 0px auto;
  120.         margin-bottom:20px;
  121.         border:1px solid #D3D3D3;
  122.         background-color: #F7F7F7
  123.         }
  124.        
  125.         .style12{
  126.         width: 800px;
  127.         height: 100px;
  128.         margin: 0px auto;
  129.         margin-bottom:20px;
  130.         border:1px solid #BFD1EB;
  131.         background-color: #F3FAFF
  132.         }
  133.        
  134.         .style13{
  135.         width: 800px;
  136.         height: 100px;
  137.         margin: 0px auto;
  138.         margin-bottom:20px;
  139.         border:1px solid #FFDD99;
  140.         background-color: #FFF9ED
  141.         }       
  142.        
  143.         .style14{
  144.         width: 800px;
  145.         height: 100px;
  146.         margin: 0px auto;
  147.         margin-bottom:20px;
  148.         border:1px solid #CACAFF;
  149.         background-color: #F7F7FF
  150.         }       
  151.        
  152.         .style15{
  153.         width: 800px;
  154.         height: 100px;
  155.         margin: 0px auto;
  156.         margin-bottom:20px;
  157.         border:1px solid #A5B6C8;
  158.         background-color: #EEF3F7
  159.         }
  160.         .style16{
  161.         width: 800px;
  162.         height: 100px;
  163.         margin: 0px auto;
  164.         margin-bottom:20px;
  165.         border:1px solid #CEE3E9;
  166.         background-color: #F1F7F9
  167.         }       
  168.         h5{color:#CCCCCC;margin-left:680px}
  169.         a{color:#CCCCCC;text-decoration:none}
  170.         a:hover{color:#666666;text-decoration:underline}
  171.         </style>
  172. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

  174. <body>
  175. <div class="style1"><h5></h5></div>
  176. <div class="style2"><h5></h5></div>
  177. <div class="style6"><h5></h5></div>
  178. <div class="style3"></div>
  179. <div class="style4"></div>
  180. <div class="style5"></div>
  181. <div class="style7"></div>
  182. <div class="style8"></div>
  183. <div class="style9"></div>
  184. <div class="style10"></div>
  185. <div class="style11"></div>
  186. <div class="style12"></div>
  187. <div class="style13"></div>
  188. <div class="style14"></div>
  189. <div class="style15"></div>
  190. <div class="style16"></div>
  191. </body>
  192. </html>
复制代码
回复

使用道具 举报

SSAY 发表于 2007-9-28 12:56:14 | 显示全部楼层
回复

使用道具 举报

茄子 发表于 2007-9-28 13:35:08 | 显示全部楼层
:) 配色还不错
回复

使用道具 举报

居然注册了 发表于 2007-9-28 13:40:07 | 显示全部楼层
好象现在类似的配色满多的  有模糊 朦胧清爽的感觉.
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2025-1-9 14:06 , Processed in 0.024623 second(s), 4 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表