CSS 直方图布局示例

351 阅读 0 评论 232 点赞

我是靠谱客的博主舒适乐曲，这篇文章主要介绍CSS 直方图布局示例，现在分享给大家，希望可以做个参考。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>CSS直方图示例</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
<style type="text/css"> 
.chart { 
    font-family: Tahoma; 
    font-size: 12px; 
    border: 1px solid #ccc; 
    float: left; 
    margin: 0; 
    padding: .4em .1em; 
}

.chart li { 
    list-style: none; 
    float: left; 
    width: 5em; 
    text-align: center; 
    background: url(/upload/2009-11/20091104144827988.gif) center 1.6em no-repeat; 
}

.chart li span { 
    display: block; 
    text-indent: -999em; 
    padding-bottom: 90px; 
    background: url(/upload/2009-11/20091104144827692.gif) center -1px no-repeat; 
    border-top: 5px solid #fff; 
}

.chart strong { 
    display: block; 
    text-align: center; 
    font-weight: normal; 
} 
</style> 
</head> 
<body> 
<ul class="chart"> 
<li>一月<span style="background-position: center -35">: </span><strong>35%</strong></li> 
<li>二月<span style="background-position: center -40">: </span><strong>40%</strong></li> 
<li>三月<span style="background-position: center -87">: </span><strong>87%</strong></li> 
<li>四月<span style="background-position: center -45">: </span><strong>45%</strong></li> 
<li>五月<span style="background-position: center -23">: </span><strong>23%</strong></li> 
</ul> 
<p style="clear: both"></p><p> </p> 
<ul class="chart"> 
<li><em>一月</em><span style="background-position: center -35">: </span><strong>35%</strong></li> 
<li><em>二月</em><span style="background-position: center -40">: </span><strong>40%</strong></li> 
<li><em>三月</em><span style="background-position: center -87">: </span><strong>87%</strong></li> 
<li><em>四月</em><span style="background-position: center -45">: </span><strong>45%</strong></li> 
<li><em>五月</em><span style="background-position: center -23">: </span><strong>23%</strong></li> 
</ul> 
<p style="clear: both"></p><p> </p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最后

以上就是舒适乐曲最近收集整理的关于CSS 直方图布局示例的全部内容，更多相关CSS内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

点赞(232)

本文分类：JavaScript
浏览次数：351 次浏览
发布日期：2022-04-03 03:14:03
本文链接：https://www.kaopuke.com/article/k-p-k_12_u_7_o_22_fz_14__26__27__27_.html

相关文章

Erlang实现的百度云推送Android服务端实例

Erlang实现的百度云推送Android服务端实例

基于JavaScript实现全屏透明遮罩div层锁屏效果

基于JavaScript实现全屏透明遮罩div层锁屏效果

Win10服务怎么打开?Win10哪些服务可以关闭

Win10服务怎么打开?Win10哪些服务可以关闭

Photoshop制作精美的中国风外景古装美女图片

Photoshop制作精美的中国风外景古装美女图片

CSS 直方图布局示例

Photoshop为树林美女图片增加朦胧唯美的小清新淡黄色

Photoshop为树林美女图片增加朦胧唯美的小清新淡黄色

用Win7系统的Syskey命令来设置系统的启动密码

用Win7系统的Syskey命令来设置系统的启动密码

Ajax客户端异步调用服务端的实现方法(js调用cs文件)

Ajax客户端异步调用服务端的实现方法(js调用cs文件)

评论列表共有 0 条评论

发表评论取消回复

立即
投稿返回
顶部