下一篇

实用代码

20个具有代表性的web2.0配色方案

作者:bonbeck 日期:2007-08-02

字体大小: 小中大

20个具有代表性的web2.0配色方案

<html>
<head>
<title>web2.0 color</title>
<style type="text/css">
  body{
  margin:20px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:12px;
  }
  .style1{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #96C2F1;
  background-color: #EFF7FF
  }
  .style1 h5{
  margin: 1px;
  background-color: #B2D3F5;
  height: 24px;
  }
  
  .style2{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #9BDF70;
  background-color: #F0FBEB
  }
    .style2 h5{
  margin: 1px;
  background-color: #C2ECA7;
  height: 24px;
  }
  
  .style3{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #BBE1F1;
  background-color: #EEFAFF
  }
  
  .style4{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #CCEFF5;
  background-color: #FAFCFD
  }
  
  .style5{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #FFCC00;
  background-color: #FFFFF7
  }
  
  .style6{
  width: 800px;
  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: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #A9C9E2;
  background-color: #E8F5FE
  }
  
  .style8{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #E3E197;
  background-color: #FFFFDD
  }
  
  .style9{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #ADCD3C;
  background-color: #F2FDDB
  }
  
  .style10{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #F8B3D0;
  background-color: #FFF5FA
  }
  
  .style11{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #D3D3D3;
  background-color: #F7F7F7
  }
  
  .style12{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #BFD1EB;
  background-color: #F3FAFF
  }
  
  .style13{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #FFDD99;
  background-color: #FFF9ED
  }  
  
  .style14{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #CACAFF;
  background-color: #F7F7FF
  }  
  
  .style15{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #A5B6C8;
  background-color: #EEF3F7
  }
  .style16{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #CEE3E9;
  background-color: #F1F7F9
  }
  
  .style17{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #CAE3FF;
  background-color: #F4F9FF
  }
  
  .style18{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #C9D9EE;
  background-color: #ECF8FF
  }
  
  .style19{
  width: 800px;
  height: 100px;
  margin: 0px auto;
  margin-bottom:20px;
  border:1px solid #5C9CC0;
  background-color: #F2FAFF
  }
  
  h5{color:#CCCCCC;margin-left:680px}
  a{color:#CCCCCC;text-decoration:none}
  a:hover{color:#666666;text-decoration:underline}
  </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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>
<div class="style17">
</div>
<div class="style18">
</div>
<div class="style19">
</div>
</body>
</html>

代码"/> 代码"/>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

原创文章如转载，请注明转载自　NextCool　[ http://www.nextcool.cn ]
本文地址：http://www.nextcool.cn/article.asp?id=69

喜欢本文？那就订阅NextCool吧！
什么是RSS?如何订阅？

收藏到：Delicious | QQ书签 | 挖客 | 百度搜藏 | 收客网 | Mister-Wong | diglog | 板儿砖 | 乐收

相关日志:
·Web2.0风格精美导航下载[EPS格式][2777]
·Mycoolbutton-在线制作web2.0按钮[3793]
·100多个Web2.0在线生成器[3441]
·在线处理图片的网址大集合,设计人员珍藏[4267]
·最热门的100web2.0个网站 Top 100 web2.0 Sites[4753]
·自己动手，制作漂亮的WEB2.0徽章[1980]

[本日志由 bonbeck 于 2007-08-02 06:07 PM 编辑]
文章来自: 互联网
引用通告: 查看所有引用 | 我要引用此文章
Tags: web2.0 color

评论: 3 | 引用: 0 | 查看次数: 2672

1

迷失路上 [2007-08-03 02:10 PM]

多半为蓝色,线框\按扭现在都扯WEB2.0了,

bonbeck [2007-08-02 11:10 PM]

为啥不能扯？

cnly [2007-08-02 07:34 PM]

我晕，这也扯上WEB2.0

1

发表评论

Powered By PJBlog2 v2.7 Build 05 CopyRight 2005 - 2007, NextCool xhtml | css

Processed in 0.101563 second(s) , 6 queries , PJ-Mag Design By Bonbeck
蒙ICP备07003498号 |