20个"标准的"配色方案

最新推荐文章于 2021-11-01 16:53:37 发布

macrotea

最新推荐文章于 2021-11-01 16:53:37 发布

阅读量186

点赞数

分类专栏： HTML/CSS 文章标签： CSS HTML

本文链接：https://blog.csdn.net/macrotea/article/details/83740672

版权

HTML/CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

　　
<html>
　　
<head>
　　
<title>Colors</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>Title</h5>
</div>
　　
<div class="style2">
    <h5>Title</h5>
</div>
　　
<div class="style6">
    <h5>Title</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>