经典的WEB2.0配色方案

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>
     
173. <body>
     
174. <div class="style1"><h5></h5></div>
     
175. <div class="style2"><h5></h5></div>
     
176. <div class="style6"><h5></h5></div>
     
177. <div class="style3"></div>
     
178. <div class="style4"></div>
     
179. <div class="style5"></div>
     
180. <div class="style7"></div>
     
181. <div class="style8"></div>
     
182. <div class="style9"></div>
     
183. <div class="style10"></div>
     
184. <div class="style11"></div>
     
185. <div class="style12"></div>
     
186. <div class="style13"></div>
     
187. <div class="style14"></div>
     
188. <div class="style15"></div>
     
189. <div class="style16"></div>
     
190. </body>
     
191. </html>

复制代码