超爽网页配色
html源码如下：
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
border-right: #96c2f1 1px solid;
border-top: #96c2f1 1px solid;
margin: 0px auto 20px;
border-left: #96c2f1 1px solid;
width: 400px;
border-bottom: #96c2f1 1px solid;
height: 100px;
background-color: #eff7ff;
}
.style2
{
border-right: #9bdf70 1px solid;
border-top: #9bdf70 1px solid;
margin: 0px auto 20px;
border-left: #9bdf70 1px solid;
width: 400px;
border-bottom: #9bdf70 1px solid;
height: 100px;
background-color: #f0fbeb;
}
.style3
{
border-right: #bbe1f1 1px solid;
border-top: #bbe1f1 1px solid;
margin: 0px auto 20px;
border-left: #bbe1f1 1px solid;
width: 400px;
border-bottom: #bbe1f1 1px solid;
height: 100px;
background-color: #eefaff;
}
.style4
{
border-right: #cceff5 1px solid;
border-top: #cceff5 1px solid;
margin: 0px auto 20px;
border-left: #cceff5 1px solid;
width: 400px;
border-bottom: #cceff5 1px solid;
height: 100px;
background-color: #fafcfd;
}
.style5
{
border-right: #ffcc00 1px solid;
border-top: #ffcc00 1px solid;
margin: 0px auto 20px;
border-left: #ffcc00 1px solid;
width: 400px;
border-bottom: #ffcc00 1px solid;
height: 100px;
background-color: #fffff7;
}
.style6
{
border-right: #92b0dd 1px solid;
border-top: #92b0dd 1px solid;
margin: 0px auto 20px;
border-left: #92b0dd 1px solid;
width: 400px;
border-bottom: #92b0dd 1px solid;
height: 100px;
background-color: #ffffff;
}
.style6 H5
{
margin: 1px;
height: 24px;
background-color: #e2eaf8;
}
.style7
{
border-right: #a9c9e2 1px solid;
border-top: #a9c9e2 1px solid;
margin: 0px auto 20px;
border-left: #a9c9e2 1px solid;
width: 400px;
border-bottom: #a9c9e2 1px solid;
height: 100px;
background-color: #e8f5fe;
}
.style8
{
border-right: #e3e197 1px solid;
border-top: #e3e197 1px solid;
margin: 0px auto 20px;
border-left: #e3e197 1px solid;
width: 400px;
border-bottom: #e3e197 1px solid;
height: 100px;
background-color: #ffffdd;
}
.style9
{
border-right: #adcd3c 1px solid;
border-top: #adcd3c 1px solid;
margin: 0px auto 20px;
border-left: #adcd3c 1px solid;
width: 400px;
border-bottom: #adcd3c 1px solid;
height: 100px;
background-color: #f2fddb;
}
.style10
{
border-right: #f8b3d0 1px solid;
border-top: #f8b3d0 1px solid;
margin: 0px auto 20px;
border-left: #f8b3d0 1px solid;
width: 400px;
border-bottom: #f8b3d0 1px solid;
height: 100px;
background-color: #fff5fa;
}
.style11
{
border-right: #d3d3d3 1px solid;
border-top: #d3d3d3 1px solid;
margin: 0px auto 20px;
border-left: #d3d3d3 1px solid;
width: 400px;
border-bottom: #d3d3d3 1px solid;
height: 100px;
background-color: #f7f7f7;
}
.style12
{
border-right: #bfd1eb 1px solid;
border-top: #bfd1eb 1px solid;
margin: 0px auto 20px;
border-left: #bfd1eb 1px solid;
width: 400px;
border-bottom: #bfd1eb 1px solid;
height: 100px;
background-color: #f3faff;
}
.style13
{
border-right: #ffdd99 1px solid;
border-top: #ffdd99 1px solid;
margin: 0px auto 20px;
border-left: #ffdd99 1px solid;
width: 400px;
border-bottom: #ffdd99 1px solid;
height: 100px;
background-color: #fff9ed;
}
.style14
{
border-right: #cacaff 1px solid;
border-top: #cacaff 1px solid;
margin: 0px auto 20px;
border-left: #cacaff 1px solid;
width: 400px;
border-bottom: #cacaff 1px solid;
height: 100px;
background-color: #f7f7ff;
}
.style15
{
border-right: #a5b6c8 1px solid;
border-top: #a5b6c8 1px solid;
margin: 0px auto 20px;
border-left: #a5b6c8 1px solid;
width: 400px;
border-bottom: #a5b6c8 1px solid;
height: 100px;
background-color: #eef3f7;
}
.style16
{
border-right: #cee3e9 1px solid;
border-top: #cee3e9 1px solid;
margin: 0px auto 20px;
border-left: #cee3e9 1px solid;
width: 400px;
border-bottom: #cee3e9 1px solid;
height: 100px;
background-color: #f1f7f9;
}
</style>
</head>
<body>
<form>
<p> 浏览效果如下：</p>
<div class="style1"><h5><a href="http://www.cnblogs.com/lsq_NET/archive/2010/07/13/1775679.html">1</a></h5></div>
<div class="style2"><h5><a href="http://www.cnblogs.com/lsq_NET/archive/2010/07/13/1775679.html">2</a></h5></div>
<div class="style6"><h5>6</h5></div>
<div class="style3">3</div>
<div class="style4">4</div>
<div class="style5">5</div>
<div class="style7">7</div>
<div class="style8">8</div>
<div class="style9">9</div>
<div class="style10">10</div>
<div class="style11">11</div>
<div class="style12">12</div>
<div class="style13">13</div>
<div class="style14">14</div>
<div class="style15">15</div>
<div class="style16">16</div>
</form>
</body>
</html>
浏览效果如下：
3
4
5
6
7
8
9
10
11
12
13
14
15
16
