15套优雅的配色方案代码

by 清泉 18. 九月 2008 08:51

有了下面的配色方案你可以轻而易举的做出清新怡人的网页.
下面是范例效果图：

下面是演示地址：15套优雅的配色方案效果演示

下面是配色具体实现的html代码：

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta name="Keywords" content="Supidea" />
<meta name="Description" content="Supidea.com" />
<title>优雅网站配色方案示例</title>
<style type="text/css">
.style1{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #96C2F1;background-color: #EFF7FF}
.style2{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #9BDF70;background-color: #F0FBEB}
.style3{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #BBE1F1;background-color: #EEFAFF}
.style4{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CCEFF5;background-color: #FAFCFD}
.style5{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #FFCC00;background-color: #FFFFF7}
.style6{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #92B0DD;background-color: #FFFFFf}
.style6 h5{margin: 1px;background-color: #E2EAF8;height: 24px;}
.style7{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #A9C9E2;background-color: #E8F5FE}
.style8{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #E3E197;background-color: #FFFFDD}
.style9{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #ADCD3C;background-color: #F2FDDB}
.style10{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #F8B3D0;background-color: #FFF5FA}
.style11{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #D3D3D3;background-color: #F7F7F7}
.style12{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #BFD1EB;background-color: #F3FAFF}
.style13{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #FFDD99;background-color: #FFF9ED}
.style14{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CACAFF;background-color: #F7F7FF}
.style15{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #A5B6C8;background-color: #EEF3F7}
.style16{width:80%;height: 100px;margin: 0px auto;margin-bottom:20px;border:1px solid #CEE3E9;background-color: #F1F7F9}
</style>
</head>
<body>
<div class="style1"><h5></h5></div>
<div class="style2"><h5></h5></div>
<div class="style6"><h5></h5></div>
<div class="style3"></div>
<div class="style4"></div>
<div class="style5"></div>
<div class="style7"></div>
<div class="style8"></div>
<div class="style9"></div>
<div class="style10"></div>
<div class="style11"></div>
<div class="style12"></div>
<div class="style13"></div>
<div class="style14"></div>
<div class="style15"></div>
<div class="style16"></div>
</body>
</html>