html颜色块图标醒目大方。
本文详解颜色块图标的CSS实现。
设计界面元素
在把主页面的 html 的元素规定好。主要由四个图标组成。如下：
<body>
<div class="container">
<div class="bgblue"> 0#柴油<br/><h1>7.84</h1></div>
<div class="bgblue"> 90#柴油<br/><h1>8.26</h1></div>
<div class="bgblue"> 93#柴油<br/><h1>7.80</h1></div>
<div class="bgblue"> 97#柴油<br/><h1>8.45</h1></div>
</div>
<div id="buttom_id">
更多示例访问：<a href="http://wwww.waylau.com" target="_blank">http://wwww.waylau.com</a>
</div>
</body>
图标直接用的是div
样式
图标样式
底色
background:#123456;
字体颜色（白色）
color:#fff;
文本布局（垂直居中）
vertical-align: middle;
text-align: center;
float: left;
padding: 20px;
margin-left: 20px;
效果 
圆形图标
可以将图标设置成圆形或者任意角度弧形 增加样式：
border:4px solid;
border-radius:55px;
其中 border-radius 控制div角度，border是边框
整体效果
源码下载
时间： 2024-09-12 17:47:17